UISAUTHCOM-1: Move reusable components from UIROLES

.eslintrc

@@ -6,7 +6,7 @@
       "files": ["src/**/tests/*", "*.test.js", "test/**/*"],
       "rules": {
         "react/prop-types": "off",
-        "func-names": "off",
+        "func-names": "off"
       }
     },
     {
@@ -20,5 +20,14 @@
   "env": {
     "jest": true
   },
-  "settings": {}
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [
+          ["__mock__", "./test/jest/__mock__"],
+          ["helpers", "./test/jest/helpers"]
+        ]
+      }
+    }
+  }
 }

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Change history for stripes-authorization-components
 
-## (1.0.0 IN PROGRESS)
+## 1.0.0 (IN PROGRESS)
 
 * [UISAUTHCOM-2](https://folio-org.atlassian.net/browse/UISAUTHCOM-2) Move component CapabilitiesSection from ui-authorization-roles.
 * [UISAUTHCOM-5](https://folio-org.atlassian.net/browse/UISAUTHCOM-5) Add formatter to highlight unique values in CapabilitySection.
+* [UISAUTHCOM-1](https://folio-org.atlassian.net/browse/UISAUTHCOM-1)Move reusable components from UIROLES to a shared repository.

lib/Capabilities/CapabilitiesAccordion/CapabilitiesAccordion.js

@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Accordion,
+  Button,
+  Loading,
+} from '@folio/stripes/components';
+import { Pluggable } from '@folio/stripes/core';
+
+import { CapabilitiesSection } from '../CapabilitiesSection';
+
+import css from '../style.css';
+
+export const CapabilitiesAccordion = ({
+  checkedAppIdsMap,
+  onSaveSelectedApplications,
+  isCapabilitySelected,
+  onChangeCapabilityCheckbox,
+  isCapabilityDisabled,
+  capabilities,
+  isLoading,
+}) => {
+  return (
+    <Accordion
+      label={(
+        <>
+          <FormattedMessage id="stripes-authorization-components.details.capabilities" />
+          {isLoading && <span className={css.loadingInTitle}> <Loading /></span>}
+        </>
+    )}
+      displayWhenOpen={
+        <Pluggable
+          type="select-application"
+          checkedAppIdsMap={checkedAppIdsMap}
+          onSave={onSaveSelectedApplications}
+          renderTrigger={props => (
+            <Button
+              {...props}
+              icon="plus-sign"
+              disabled={isLoading}
+            >
+              <FormattedMessage id="stripes-authorization-components.crud.selectApplication" />
+            </Button>
+          )}
+        />
+      }
+    >
+      <CapabilitiesSection
+        readOnly={false}
+        isCapabilitySelected={isCapabilitySelected}
+        onChangeCapabilityCheckbox={onChangeCapabilityCheckbox}
+        capabilities={capabilities}
+        isCapabilityDisabled={isCapabilityDisabled}
+      />
+      {!isLoading && (
+        <p id="asterisk-policy-desc">
+          <FormattedMessage id="stripes-authorization-components.details.nonSinglePolicyText" />
+        </p>
+      )}
+    </Accordion>
+  );
+};
+
+CapabilitiesAccordion.propTypes = {
+  checkedAppIdsMap: PropTypes.object,
+  onSaveSelectedApplications: PropTypes.func,
+  isCapabilitySelected: PropTypes.func,
+  onChangeCapabilityCheckbox: PropTypes.func,
+  capabilities: PropTypes.object,
+  isCapabilityDisabled: PropTypes.func,
+  setCapabilitiesRendered: PropTypes.func,
+  isLoading: PropTypes.bool,
+};

lib/Capabilities/CapabilitiesAccordion/index.js

@@ -0,0 +1 @@
+export { CapabilitiesAccordion } from './CapabilitiesAccordion';

lib/Capabilities/CapabilitiesDataType/CapabilitiesDataType.js

@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types';
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
+
+import {
+  Headline,
+  MultiColumnList,
+} from '@folio/stripes/components';
+
+import {
+  capabilitiesPropType,
+  columnWidths,
+  visibleColumns,
+} from '../constants';
+import { ItemActionCheckbox } from '../ItemActionCheckbox';
+import {
+  getColumnMapping,
+  getResultsFormatter,
+} from '../utils';
+
+export const CapabilitiesDataType = ({
+  content,
+  readOnly,
+  onChangeCapabilityCheckbox,
+  isCapabilitySelected,
+  isCapabilityDisabled,
+  capabilitiesToCompare = [],
+  isNeedToCompare = false,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const renderItemActionCheckbox = useCallback((item, action) => {
+    return (
+      <ItemActionCheckbox
+        action={action}
+        readOnly={readOnly}
+        isCapabilityDisabled={isCapabilityDisabled}
+        onChangeCapabilityCheckbox={onChangeCapabilityCheckbox}
+        item={item}
+        isCapabilitySelected={isCapabilitySelected}
+      />
+    );
+  }, [readOnly, isCapabilityDisabled, onChangeCapabilityCheckbox, isCapabilitySelected]);
+
+  const columnMapping = useMemo(() => {
+    return getColumnMapping(formatMessage);
+  }, [formatMessage]);
+
+  const resultsFormatter = useMemo(() => {
+    return getResultsFormatter({
+      renderItemActionCheckbox,
+      capabilitiesToCompare,
+      isNeedToCompare
+    });
+  }, [capabilitiesToCompare, isNeedToCompare, renderItemActionCheckbox]);
+
+  return (
+    <div data-testid="capabilities-data-type">
+      <Headline
+        size="large"
+        margin="none"
+        tag="h3"
+      >
+        <FormattedMessage id="stripes-authorization-components.details.data" />
+      </Headline>
+      <MultiColumnList
+        interactive={false}
+        columnMapping={columnMapping}
+        formatter={resultsFormatter}
+        contentData={content}
+        visibleColumns={visibleColumns}
+        columnWidths={columnWidths}
+      />
+    </div>
+  );
+};
+
+CapabilitiesDataType.propTypes = {
+  capabilitiesToCompare: capabilitiesPropType,
+  content: capabilitiesPropType,
+  isCapabilityDisabled: PropTypes.func,
+  isCapabilitySelected: PropTypes.func,
+  isNeedToCompare: PropTypes.bool,
+  onChangeCapabilityCheckbox: PropTypes.func,
+  readOnly: PropTypes.bool,
+};

lib/Capabilities/CapabilitiesDataType.test.js → lib/Capabilities/CapabilitiesDataType/CapabilitiesDataType.test.js

@@ -1,11 +1,7 @@
-import React from 'react';
-import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 import { render } from '@folio/jest-config-stripes/testing-library/react';
-import '@folio/jest-config-stripes/testing-library/jest-dom';
-
-import CapabilitiesDataType from './CapabilitiesDataType';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 
-import '../../test/__mock__';
+import { CapabilitiesDataType } from './CapabilitiesDataType';
 
 const dataTypeCapabilities = [
   {
@@ -22,7 +18,11 @@ const dataTypeCapabilities = [
 ];
 
 const renderComponent = (data, onChange) => render(
-  <CapabilitiesDataType content={data} isCapabilitySelected={jest.fn().mockReturnValue(true)} onChangeCapabilityCheckbox={onChange} />
+  <CapabilitiesDataType
+    content={data}
+    isCapabilitySelected={jest.fn().mockReturnValue(true)}
+    onChangeCapabilityCheckbox={onChange}
+  />,
 );
 
 describe('Data capabilities type', () => {
@@ -39,10 +39,10 @@ describe('Data capabilities type', () => {
 
   it('renders checkboxes', async () => {
     const mockChangeHandler = jest.fn();
-    const { getAllByRole, getByRole } = renderComponent(dataTypeCapabilities, mockChangeHandler);
+    const { getAllByRole } = renderComponent(dataTypeCapabilities, mockChangeHandler);
 
     expect(getAllByRole('checkbox')).toHaveLength(4);
-    expect(getByRole('checkbox', { name:/columns.view Foo Item/ })).toBeChecked();
+    expect(getAllByRole('checkbox')[0]).toBeChecked();
 
     await userEvent.click(getAllByRole('checkbox')[0]);
 

lib/Capabilities/CapabilitiesDataType/index.js

@@ -0,0 +1 @@
+export { CapabilitiesDataType } from './CapabilitiesDataType';