From 92e18a5b50d0b02e4f48e7dc610687654d7e2fd9 Mon Sep 17 00:00:00 2001 From: Jonathan Green Date: Fri, 27 Mar 2026 09:57:59 -0300 Subject: [PATCH 1/9] Add documentation for collection import --- src/components/CollectionImportButton.tsx | 21 +++++++++++++++++++ src/stylesheets/collection.scss | 18 ++++++++++++++++ .../CollectionImportButton.test.tsx | 14 ++++++++++++- 3 files changed, 52 insertions(+), 1 deletion(-) diff --git a/src/components/CollectionImportButton.tsx b/src/components/CollectionImportButton.tsx index 0b1e35a4a..b76abb28b 100644 --- a/src/components/CollectionImportButton.tsx +++ b/src/components/CollectionImportButton.tsx @@ -69,6 +69,27 @@ const CollectionImportButton: React.FC = ({ const panelContent = (
+
+
Queue Import
+
+ Schedules a background import job that checks for new or updated items + from the collection source and adds them to the catalog. Only items + that have changed since the last import are processed. Use this when + new titles have been added to a collection but do not yet appear in + the catalog, or when you want to pick up recent changes from the + source. +
+
Force full re-import
+
+ When checked, the import job re-processes every item in the + collection, regardless of whether it appears to have changed since the + last import. Use this to correct metadata that is out of date, or to + resolve issues caused by a previously incomplete import. A forced + re-import will take longer than a regular import because it + re-processes all items. Check this box before clicking Queue + Import. +
+
{feedback &&
{feedback}
}
+ {feedback &&
{feedback}
} +

+ Queue Import picks up new and changed items. Check{" "} + Force full re-import to re-process everything. +

+ + {showDetails && ( +
+
Queue Import
+
+ Schedules a background import job that checks for new or updated + items from the collection source and adds them to the catalog. Only + items that have changed since the last import are processed. Use + this when new titles have been added to a collection but do not yet + appear in the catalog, or when you want to pick up recent changes + from the source. +
+
Force full re-import
+
+ When checked, the import job re-processes every item in the + collection, regardless of whether it appears to have changed since + the last import. Use this to correct metadata that is out of date, + or to resolve issues caused by a previously incomplete import. A + forced re-import will take longer than a regular import because it + re-processes all items. Check this box before clicking + Queue Import. +
+
+ )}
); diff --git a/src/stylesheets/collection.scss b/src/stylesheets/collection.scss index 4b5df8f8a..d8e204d13 100644 --- a/src/stylesheets/collection.scss +++ b/src/stylesheets/collection.scss @@ -11,7 +11,23 @@ } .collection-import { + .collection-import-details-toggle { + background: none; + border: none; + padding: 0; + color: #777; + cursor: pointer; + font-size: 0.8rem; + margin-bottom: 1em; + + &:hover { + color: #333; + text-decoration: underline; + } + } + .collection-import-docs { + font-size: 0.8rem; margin-bottom: 1em; dt { diff --git a/tests/jest/components/CollectionImportButton.test.tsx b/tests/jest/components/CollectionImportButton.test.tsx index d358f8725..cdedaa78c 100644 --- a/tests/jest/components/CollectionImportButton.test.tsx +++ b/tests/jest/components/CollectionImportButton.test.tsx @@ -82,16 +82,56 @@ describe("CollectionImportButton", () => { expect(screen.getByLabelText("Force full re-import")).toBeInTheDocument(); }); - it("renders usage documentation for both import options", async () => { + it("shows compact summary by default; detailed docs are hidden", async () => { const user = userEvent.setup(); renderButton(); await expandPanel(user); + expect( + screen.getByText(/queue import picks up new and changed items/i) + ).toBeInTheDocument(); + expect( + screen.queryByText(/schedules a background import job/i) + ).not.toBeInTheDocument(); + expect( + screen.queryByText(/the import job re-processes every item/i) + ).not.toBeInTheDocument(); + }); + + it("clicking 'More details' reveals the detailed docs", async () => { + const user = userEvent.setup(); + renderButton(); + await expandPanel(user); + + const toggle = screen.getByRole("button", { name: "More details" }); + expect(toggle).toHaveAttribute("aria-expanded", "false"); + + await user.click(toggle); + expect( screen.getByText(/schedules a background import job/i) ).toBeInTheDocument(); expect( screen.getByText(/the import job re-processes every item/i) ).toBeInTheDocument(); + expect( + screen.getByRole("button", { name: "Less details" }) + ).toHaveAttribute("aria-expanded", "true"); + }); + + it("clicking 'Less details' hides the detailed docs again", async () => { + const user = userEvent.setup(); + renderButton(); + await expandPanel(user); + + await user.click(screen.getByRole("button", { name: "More details" })); + expect( + screen.getByText(/schedules a background import job/i) + ).toBeInTheDocument(); + + await user.click(screen.getByRole("button", { name: "Less details" })); + expect( + screen.queryByText(/schedules a background import job/i) + ).not.toBeInTheDocument(); }); it("checkbox toggles force state", async () => { @@ -106,6 +146,43 @@ describe("CollectionImportButton", () => { expect(checkbox).not.toBeChecked(); }); + it("button text changes to 'Queue Full Re-import' when force is checked", async () => { + const user = userEvent.setup(); + renderButton(); + await expandPanel(user); + + expect( + screen.getByRole("button", { name: "Queue Import" }) + ).toBeInTheDocument(); + + await user.click(screen.getByRole("checkbox")); + + expect( + screen.getByRole("button", { name: "Queue Full Re-import" }) + ).toBeInTheDocument(); + expect( + screen.queryByRole("button", { name: "Queue Import" }) + ).not.toBeInTheDocument(); + }); + + it("button uses btn-warning class when force is checked", async () => { + const user = userEvent.setup(); + renderButton(); + await expandPanel(user); + + const button = screen.getByRole("button", { name: "Queue Import" }); + expect(button).toHaveClass("btn-default"); + expect(button).not.toHaveClass("btn-warning"); + + await user.click(screen.getByRole("checkbox")); + + const forceButton = screen.getByRole("button", { + name: "Queue Full Re-import", + }); + expect(forceButton).toHaveClass("btn-warning"); + expect(forceButton).not.toHaveClass("btn-default"); + }); + it("button triggers import with correct args (force=false)", async () => { const user = userEvent.setup(); const { importCollection } = renderButton(); @@ -121,18 +198,39 @@ describe("CollectionImportButton", () => { await expandPanel(user); const checkbox = screen.getByRole("checkbox"); await user.click(checkbox); - const button = screen.getByRole("button", { name: "Queue Import" }); + const button = screen.getByRole("button", { + name: "Queue Full Re-import", + }); await user.click(button); expect(importCollection).toHaveBeenCalledWith(42, true); }); - it("shows success feedback with alert-success styling after import", async () => { + it("shows success feedback for regular import", async () => { const user = userEvent.setup(); renderButton(); await expandPanel(user); await user.click(screen.getByRole("button", { name: "Queue Import" })); await waitFor(() => { - const feedback = screen.getByText("Import task queued."); + const feedback = screen.getByText( + /import task queued\. new and updated items will appear/i + ); + expect(feedback).toBeInTheDocument(); + expect(feedback).toHaveClass("alert", "alert-success"); + }); + }); + + it("shows success feedback for force re-import", async () => { + const user = userEvent.setup(); + renderButton(); + await expandPanel(user); + await user.click(screen.getByRole("checkbox")); + await user.click( + screen.getByRole("button", { name: "Queue Full Re-import" }) + ); + await waitFor(() => { + const feedback = screen.getByText( + /full re-import task queued\. all items will be re-processed/i + ); expect(feedback).toBeInTheDocument(); expect(feedback).toHaveClass("alert", "alert-success"); }); @@ -162,9 +260,13 @@ describe("CollectionImportButton", () => { await user.click(checkbox); expect(checkbox).toBeChecked(); - await user.click(screen.getByRole("button", { name: "Queue Import" })); + await user.click( + screen.getByRole("button", { name: "Queue Full Re-import" }) + ); await waitFor(() => { - expect(screen.getByText("Import task queued.")).toBeInTheDocument(); + expect( + screen.getByText(/full re-import task queued/i) + ).toBeInTheDocument(); }); const nextCollection: CollectionData = { @@ -183,7 +285,9 @@ describe("CollectionImportButton", () => { await waitFor(() => { expect(screen.getByRole("checkbox")).not.toBeChecked(); - expect(screen.queryByText("Import task queued.")).not.toBeInTheDocument(); + expect( + screen.queryByText(/full re-import task queued/i) + ).not.toBeInTheDocument(); }); }); @@ -216,4 +320,31 @@ describe("CollectionImportButton", () => { ).toBeEnabled(); }); }); + + it("shows 'Queuing Full Re-import...' while importing with force", async () => { + const user = userEvent.setup(); + let resolveImport: () => void; + const pendingImport = new Promise((resolve) => { + resolveImport = resolve; + }); + const mockImport = jest.fn().mockReturnValue(pendingImport); + renderButton({ importCollection: mockImport }); + await expandPanel(user); + + await user.click(screen.getByRole("checkbox")); + await user.click( + screen.getByRole("button", { name: "Queue Full Re-import" }) + ); + + expect( + screen.getByRole("button", { name: "Queuing Full Re-import..." }) + ).toBeDisabled(); + + resolveImport(); + await waitFor(() => { + expect( + screen.getByRole("button", { name: "Queue Full Re-import" }) + ).toBeEnabled(); + }); + }); }); From d480b8a5c3e1116a31fae5bc880653050475f165 Mon Sep 17 00:00:00 2001 From: Jonathan Green Date: Fri, 27 Mar 2026 10:16:01 -0300 Subject: [PATCH 3/9] Fix force import button warning style --- src/components/CollectionImportButton.tsx | 4 +++- src/stylesheets/collection.scss | 13 +++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/CollectionImportButton.tsx b/src/components/CollectionImportButton.tsx index d1f2b33c8..6ef29e5e5 100644 --- a/src/components/CollectionImportButton.tsx +++ b/src/components/CollectionImportButton.tsx @@ -81,7 +81,9 @@ const CollectionImportButton: React.FC = ({ ? "Queuing..." : "Queue Import"; - const buttonClass = force ? "btn btn-warning" : "btn btn-default"; + const buttonClass = force + ? "btn btn-default collection-import-button force" + : "btn btn-default collection-import-button"; const panelContent = (
diff --git a/src/stylesheets/collection.scss b/src/stylesheets/collection.scss index d8e204d13..4074f91df 100644 --- a/src/stylesheets/collection.scss +++ b/src/stylesheets/collection.scss @@ -11,6 +11,19 @@ } .collection-import { + .collection-import-button.force { + background: darken($yellow, 8%); + border-color: darken($yellow, 20%); + color: $dark-gray; + + &:hover, + &:focus { + background: $yellow; + border-color: darken($yellow, 25%); + color: $dark-gray; + } + } + .collection-import-details-toggle { background: none; border: none; From 4da564154176fd68b403cb83cb9f95aca7b694f6 Mon Sep 17 00:00:00 2001 From: Jonathan Green Date: Fri, 27 Mar 2026 10:24:25 -0300 Subject: [PATCH 4/9] Extract button label helper, replace hardcoded colors with SCSS variables, 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 --- src/components/CollectionImportButton.tsx | 18 +++++++++--------- src/stylesheets/collection.scss | 8 ++++---- src/stylesheets/colors.scss | 1 + .../components/CollectionImportButton.test.tsx | 8 +++----- 4 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/components/CollectionImportButton.tsx b/src/components/CollectionImportButton.tsx index 6ef29e5e5..f37031900 100644 --- a/src/components/CollectionImportButton.tsx +++ b/src/components/CollectionImportButton.tsx @@ -73,13 +73,7 @@ const CollectionImportButton: React.FC = ({ const feedbackClass = success ? "alert alert-success" : "alert alert-danger"; - const buttonLabel = force - ? importing - ? "Queuing Full Re-import..." - : "Queue Full Re-import" - : importing - ? "Queuing..." - : "Queue Import"; + const buttonLabel = getButtonLabel(force, importing); const buttonClass = force ? "btn btn-default collection-import-button force" @@ -136,8 +130,7 @@ const CollectionImportButton: React.FC = ({ the last import. Use this to correct metadata that is out of date, or to resolve issues caused by a previously incomplete import. A forced re-import will take longer than a regular import because it - re-processes all items. Check this box before clicking - Queue Import. + re-processes all items. )} @@ -149,4 +142,11 @@ const CollectionImportButton: React.FC = ({ ); }; +function getButtonLabel(force: boolean, importing: boolean): string { + if (force) { + return importing ? "Queuing Full Re-import..." : "Queue Full Re-import"; + } + return importing ? "Queuing..." : "Queue Import"; +} + export default CollectionImportButton; diff --git a/src/stylesheets/collection.scss b/src/stylesheets/collection.scss index 4074f91df..b3f9b2b8b 100644 --- a/src/stylesheets/collection.scss +++ b/src/stylesheets/collection.scss @@ -5,7 +5,7 @@ } i { - color: #AAA; + color: $medium-dark-gray; cursor: pointer; } } @@ -28,13 +28,13 @@ background: none; border: none; padding: 0; - color: #777; + color: $muted-gray; cursor: pointer; font-size: 0.8rem; margin-bottom: 1em; &:hover { - color: #333; + color: $dark-gray; text-decoration: underline; } } @@ -54,7 +54,7 @@ dd { margin-left: 0; - color: #555; + color: $muted-gray; } } diff --git a/src/stylesheets/colors.scss b/src/stylesheets/colors.scss index 80913e047..591a1c4a2 100644 --- a/src/stylesheets/colors.scss +++ b/src/stylesheets/colors.scss @@ -10,6 +10,7 @@ $red-tint: tint($red, 30%); $light-gray: #D7D4D0; $medium-gray: #DDD; $medium-dark-gray: #AAA; +$muted-gray: #777; $dark-gray: #080807; $gray-tint: #F5F5F4; $gray-border: #CCCCCC; diff --git a/tests/jest/components/CollectionImportButton.test.tsx b/tests/jest/components/CollectionImportButton.test.tsx index cdedaa78c..7b0a61b49 100644 --- a/tests/jest/components/CollectionImportButton.test.tsx +++ b/tests/jest/components/CollectionImportButton.test.tsx @@ -165,22 +165,20 @@ describe("CollectionImportButton", () => { ).not.toBeInTheDocument(); }); - it("button uses btn-warning class when force is checked", async () => { + it("button uses force class when force is checked", async () => { const user = userEvent.setup(); renderButton(); await expandPanel(user); const button = screen.getByRole("button", { name: "Queue Import" }); - expect(button).toHaveClass("btn-default"); - expect(button).not.toHaveClass("btn-warning"); + expect(button).not.toHaveClass("force"); await user.click(screen.getByRole("checkbox")); const forceButton = screen.getByRole("button", { name: "Queue Full Re-import", }); - expect(forceButton).toHaveClass("btn-warning"); - expect(forceButton).not.toHaveClass("btn-default"); + expect(forceButton).toHaveClass("force"); }); it("button triggers import with correct args (force=false)", async () => { From bb71c70ebf5434769247646756c841096e6c1ddf Mon Sep 17 00:00:00 2001 From: Jonathan Green Date: Fri, 27 Mar 2026 10:28:51 -0300 Subject: [PATCH 5/9] Add focus-visible style to details toggle for keyboard accessibility --- src/stylesheets/collection.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/stylesheets/collection.scss b/src/stylesheets/collection.scss index b3f9b2b8b..8df874bce 100644 --- a/src/stylesheets/collection.scss +++ b/src/stylesheets/collection.scss @@ -33,7 +33,8 @@ font-size: 0.8rem; margin-bottom: 1em; - &:hover { + &:hover, + &:focus-visible { color: $dark-gray; text-decoration: underline; } From 92283a38f558c8a8b6c29cb632facf01728e565c Mon Sep 17 00:00:00 2001 From: Jonathan Green Date: Fri, 27 Mar 2026 10:36:26 -0300 Subject: [PATCH 6/9] Udpated --- src/stylesheets/collection.scss | 6 +++--- src/stylesheets/colors.scss | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/stylesheets/collection.scss b/src/stylesheets/collection.scss index 8df874bce..3b60f30ac 100644 --- a/src/stylesheets/collection.scss +++ b/src/stylesheets/collection.scss @@ -28,14 +28,14 @@ background: none; border: none; padding: 0; - color: $muted-gray; + color: $dark-gray; cursor: pointer; font-size: 0.8rem; margin-bottom: 1em; &:hover, &:focus-visible { - color: $dark-gray; + color: $blue-dark; text-decoration: underline; } } @@ -55,7 +55,7 @@ dd { margin-left: 0; - color: $muted-gray; + color: $dark-gray; } } diff --git a/src/stylesheets/colors.scss b/src/stylesheets/colors.scss index 591a1c4a2..80913e047 100644 --- a/src/stylesheets/colors.scss +++ b/src/stylesheets/colors.scss @@ -10,7 +10,6 @@ $red-tint: tint($red, 30%); $light-gray: #D7D4D0; $medium-gray: #DDD; $medium-dark-gray: #AAA; -$muted-gray: #777; $dark-gray: #080807; $gray-tint: #F5F5F4; $gray-border: #CCCCCC; From 846a78ab6c0ef9ac8d26c000dbd40da1b8162535 Mon Sep 17 00:00:00 2001 From: Jonathan Green Date: Fri, 27 Mar 2026 10:44:07 -0300 Subject: [PATCH 7/9] Replace custom details toggle with native
/ Removes the showDetails state and custom button toggle in favor of the native HTML
/ element, which provides built-in toggle behavior, keyboard accessibility, and proper semantics. Uses key={collection?.id} to auto-reset to closed when switching collections. --- src/components/CollectionImportButton.tsx | 16 ++------- src/stylesheets/collection.scss | 26 ++++++++------ .../CollectionImportButton.test.tsx | 35 +++++++++---------- 3 files changed, 35 insertions(+), 42 deletions(-) diff --git a/src/components/CollectionImportButton.tsx b/src/components/CollectionImportButton.tsx index f37031900..e31cdefe5 100644 --- a/src/components/CollectionImportButton.tsx +++ b/src/components/CollectionImportButton.tsx @@ -26,14 +26,11 @@ const CollectionImportButton: React.FC = ({ const [importing, setImporting] = React.useState(false); const [feedback, setFeedback] = React.useState(null); const [success, setSuccess] = React.useState(false); - const [showDetails, setShowDetails] = React.useState(false); - React.useEffect(() => { setForce(false); setImporting(false); setFeedback(null); setSuccess(false); - setShowDetails(false); }, [collection?.id]); const supportsImport = (): boolean => { @@ -104,15 +101,8 @@ const CollectionImportButton: React.FC = ({ Queue Import picks up new and changed items. Check{" "} Force full re-import to re-process everything.

- - {showDetails && ( +
+ More details
Queue Import
@@ -133,7 +123,7 @@ const CollectionImportButton: React.FC = ({ re-processes all items.
- )} +
); diff --git a/src/stylesheets/collection.scss b/src/stylesheets/collection.scss index 3b60f30ac..44ff65ce0 100644 --- a/src/stylesheets/collection.scss +++ b/src/stylesheets/collection.scss @@ -24,19 +24,25 @@ } } - .collection-import-details-toggle { - background: none; - border: none; - padding: 0; - color: $dark-gray; - cursor: pointer; - font-size: 0.8rem; + details.collection-import-details { margin-bottom: 1em; - &:hover, - &:focus-visible { - color: $blue-dark; + summary { + list-style: none; + color: $dark-gray; + cursor: pointer; + font-size: 0.8rem; text-decoration: underline; + + &::-webkit-details-marker { + display: none; + } + + &:hover, + &:focus-visible { + color: $blue-dark; + text-decoration: underline; + } } } diff --git a/tests/jest/components/CollectionImportButton.test.tsx b/tests/jest/components/CollectionImportButton.test.tsx index 7b0a61b49..3321c6081 100644 --- a/tests/jest/components/CollectionImportButton.test.tsx +++ b/tests/jest/components/CollectionImportButton.test.tsx @@ -90,11 +90,11 @@ describe("CollectionImportButton", () => { screen.getByText(/queue import picks up new and changed items/i) ).toBeInTheDocument(); expect( - screen.queryByText(/schedules a background import job/i) - ).not.toBeInTheDocument(); + screen.getByText(/schedules a background import job/i) + ).not.toBeVisible(); expect( - screen.queryByText(/the import job re-processes every item/i) - ).not.toBeInTheDocument(); + screen.getByText(/the import job re-processes every item/i) + ).not.toBeVisible(); }); it("clicking 'More details' reveals the detailed docs", async () => { @@ -102,36 +102,33 @@ describe("CollectionImportButton", () => { renderButton(); await expandPanel(user); - const toggle = screen.getByRole("button", { name: "More details" }); - expect(toggle).toHaveAttribute("aria-expanded", "false"); + const details = screen.getByText("More details").closest("details"); + expect(details).not.toHaveAttribute("open"); - await user.click(toggle); + await user.click(screen.getByText("More details")); + expect(details).toHaveAttribute("open"); expect( screen.getByText(/schedules a background import job/i) - ).toBeInTheDocument(); + ).toBeVisible(); expect( screen.getByText(/the import job re-processes every item/i) - ).toBeInTheDocument(); - expect( - screen.getByRole("button", { name: "Less details" }) - ).toHaveAttribute("aria-expanded", "true"); + ).toBeVisible(); }); - it("clicking 'Less details' hides the detailed docs again", async () => { + it("clicking 'More details' again hides the detailed docs", async () => { const user = userEvent.setup(); renderButton(); await expandPanel(user); - await user.click(screen.getByRole("button", { name: "More details" })); + await user.click(screen.getByText("More details")); expect( screen.getByText(/schedules a background import job/i) - ).toBeInTheDocument(); + ).toBeVisible(); - await user.click(screen.getByRole("button", { name: "Less details" })); - expect( - screen.queryByText(/schedules a background import job/i) - ).not.toBeInTheDocument(); + await user.click(screen.getByText("More details")); + const details = screen.getByText("More details").closest("details"); + expect(details).not.toHaveAttribute("open"); }); it("checkbox toggles force state", async () => { From 87439589fd31afd1e579d9a8331eb820ace99222 Mon Sep 17 00:00:00 2001 From: Jonathan Green Date: Fri, 27 Mar 2026 10:50:53 -0300 Subject: [PATCH 8/9] Restore blank line after state declarations and use focus-visible on force button --- src/components/CollectionImportButton.tsx | 1 + src/stylesheets/collection.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/CollectionImportButton.tsx b/src/components/CollectionImportButton.tsx index e31cdefe5..b4172282c 100644 --- a/src/components/CollectionImportButton.tsx +++ b/src/components/CollectionImportButton.tsx @@ -26,6 +26,7 @@ const CollectionImportButton: React.FC = ({ const [importing, setImporting] = React.useState(false); const [feedback, setFeedback] = React.useState(null); const [success, setSuccess] = React.useState(false); + React.useEffect(() => { setForce(false); setImporting(false); diff --git a/src/stylesheets/collection.scss b/src/stylesheets/collection.scss index 44ff65ce0..5199adae1 100644 --- a/src/stylesheets/collection.scss +++ b/src/stylesheets/collection.scss @@ -17,7 +17,7 @@ color: $dark-gray; &:hover, - &:focus { + &:focus-visible { background: $yellow; border-color: darken($yellow, 25%); color: $dark-gray; From 029c31a1efc138af0cecea0ba0218a0a9906d5a7 Mon Sep 17 00:00:00 2001 From: Jonathan Green Date: Mon, 30 Mar 2026 16:25:19 -0300 Subject: [PATCH 9/9] Code review feedback --- src/components/CollectionImportButton.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/CollectionImportButton.tsx b/src/components/CollectionImportButton.tsx index b4172282c..063124d72 100644 --- a/src/components/CollectionImportButton.tsx +++ b/src/components/CollectionImportButton.tsx @@ -2,6 +2,9 @@ import * as React from "react"; import { Panel } from "library-simplified-reusable-components"; import { CollectionData, ProtocolData } from "../interfaces"; +const IMPORT_DEFAULT_LABEL_TEXT = "Queue Import"; +const IMPORT_FORCED_FULL_LABEL_TEXT = "Force full re-import"; + export interface CollectionImportButtonProps { collection: CollectionData; protocols: ProtocolData[]; @@ -94,18 +97,19 @@ const CollectionImportButton: React.FC = ({ onChange={(e) => setForce(e.target.checked)} disabled={disabled || importing} />{" "} - Force full re-import + {IMPORT_FORCED_FULL_LABEL_TEXT} {feedback &&
{feedback}
}

- Queue Import picks up new and changed items. Check{" "} - Force full re-import to re-process everything. + {IMPORT_DEFAULT_LABEL_TEXT} picks up new and changed items. Check{" "} + {IMPORT_FORCED_FULL_LABEL_TEXT} to re-process + everything.

More details
-
Queue Import
+
{IMPORT_DEFAULT_LABEL_TEXT}
Schedules a background import job that checks for new or updated items from the collection source and adds them to the catalog. Only @@ -114,7 +118,7 @@ const CollectionImportButton: React.FC = ({ appear in the catalog, or when you want to pick up recent changes from the source.
-
Force full re-import
+
{IMPORT_FORCED_FULL_LABEL_TEXT}
When checked, the import job re-processes every item in the collection, regardless of whether it appears to have changed since