UIMARCAUTH-410 Open manage authority file settings in full screen view (

#398)
folio-org · May 31, 2024 · a3f31c0 · a3f31c0
1 parent d6b9ca6
commit a3f31c0
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 59 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - [UIMARCAUTH-408](https://issues.folio.org/browse/UIMARCAUTH-408) Import `useUserTenantPermissions` from `@folio/stripes/core`.
 - [UIMARCAUTH-396](https://issues.folio.org/browse/UIMARCAUTH-396) Add quickMARC shortcuts to modal.
 - [UIMARCAUTH-375](https://issues.folio.org/browse/UIMARCAUTH-375) Quick export from authority detail view.
+- [UIMARCAUTH-410](https://issues.folio.org/browse/UIMARCAUTH-410) Open manage authority file settings in full screen view.
 
 ## [5.0.1](https://github.com/folio-org/ui-marc-authorities/tree/v5.0.1) (2024-04-02)
 

diff --git a/src/settings/ManageAuthoritySourceFiles/ManageAuthoritySourceFiles.js b/src/settings/ManageAuthoritySourceFiles/ManageAuthoritySourceFiles.js
@@ -20,6 +20,9 @@ import {
   InfoPopover,
   Label,
   Loading,
+  Layer,
+  Paneset,
+  PaneCloseLink,
 } from '@folio/stripes/components';
 
 import { useManageAuthoritySourceFiles } from './useManageAuthoritySourceFiles';
@@ -139,14 +142,14 @@ const ManageAuthoritySourceFiles = () => {
   }), [intl, fieldLabels, getRequiredLabel]);
 
   const columnWidths = useMemo(() => ({
-    [authorityFilesColumns.NAME]: '300px',
-    [authorityFilesColumns.CODES]: '100px',
-    [authorityFilesColumns.START_NUMBER]: '150px',
-    [authorityFilesColumns.BASE_URL]: '100px',
+    [authorityFilesColumns.NAME]: '22%',
+    [authorityFilesColumns.CODES]: '10%',
+    [authorityFilesColumns.START_NUMBER]: '10%',
+    [authorityFilesColumns.BASE_URL]: '20%',
     [authorityFilesColumns.SELECTABLE]: '100px',
-    [authorityFilesColumns.SOURCE]: '100px',
-    [authorityFilesColumns.LAST_UPDATED]: '200px',
-    [authorityFilesColumns.ACTIONS]: '100px',
+    [authorityFilesColumns.SOURCE]: '7%',
+    [authorityFilesColumns.LAST_UPDATED]: '15%',
+    [authorityFilesColumns.ACTIONS]: { min: 200, max: 200 },
   }), []);
 
   const renderLastUpdated = useCallback(metadata => {
@@ -192,59 +195,63 @@ const ManageAuthoritySourceFiles = () => {
   const suppressEdit = () => !canEdit;
   const suppressDelete = ({ source }) => source === SOURCES.FOLIO || !canDelete;
 
-
-  if (isLoading) {
-    return <Loading />;
-  }
-
   return (
-    <TitleManager record={paneTitle}>
-      <Pane
-        defaultWidth="fill"
-        fluidContentWidth
-        paneTitle={paneTitle}
-        id="settings-authority-source-files-pane"
-      >
-        <EditableList
-          formType="final-form"
-          contentData={sourceFiles}
-          totalCount={sourceFiles.length}
-          createButtonLabel={intl.formatMessage({ id: 'stripes-core.button.new' })}
-          label={label}
-          itemTemplate={ITEM_TEMPLATE}
-          visibleFields={visibleFields}
-          hiddenFields={[authorityFilesColumns.NUMBER_OF_OBJECTS]}
-          columnMapping={columnMapping}
-          formatter={formatter}
-          readOnlyFields={readOnlyFields}
-          getReadOnlyFieldsForItem={getReadOnlyFieldsForItem}
-          actionSuppression={{
-            edit: suppressEdit,
-            delete: suppressDelete,
-          }}
-          onUpdate={updateFile}
-          onCreate={createFile}
-          onDelete={deleteFile}
-          onSubmit={noop}
-          isEmptyMessage={isEmptyMessage}
-          validate={validate}
-          fieldComponents={getFieldComponents(fieldLabels)}
-          columnWidths={columnWidths}
-          canCreate={canCreate}
-          withDeleteConfirmation
-          confirmationHeading={<FormattedMessage id="ui-marc-authorities.settings.manageAuthoritySourceFiles.confirmationModal.heading" />}
-          confirmationMessage={fileId => ((
-            <FormattedMessage
-              id="ui-marc-authorities.settings.manageAuthoritySourceFiles.confirmationModal.message"
-              values={{
-                name: sourceFiles.find(file => file.id === fileId)?.name,
-                br: <br />,
+    <Layer isOpen>
+      <Paneset isRoot>
+        <TitleManager record={paneTitle}>
+          <Pane
+            defaultWidth="100%"
+            paneTitle={paneTitle}
+            id="settings-authority-source-files-pane"
+            firstMenu={(
+              <PaneCloseLink
+                aria-label={intl.formatMessage({ id: 'ui-marc-authorities.goBack' })}
+                to="/settings/marc-authorities"
+              />
+            )}
+          >
+            <EditableList
+              formType="final-form"
+              contentData={sourceFiles}
+              totalCount={sourceFiles.length}
+              createButtonLabel={intl.formatMessage({ id: 'stripes-core.button.new' })}
+              label={label}
+              itemTemplate={ITEM_TEMPLATE}
+              visibleFields={visibleFields}
+              hiddenFields={[authorityFilesColumns.NUMBER_OF_OBJECTS]}
+              columnMapping={columnMapping}
+              formatter={formatter}
+              readOnlyFields={readOnlyFields}
+              getReadOnlyFieldsForItem={getReadOnlyFieldsForItem}
+              actionSuppression={{
+                edit: suppressEdit,
+                delete: suppressDelete,
               }}
+              onUpdate={updateFile}
+              onCreate={createFile}
+              onDelete={deleteFile}
+              onSubmit={noop}
+              isEmptyMessage={isEmptyMessage}
+              validate={validate}
+              fieldComponents={getFieldComponents(fieldLabels)}
+              columnWidths={columnWidths}
+              canCreate={canCreate}
+              withDeleteConfirmation
+              confirmationHeading={<FormattedMessage id="ui-marc-authorities.settings.manageAuthoritySourceFiles.confirmationModal.heading" />}
+              confirmationMessage={fileId => ((
+                <FormattedMessage
+                  id="ui-marc-authorities.settings.manageAuthoritySourceFiles.confirmationModal.message"
+                  values={{
+                    name: sourceFiles.find(file => file.id === fileId)?.name,
+                    br: <br />,
+                  }}
+                />
+              ))}
             />
-          ))}
-        />
-      </Pane>
-    </TitleManager>
+          </Pane>
+        </TitleManager>
+      </Paneset>
+    </Layer>
   );
 };
 

diff --git a/src/settings/ManageAuthoritySourceFiles/ManageAuthoritySourceFiles.test.js b/src/settings/ManageAuthoritySourceFiles/ManageAuthoritySourceFiles.test.js
@@ -5,14 +5,15 @@ import {
   fireEvent,
 } from '@folio/jest-config-stripes/testing-library/react';
 import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
-
+import { Paneset } from '@folio/stripes/components';
 import { useAuthoritySourceFiles } from '@folio/stripes-authority-components';
 import {
   checkIfUserInMemberTenant,
   useCallout,
   useUserTenantPermissions,
 } from '@folio/stripes/core';
 import { runAxeTest } from '@folio/stripes-testing';
+
 import Harness from '../../../test/jest/helpers/harness';
 
 import { ManageAuthoritySourceFiles } from './ManageAuthoritySourceFiles';
@@ -60,7 +61,11 @@ const updaters = [{
 
 const mockSendCallout = jest.fn();
 
-const renderManageAuthoritySourceFiles = () => render(<ManageAuthoritySourceFiles />, { wrapper: Harness });
+const renderManageAuthoritySourceFiles = () => render((
+  <Paneset>
+    <ManageAuthoritySourceFiles />
+  </Paneset>
+), { wrapper: Harness });
 
 describe('Given Settings', () => {
   beforeEach(() => {

diff --git a/translations/ui-marc-authorities/en.json b/translations/ui-marc-authorities/en.json
@@ -1,6 +1,8 @@
 {
   "meta.title": "MARC authority",
 
+  "goBack": "Go back",
+
   "documentTitle.search": "MARC authority - {query} - Search",
   "documentTitle.browse": "MARC authority - {query} - Browse",
   "documentTitle.record": "MARC authority - {headingRef}",