UIFC-371: Clean viewCollections and findCollections

CHANGELOG.md

@@ -14,6 +14,7 @@
 * Remove deprecated pane properties ([UIFC-339](https://issues.folio.org/browse/UIFC-339))
 * Buttons should be disabled if lacking required permissions ([UIFC-322](https://issues.folio.org/browse/UIFC-322))
 * Use translation keys of stripes-components ([UIFC-348](https://folio-org.atlassian.net/browse/UIFC-348))
+* Check selectCollection function, clean ViewCollections and FindCollections ([UIFC-371](https://folio-org.atlassian.net/browse/UIFC-371))
 
 ## [6.0.0](https://github.com/folio-org/ui-finc-select/tree/v6.0.0) (2023-10-18)
 * Upgrade `react-dropzone` to v10 ([UIFC-329](https://issues.folio.org/browse/UIFC-329))

src/components/Filters/Collections/CollectionsForm.js

@@ -3,7 +3,6 @@ import { FormattedMessage } from 'react-intl';
 import { FieldArray } from 'react-final-form-arrays';
 
 import { Accordion } from '@folio/stripes/components';
-import { stripesShape } from '@folio/stripes-core';
 
 import FindCollections from './FindCollections/FindCollections';
 
@@ -14,8 +13,11 @@ const CollectionsForm = ({
   filterId,
   form,
   onToggle,
-  ...props
 }) => {
+  const getSelectedCollections = (records) => {
+    form?.mutators?.setCollection({}, records);
+  };
+
   return (
     <Accordion
       id={accordionId}
@@ -31,8 +33,7 @@ const CollectionsForm = ({
           filterId={filterId}
           isEditable
           name="collectionIds"
-          form={form}
-          {...props}
+          selectRecords={getSelectedCollections}
         />
       </div>
     </Accordion>
@@ -53,7 +54,6 @@ CollectionsForm.propTypes = {
     })
   }),
   onToggle: PropTypes.func,
-  stripes: stripesShape.isRequired,
 };
 
 export default CollectionsForm;

src/components/Filters/Collections/CollectionsView.js

@@ -1,27 +1,20 @@
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 
-import ViewCollections from './FindCollections/ViewCollections';
+import FindCollections from './FindCollections/FindCollections';
 
 const CollectionsView = ({
   collectionIds,
   filter,
-  ...props
 }) => {
   const filterId = get(filter, 'id', '-');
 
   return (
-    <>
-      <div>
-        <ViewCollections
-          collectionIds={collectionIds}
-          filterId={filterId}
-          isEditable={false}
-          name="collectionIds"
-          {...props}
-        />
-      </div>
-    </>
+    <FindCollections
+      collectionIds={collectionIds}
+      filterId={filterId}
+      isEditable={false}
+    />
   );
 };
 

src/components/Filters/Collections/FindCollections/FindCollections.js

@@ -1,71 +1,40 @@
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
-import { Col, Row } from '@folio/stripes/components';
 import { Pluggable } from '@folio/stripes/core';
 
 const FindCollections = ({
   collectionIds,
   filterId,
-  form,
   isEditable,
-  ...props
+  selectRecords,
 }) => {
-  const getSelectedCollections = (records) => {
-    form.mutators.setCollection({}, records);
-  };
+  const searchLabel = isEditable ? <FormattedMessage id="ui-finc-select.plugin.buttonLabel.collection.add" /> : <FormattedMessage id="ui-finc-select.plugin.buttonLabel.collection.view" />;
 
-  const disableRecordCreation = true;
-  const buttonProps = { 'marginBottom0': true };
-
-  const pluggable =
+  return (
     <Pluggable
       aria-haspopup="true"
-      buttonProps={buttonProps}
       collectionIds={collectionIds}
       dataKey="collection"
-      disableRecordCreation={disableRecordCreation}
+      // plugin needs filterId for assigned filter
       filterId={filterId}
       id="clickable-find-collection"
       isEditable={isEditable}
-      marginTop0
-      onCloseModal={(modalProps) => {
-        modalProps.parentMutator.query.update({
-          query: '',
-          filters: '',
-          sort: 'name',
-        });
-      }}
       searchButtonStyle="default"
-      searchLabel={<FormattedMessage id="ui-finc-select.plugin.buttonLabel.collection.add" />}
-      selectRecordsModal={getSelectedCollections}
+      searchLabel={searchLabel}
+      selectRecords={selectRecords}
       type="find-finc-metadata-collection"
-      visibleColumns={['label']}
-      {...props}
     >
       <div style={{ background: 'red' }}><FormattedMessage id="ui-finc-select.plugin.notFound" /></div>
-    </Pluggable>;
-
-  return (
-    <>
-      <Row>
-        <Col xs={6}>
-          { pluggable }
-        </Col>
-      </Row>
-    </>
+    </Pluggable>
   );
 };
 
 FindCollections.propTypes = {
   collectionIds: PropTypes.arrayOf(PropTypes.object),
   filterId: PropTypes.string,
-  form: PropTypes.shape({
-    mutators: PropTypes.shape({
-      setCollection: PropTypes.func,
-    }).isRequired,
-  }),
   isEditable: PropTypes.bool,
+  selectRecords: PropTypes.func,
 };
 
 export default FindCollections;

src/components/Filters/FilterFile/FilterFileForm.js

@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { FieldArray } from 'react-final-form-arrays';
 
 import { Accordion } from '@folio/stripes/components';
+import { useStripes } from '@folio/stripes/core';
 
 import DocumentsFieldArray from './UploadFile/DocumentsFieldArray';
 import fetchWithDefaultOptions from '../../DisplayUtils/fetchWithDefaultOptions';
@@ -11,10 +12,11 @@ const FilterFileForm = ({
   accordionId,
   expanded,
   onToggle,
-  stripes,
 }) => {
+  const { okapi } = useStripes();
+
   const handleUploadFile = (file) => {
-    return fetchWithDefaultOptions(stripes.okapi, '/finc-select/files', {
+    return fetchWithDefaultOptions(okapi, '/finc-select/files', {
       method: 'POST',
       headers: { 'Content-Type': 'application/octet-stream' },
       body: file,
@@ -42,13 +44,6 @@ FilterFileForm.propTypes = {
   accordionId: PropTypes.string.isRequired,
   expanded: PropTypes.bool,
   onToggle: PropTypes.func,
-  stripes: PropTypes.shape({
-    okapi: PropTypes.shape({
-      tenant: PropTypes.string.isRequired,
-      token: PropTypes.string.isRequired,
-      url: PropTypes.string,
-    }).isRequired,
-  }).isRequired,
 };
 
 export default FilterFileForm;

src/components/Filters/FilterView.js

@@ -110,61 +110,57 @@ const FilterView = ({
   const docs = get(record, 'filterFiles', []);
 
   return (
-    <>
-      <Pane
-        data-test-filter-pane-details
-        defaultWidth="40%"
-        id="pane-filterdetails"
-        renderHeader={renderDetailsPaneHeader}
-      >
-        <AccordionSet>
-          <ViewMetaData
-            metadata={get(record, 'metadata', {})}
-            stripes={stripes}
-          />
-          <FilterInfoView
+    <Pane
+      data-test-filter-pane-details
+      defaultWidth="40%"
+      id="pane-filterdetails"
+      renderHeader={renderDetailsPaneHeader}
+    >
+      <AccordionSet>
+        <ViewMetaData
+          metadata={get(record, 'metadata', {})}
+          stripes={stripes}
+        />
+        <FilterInfoView
+          filter={record}
+          id="filterInfo"
+          stripes={stripes}
+        />
+        <Row end="xs">
+          <Col xs>
+            <ExpandAllButton
+              accordionStatus={accordions}
+              onToggle={handleExpandAll}
+              setStatus={null}
+            />
+          </Col>
+        </Row>
+        <Accordion
+          id="fileAccordion"
+          label={<FormattedMessage id="ui-finc-select.filter.fileAccordion" />}
+          onToggle={handleAccordionToggle}
+          open={accordions.fileAccordion}
+        >
+          <FilterFileView
+            docs={docs}
             filter={record}
             id="filterInfo"
             stripes={stripes}
           />
-          <Row end="xs">
-            <Col xs>
-              <ExpandAllButton
-                accordionStatus={accordions}
-                onToggle={handleExpandAll}
-                setStatus={null}
-              />
-            </Col>
-          </Row>
-          <Accordion
-            id="fileAccordion"
-            label={<FormattedMessage id="ui-finc-select.filter.fileAccordion" />}
-            onToggle={handleAccordionToggle}
-            open={accordions.fileAccordion}
-          >
-            <FilterFileView
-              docs={docs}
-              filter={record}
-              id="filterInfo"
-              stripes={stripes}
-            />
-          </Accordion>
-          <Accordion
-            id="collectionAccordion"
-            label={<FormattedMessage id="ui-finc-select.filter.collectionAccordion" />}
-            onToggle={handleAccordionToggle}
-            open={accordions.collectionAccordion}
-          >
-            <CollectionsView
-              collectionIds={collectionIds}
-              filter={record}
-              id="collections"
-              stripes={stripes}
-            />
-          </Accordion>
-        </AccordionSet>
-      </Pane>
-    </>
+        </Accordion>
+        <Accordion
+          id="collectionAccordion"
+          label={<FormattedMessage id="ui-finc-select.filter.collectionAccordion" />}
+          onToggle={handleAccordionToggle}
+          open={accordions.collectionAccordion}
+        >
+          <CollectionsView
+            collectionIds={collectionIds}
+            filter={record}
+          />
+        </Accordion>
+      </AccordionSet>
+    </Pane>
   );
 };