style and general fixes

folio-org · Dec 5, 2024 · 2dcb027 · 2dcb027
1 parent a329550
commit 2dcb027
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 31 deletions.
diff --git a/src/components/EditPreview/EditPreview.tsx b/src/components/EditPreview/EditPreview.tsx
@@ -1,28 +1,24 @@
-import { Button, ButtonType } from '@components/Button';
 import { PROFILE_BFIDS } from '@common/constants/bibframe.constants';
 import state from '@state';
 import classNames from 'classnames';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { FormattedMessage } from 'react-intl';
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
 import { useParams, useSearchParams } from 'react-router-dom';
-import { QueryParams, RESOURCE_CREATE_URLS, ROUTES } from '@common/constants/routes.constants';
+import { QueryParams, RESOURCE_CREATE_URLS } from '@common/constants/routes.constants';
 import { ResourceType } from '@common/constants/record.constants';
 import { InstancesList } from '@components/InstancesList';
 import { useRoutePathPattern } from '@common/hooks/useRoutePathPattern';
-import { useNavigateToEditPage } from '@common/hooks/useNavigateToEditPage';
 import { getRecordDependencies } from '@common/helpers/record.helper';
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import { TitledPreview } from '@components/Preview/TitledPreview';
 import './EditPreview.scss';
 
 export const EditPreview = memo(() => {
   const currentlyPreviewedEntityBfid = useRecoilValue(state.ui.currentlyPreviewedEntityBfid);
-  const isEdited = useRecoilValue(state.status.recordIsEdited);
   const record = useRecoilValue(state.inputs.record);
   const [previewContent, setPreviewContent] = useRecoilState(state.inputs.previewContent);
+  const resetPreviewContent = useResetRecoilState(state.inputs.previewContent);
   const isCreatePageOpen = useRoutePathPattern(RESOURCE_CREATE_URLS);
   const { resourceId } = useParams();
-  const { navigateToEditPage } = useNavigateToEditPage();
   const [queryParams] = useSearchParams();
   const isPositionedSecond =
     currentlyPreviewedEntityBfid.has(PROFILE_BFIDS.INSTANCE) && currentlyPreviewedEntityBfid.values.length <= 1;
@@ -32,26 +28,14 @@ export const EditPreview = memo(() => {
   const showPreview = (dependencies?.entries?.length === 1 && !isCreateWorkPageOpened) || previewContent.length;
   const selectedForPreview = previewContent?.[0];
 
+  useEffect(() => resetPreviewContent, [resourceId]);
+
   return (
     <div
       className={classNames('preview-container', {
         'positioned-second': isPositionedSecond,
       })}
     >
-      {currentlyPreviewedEntityBfid.has(PROFILE_BFIDS.INSTANCE) && !dependencies && (
-        <div className="preview-container-header">
-          <Button
-            data-testid="create-instance-button"
-            type={ButtonType.Highlighted}
-            onClick={() =>
-              navigateToEditPage(`${ROUTES.RESOURCE_CREATE.uri}?type=${ResourceType.instance}&ref=${resourceId ?? ''}`)
-            }
-            disabled={!record || isEdited || Boolean(queryParams.get(QueryParams.CloneOf))}
-          >
-            <FormattedMessage id="ld.addInstance" />
-          </Button>
-        </div>
-      )}
       {showPreview ? (
         <TitledPreview
           ownId={dependencies?.entries?.[0]?.id?.toString()}

diff --git a/src/components/InstancesList/InstancesList.scss b/src/components/InstancesList/InstancesList.scss
@@ -21,15 +21,18 @@
   table {
     th {
       background-color: transparent;
-      font-weight: normal;
     }
 
     tr {
       padding: 0.5rem 0
     }
-    // text-decoration: underline;
+
     .button-primary {
-      margin: 0.2rem 0;
+      margin: 0.4rem 0;
+    }
+
+    .button-link {
+      text-decoration: underline;
     }
 
     .edit-ctl {

diff --git a/src/components/InstancesList/InstancesList.tsx b/src/components/InstancesList/InstancesList.tsx
@@ -68,11 +68,7 @@ export const InstancesList: FC<IInstancesList> = ({ contents: { keys, entries }
         editCtl: {
           className: 'edit-ctl',
           children: (
-            <Button
-              type={ButtonType.Primary}
-              onClick={onClickEdit}
-              data-testid={`edit-button__${row.__meta.id}`}
-            >
+            <Button type={ButtonType.Primary} onClick={onClickEdit} data-testid={`edit-button__${row.__meta.id}`}>
               <FormattedMessage id="ld.edit" />
             </Button>
           ),
@@ -88,7 +84,7 @@ export const InstancesList: FC<IInstancesList> = ({ contents: { keys, entries }
         <h3>
           <FormattedMessage id="ld.instances" />
         </h3>
-        <Button type={ButtonType.Primary} onClick={onClickNewInstance} data-testid="new-instance">
+        <Button type={ButtonType.Primary} onClick={onClickNewInstance} disabled={!refId} data-testid="new-instance">
           <FormattedMessage id="ld.newInstance" />
         </Button>
       </div>

diff --git a/src/components/Preview/Preview.scss b/src/components/Preview/Preview.scss
@@ -106,6 +106,10 @@
       flex-direction: column;
       align-items: center;
 
+      h5 {
+        font-size: 0.95rem;
+      }
+
       span {
         color: rgba(0, 0, 0, 0.6)
       }