Merge pull request #688 from nasa/develop

Release 1.7.2 to master

CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [v1.7.2] - 2020-03-16
+
+### Added
+
+- **CUMULUS-1758**
+  - Adds the ability to resize table columns
+
+### Changed
+
+- **CUMULUS-1758**
+  - Updates table implementation to use [react-table](https://github.com/tannerlinsley/react-table)
+
+## [v1.7.1] - 2020-03-06
+
+Fix for serving the dashboard through the Cumulus API.
+
 ## [v1.7.0] - 2020-03-02
 
 ### BREAKING CHANGES
@@ -89,6 +105,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - **CUMULUS-1690**
   - Removed Gulp/Browserify and their dependencies.
 
+### Fixed
+
+- **CUMULUS-1670**
+  - Fixed bug preventing update of providers
+
 ## [v1.6.1] - 2019-11-12
 
 ### Fixed
@@ -250,7 +271,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Versioning and changelog [CUMULUS-197] by @kkelly51
 
-[Unreleased]: https://github.com/nasa/cumulus-dashboard/compare/v1.7.0...HEAD
+[Unreleased]: https://github.com/nasa/cumulus-dashboard/compare/v1.7.2...HEAD
+[v1.7.2]: https://github.com/nasa/cumulus-dashboard/compare/v1.7.1...v1.7.2
+[v1.7.1]: https://github.com/nasa/cumulus-dashboard/compare/v1.7.0...v1.7.1
 [v1.7.0]: https://github.com/nasa/cumulus-dashboard/compare/v1.6.1...v1.7.0
 [v1.6.1]: https://github.com/nasa/cumulus-dashboard/compare/v1.6.0...v1.6.1
 [v1.6.0]: https://github.com/nasa/cumulus-dashboard/compare/v1.5.0...v1.6.0

README.md

@@ -325,15 +325,23 @@ Update the CHANGELOG.md. Put a header under the 'Unreleased' section with the ne
 
 Add a link reference for the GitHub "compare" view at the bottom of the CHANGELOG.md, following the existing pattern. This link reference should create a link in the CHANGELOG's release header to changes in the corresponding release.
 
-### 6. Create a pull request against the develop branch
+### 6. Update the version of the Cumulus API
+
+If this release corresponds to a Cumulus Core package release, update the version of `@cumulus/api` to the latest package version so that the integration tests will run against that version.
+
+### 7. Manual testing
+
+Test the dashboard against a live API deployed with the latest Cumulus packages. The dashboard should be served from an S3 bucket through the [`/dashboard` API endpoint](https://nasa.github.io/cumulus-api/#serve-the-dashboard-from-a-bucket).
+
+### 8. Create a pull request against the develop branch
 
 Create a PR for the `release-vX.X.X` branch against the `develop` branch. Verify that the Circle CI build for the PR succeeds and then merge to `develop`.
 
-### 7. Create a pull request against the master branch
+### 9. Create a pull request against the master branch
 
 Create a PR for the `develop` branch against the `master` branch. Verify that the Circle CI build for the PR succeeds and then merge to `master`.
 
-### 8. Create a git tag for the release
+### 10. Create a git tag for the release
 
 Push a new release tag to Github. The tag should be in the format `v1.2.3`, where `1.2.3` is the new version.
 
@@ -345,6 +353,6 @@ Create and push a new git tag:
   $ git push origin v1.x.x
 ```
 
-### 9. Add the release to GitHub
+### 11. Add the release to GitHub
 
 Follow the [Github documentation to create a new release](https://help.github.com/articles/creating-releases/) for the dashboard using the tag that you just pushed. Make sure to use the content from the CHANGELOG for this release as the description of the release on GitHub.

TABLES.md

@@ -1,27 +1,33 @@
 # Table documentation
 
-A lot of logic is encapsulated in the table components. They are central abstractions and wrap functionality like sorting, pagination, selection, and search. The main components are `sortable-table` and `list-view`.
+Our table components leverage [react-table](https://github.com/tannerlinsley/react-table/) to handle basic sorting, row selection, and resizable columns. The main components are `sortable-table` and `list-view`.
+
+react-table's main hook is `useTable()`. Options are passed into this hook for the desired functionality.
 
 ## `sortable-table`
 
 A basic table component that supports row selection and dumb sorting (see below).
 
 **Props**
 
-- **primaryIdx**: Column number to apply bold typeface to. Default is `0` or far-left column.
-- **data**: Array of data items. Items can be objects or arrays, depending on the accessor functions defined in `row`.
-- **header**: Array of strings representing the header row.
-- **row**: Array of items representing columns in each row. Items can be accessor functions with the arguments `data[k], k, data` (where `k` is the index of the current loop), or string values, ie `"collectionName"`.
-- **props**: Array of property names to send to Elasticsearch for a re-ordering query.
-- **sortIdx**: The current index of the `props` array to sort by.
-- **order**: Either 'desc' or 'asc', corresponding to sort order.
+- **tableColumns**: This is an array containing the column configuration for the table. It is the value for the `columns` key in the options object that is passed to `useTable()`
+  * Options for each column include:
+    - Header: *text or component that will render as the header*
+    - accessor: *key or function for obtaining value*
+    - id: *unqiure column id. required if accessor is function*
+    - disableSortBy: *set to true if the column should not be sortable*
+    - width: *default is 125. set value if column needs to be wider/smaller*
+
+  * Additional options can be found [here](https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md#column-options) or in the documation for a specific plugin hook
+
+- **data**: Array of data items. Items can be any format.
+- **sortIdx**: The id of the column to sort on.
 - **changeSortProps**: Callback when a new sort order is defined, passed an object with the properties `{ sortIdx, order }`.
-- **onSelect**: Callback when a row is selected (or unselected), passed a string id corresponding to the `rowId` selector.
+- **onSelect**: Callback when a row is selected (or unselected), passed an array containing the ids of all selected rows.
 - **canSelect**: Boolean value defining whether 1. rows can be selected and 2. to render check marks.
-- **selectedRows**: Array of row ID's corresponding to rows that are currently selected.
-- **rowId**: String accessor to define as that row's id, ie `collectionName`.
+- **rowId**: String or function that defines a particular row's id. Passed to `useTable` options via `getRowId`.
 
-Note, `props`, `sortIdx`, `order`, and `changeSortProps` only apply to components that implement smart searching, such as `list-view`. This base component does internal prop checking to determine whether it uses smart or dumb sorting, based on whether the above props are defined.
+Note, `sortIdx` and `changeSortProps` only apply to components that implement smart searching, such as `list-view`. This base component does internal prop checking to determine whether it uses smart or dumb sorting, based on whether the above props are defined.
 
 ## `list-view`
 
@@ -32,15 +38,12 @@ Wraps `sortable-table` and implements auto-update and smart sort. When a new sor
 - **list**: Parent data structure, ie `state.granules.list` or `state.collections.list`. Expected to contain `{ data, inflight, error, meta }` properties corresponding to all `list` state objects.
 - **dispatch**: Redux dispatch function.
 - **action**: Redux-style action to send, ie `listCollections`.
-- **tableHeader**: Corresponds to `sortableTable#header`.
-- **tableRow**: Corresponds to `sortableTable#row`.
-- **tableSortProps**: Corresponds to `sortableTable#props`.
 - **sortIdx**: Corresponds to `sortableTable#sortIdx`.
 - **query**: Array of configuration objects passed to `batch-async-command`.
 - **rowId** Corresponds to `sortableTable#rowId`.
 
 ## Dumb vs smart sort
 
-Dumb sorting uses `Array.sort()` within the component to re-order table data that has **already** been received from the API. Smart sorting initiates a new API request, passing the sort parameter to the server (elasticsearch) which returns a sorted response.
+Dumb sorting uses react-table's built in sort functionality to sort table data that has **already** been received from the API. Smart sorting initiates a new API request, passing the sort parameter to the server (elasticsearch) which returns a sorted response. The `maunalSortBy` option passed to `useTable()` tells react-table whether we are doing server-side sorting (`true`) or letting react-table sort (`false`).
 
 Dumb sorting is for smaller, simple tables that do not need pagination.

app/src/css/_base.scss

@@ -390,17 +390,33 @@ a:active {
 }
 
 .page__section {
-  margin-bottom: 3em;
   @extend .clearfix;
-  &:first-of-type {
-    margin-bottom: 0em; /* This is temporary until we had the datepicker component */
+  &:last-of-type {
+  margin-bottom: 3em; 
   }
 }
 
+.page_section__overview {
+  margin-top: 25px;
+}
+
 .page__section.datetime{
   margin-bottom: 8em;
 }
 
+.collection__options--top ul{
+  display: flex;
+  align-items: center;
+}
+
+.collection__options--top li:nth-child(2){
+  margin-left: auto;
+}
+
+.page__section__controls{
+  margin-bottom: 2em;
+}
+
 .page__section--small {
   margin-bottom: 2em;
 }

app/src/css/_buttons.scss

@@ -117,7 +117,7 @@
       background-color: $light-green;
       position: relative;
 
-      &:before{
+      &:before {
         color: $white;
         position: absolute;
         font-family: 'FontAwesome';
@@ -230,6 +230,14 @@
 
       } 
     }
+
+    &--remove, &--execute, &--reingest {
+      &:hover {
+        background-color: darken($light-green, 10%);
+        color: #fff;
+        border: 0;
+      }
+    }
 
     &--download{
       background-color: $light-green;

app/src/css/_typography.scss

@@ -79,3 +79,7 @@ h1, h2, h3, h4, h5, h6 {
   -webkit-font-smoothing: antialiased;
   transition: background-color 0.2s linear;
 }
+
+.breadcrumb, .caption {
+  font-size: 0.875em;
+}

app/src/css/main.scss

@@ -28,7 +28,6 @@
 @import '../js/components/DropDown/DropDown.scss';
 @import 'lists';
 @import '../css/modules/table';
-@import '../js/components/Chart/chart';
 @import '../js/components/LoadingIndicator/loading-indicator';
 @import "../js/components/Modal/modal";
 @import 'pulse';