Skip to content

Add collection import panel with documentation (PP-3862)#208

Merged
jonathangreen merged 9 commits intomainfrom
feature/documentation-collection-import
Mar 30, 2026
Merged

Add collection import panel with documentation (PP-3862)#208
jonathangreen merged 9 commits intomainfrom
feature/documentation-collection-import

Conversation

@jonathangreen
Copy link
Copy Markdown
Member

@jonathangreen jonathangreen commented Mar 27, 2026

Description

Adds an import panel to CollectionImportButton for collections whose protocol supports import:

  • Dynamic button label and style: Button shows "Queue Full Re-import" when force is checked, making the heavier action visually distinct
  • Context-aware success messages: Regular imports note that new/updated items will appear; force re-imports note that all items will be re-processed and it may take longer
  • Compact description below the controls using the standard description class, with a "More details" toggle for full documentation

Motivation and Context

PP-3862 — Add description to collection Import function in Collection Manager.

Screenshot 2026-03-27 at 10 52 33 AM Screenshot 2026-03-27 at 10 52 40 AM Screenshot 2026-03-27 at 10 52 49 AM

How Has This Been Tested?

  • All 19 Jest tests pass (npm run test-jest-file tests/jest/components/CollectionImportButton.test.tsx)
  • ESLint and Prettier pass via pre-commit hooks

Checklist:

  • I have updated the documentation accordingly.
  • All new and existing tests passed.

@jonathangreen jonathangreen force-pushed the feature/documentation-collection-import branch from dc499cb to ec945ad Compare March 27, 2026 13:38
@jonathangreen jonathangreen requested a review from a team March 27, 2026 13:52
Copy link
Copy Markdown
Contributor

@tdilauro tdilauro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

appear in the catalog, or when you want to pick up recent changes
from the source.
</dd>
<dt>Force full re-import</dt>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very minor: This is the third time I've seen "Force full re-import" in the mainline code. Might be handy to DRY it out with variable containing the label text and interpolate that where needed. Could do similar with the default import labels.

const IMPORT_DEFAULT_LABEL_TEXT = "Queue Import";
const IMPORT_FORCED_FULL_LABEL_TEXT = "Force full re-import";
...
          // button text
          {IMPORT_FORCED_FULL_LABEL_TEXT}
...
      // description text
      <p className="description">
        Queue Import picks up new and changed items. Check{" "}
        <strong>{IMPORT_FORCED_FULL_LABEL_TEXT}</strong> to re-process everything.
      </p>
...
          // detail
          <dt>{IMPORT_FORCED_FULL_LABEL_TEXT}</dt>
...

Collapse detailed docs behind a "More details" toggle, show a compact
description summary below the controls using the standard description
class, change the button label/style to "Queue Full Re-import" with
btn-warning when force is checked, and provide context-aware success
messages for regular vs force imports.
…bles, and remove stale instruction

- Extract nested ternary for button label into getButtonLabel helper
- Replace hardcoded color values (#AAA, #777, #333, #555) with SCSS
  variables ($medium-dark-gray, $muted-gray, $dark-gray); add $muted-gray
  to colors.scss
- Update test to check for force class instead of btn-warning
- Remove stale "Check this box before clicking Queue Import" sentence
  since the dynamic button label makes it self-evident
Removes the showDetails state and custom button toggle in favor of
the native HTML <details>/<summary> element, which provides built-in
toggle behavior, keyboard accessibility, and proper semantics. Uses
key={collection?.id} to auto-reset to closed when switching collections.
@jonathangreen jonathangreen force-pushed the feature/documentation-collection-import branch from 399b88c to 029c31a Compare March 30, 2026 19:25
@jonathangreen jonathangreen merged commit 5c4d823 into main Mar 30, 2026
1 check passed
@jonathangreen jonathangreen deleted the feature/documentation-collection-import branch March 30, 2026 19:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants