Feature/gu UI 3670 - use 24-hour time in datepicker (#25)

* bugfix: spatial constraints not ready

* 0.0.152

* bugfix: add debugging

* 0.0.153

* bugfix: more debugging

* 0.0.154

* remove debugging

* 0.0.155

* remove watch

* 0.0.156

* resolve issues

* 0.0.157

* Filter out non-configured giovanni variables

* 0.0.158

* handle groups in giovanni variable names

* 0.0.159

* drop help icons and update text

* 0.0.160

* feature: datepicker sidebar slots

* feature(badge): add info variant

* feature(dialog): borders

* 0.0.161

* include composed-offset-position

* 0.0.162

* feature(date-picker): switch to 24 hour time, clean up date handling and add tests

* feature(date-picker): preserve time

* 0.0.163

* fix warning about datepicker using inefficient updates

* 0.0.164

* feature(date-picker): attempt to fix additional day

* chore: formatting

* 0.0.165

* feature: add clear functionality

* 0.0.166

* handle loading and error states for collection

Author: joncarlson

docs/pages/components/date-picker.md

@@ -61,7 +61,7 @@ Use help text to display the desired date formatting, in case visitors choose to
 | `startLabel`    | `start-label`    | `string`        | -                                     | Custom label for the start date input (only used when `split-inputs` and `range` are true)    |
 | `endLabel`      | `end-label`      | `string`        | -                                     | Custom label for the end date input (only used when `split-inputs` and `range` are true)      |
 | `hideLabel`     | `hide-label`     | `boolean`       | `false`                               | Visually hide the label while keeping it accessible                                           |
-| `enableTime`    | `enable-time`    | `boolean`       | `false`                               | Enables time selection UI (12-hour with AM/PM)                                                |
+| `enableTime`    | `enable-time`    | `boolean`       | `false`                               | Enables time selection UI with 24-hour UTC format including hours, minutes, and seconds       |
 | `displayFormat` | `display-format` | `string`        | `YYYY-MM-DD` or `YYYY-MM-DD HH:mm:ss` | Display format for the input value                                                            |
 | `showPresets`   | `show-presets`   | `boolean`       | `false`                               | Shows a sidebar with preset ranges; shown if preset overlaps `min/max`. Hidden if none remain |
 | `presets`       | `presets`        | `PresetRange[]` | `[]` (auto-fill)                      | Custom preset ranges; when empty, a default set is provided                                   |
@@ -76,6 +76,7 @@ The component emits:
     -   Event `detail`: `{ startDate: string, endDate: string }`
         -   If `enable-time` is off, values are `YYYY-MM-DD`
         -   If `enable-time` is on, values are ISO strings (e.g., `2024-03-20T10:00:00.000Z`)
+        -   When using time with ranges, the end time defaults to 23:59:59 (end of day) while start time defaults to 00:00:00
 
 ## Examples
 
@@ -109,6 +110,13 @@ The component emits:
   start-date="2024-03-20T10:00:00Z"
   end-date="2024-03-25T15:30:00Z"
 ></terra-date-picker>
+
+<terra-date-picker
+  id="range-time-picker"
+  range
+  enable-time
+  split-inputs
+></terra-date-picker>
 ```
 
 ### Custom Display Format

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@nasa-terra/components",
   "description": "A collection of NASA Earthdata components",
-  "version": "0.0.162",
+  "version": "0.0.166",
   "homepage": "https://github.com/nasa/terra-ui-components",
   "author": "NASA GES DISC <https://disc.gsfc.nasa.gov>",
   "license": "MIT",
@@ -59,7 +59,7 @@
     "create-widget": "plop create-widget --plopfile scripts/plop/plopfile.js",
     "update-widget": "plop update-widget --plopfile scripts/plop/plopfile.js",
     "test": "web-test-runner --group default",
-    "test:component": "web-test-runner -- --watch --group",
+    "test:component": "web-test-runner -- --group",
     "test:watch": "web-test-runner --watch --group default",
     "spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress",
     "list-outdated-dependencies": "npm-check-updates --format repo --peer",

package.json

@@ -67,7 +67,7 @@ export async function create(nextTask, outputDir, boilerplatesDir, appName) {
             "import { setBasePath } from '@nasa-terra/components/dist/utilities/base-path.js'"
 
         // Create the setBasePath call with comments (with newline before it)
-        const setBasePathCall = `\n/**\n * Sets the base path to the Terra UI CDN\n *\n * If you'd rather host the assets locally, you should setup a build task to copy the assets locally and\n * set the base path to your local public folder\n * (see https://terra-ui.netlify.app/frameworks/react/#installation for more information)\n */\nsetBasePath('https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.162/cdn/')`
+        const setBasePathCall = `\n/**\n * Sets the base path to the Terra UI CDN\n *\n * If you'd rather host the assets locally, you should setup a build task to copy the assets locally and\n * set the base path to your local public folder\n * (see https://terra-ui.netlify.app/frameworks/react/#installation for more information)\n */\nsetBasePath('https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.166/cdn/')`
 
         // Reconstruct the file: CSS import at top, then existing content with setBasePath import and call inserted
         const newLines = [...lines]

packages/create-terra-ui-app/boilerplates/nextjs/framework.js

@@ -5,7 +5,7 @@ build-backend = "hatchling.build"
 [project]
 name = "terra_ui_components"
 dependencies = ["anywidget>=0.9"]
-version = "0.0.162"
+version = "0.0.166"
 readme = "README.md"
 description = "NASA Terra UI Components Library"
 requires-python = ">=3.8"

pyproject.toml

@@ -311,9 +311,7 @@ export default class TerraDataAccess extends TerraElement {
         this.startDate = detail.startDate || ''
         this.endDate = detail.endDate || ''
 
-        if (this.startDate && this.endDate) {
-            this.#gridApi?.purgeInfiniteCache()
-        }
+        this.#gridApi?.purgeInfiniteCache()
     }
 
     #getDateRangeButtonText(): string {

src/components/data-access/data-access.component.ts

@@ -71,17 +71,6 @@ export class DataAccessController {
                 ],
                 { signal }
             ) => {
-                console.log(
-                    'fetch granules',
-                    collectionEntryId,
-                    startRow,
-                    endRow,
-                    sortBy,
-                    sortDirection,
-                    search,
-                    cloudCover
-                )
-
                 if (!collectionEntryId) {
                     return undefined
                 }

src/components/data-access/data-access.controller.ts

@@ -316,6 +316,25 @@ export default class TerraDataSubsetter extends TerraElement {
         const title =
             this.collectionWithServices?.collection?.EntryTitle ?? 'Download Data'
 
+        if (!this.collectionWithServices) {
+            if (this.controller.fetchCollectionTask.status === TaskStatus.PENDING) {
+                return html`
+                    <div class="loading-collection">
+                        <terra-loader indeterminate variant="small"></terra-loader>
+                        <span>Loading</span>
+                    </div>
+                `
+            }
+
+            if (this.controller.fetchCollectionTask.status === TaskStatus.ERROR) {
+                return html`
+                    <terra-alert open variant="danger" appearance="white">
+                        Failed to find the requested collection.
+                    </terra-alert>
+                `
+            }
+        }
+
         const content = html`
             <div class="container">
                 ${!this.dialog

src/components/data-subsetter/data-subsetter.component.ts

@@ -21,6 +21,15 @@ export default css`
         background: white;
     }
 
+    .loading-collection {
+        display: flex;
+        align-items: center;
+    }
+
+    .loading-collection terra-loader {
+        margin-right: 8px;
+    }
+
     .header {
         display: flex;
         align-items: center;

src/components/data-subsetter/data-subsetter.styles.ts

@@ -21,7 +21,7 @@ export function getNotebook(host: TerraDataSubsetter) {
         {
             id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
             cell_type: 'code',
-            source: '%pip install -q "terra_ui_components==0.0.162" "anywidget==0.9.15"',
+            source: '%pip install -q "terra_ui_components==0.0.166" "anywidget==0.9.15"',
             metadata: {
                 trusted: true,
             },