@k-int/stripes-kint-components 1.7.0 → 2.1.0

package/src/lib/CustomProperties/Config/CustomPropertiesView.js

@@ -0,0 +1,150 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Col, KeyValue, NoValue, Row } from '@folio/stripes/components';
+
+import { REFDATA_CLASS_NAME } from '../../constants/customProperties';
+
+// A default option for CustProp view pane, with the ability to override labels for fields
+const CustomPropertiesView = ({
+  customProperty,
+  labelOverrides
+}) => {
+  return (
+    <>
+      <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.label ??
+              <FormattedMessage id="stripes-kint-components.customProperties.label" />
+            }
+            value={customProperty?.label}
+          />
+        </Col>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.name ??
+              <FormattedMessage id="stripes-kint-components.customProperties.name" />
+            }
+            value={customProperty?.name}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <KeyValue
+            label={
+              labelOverrides?.description ??
+              <FormattedMessage id="stripes-kint-components.customProperties.description" />
+            }
+            value={customProperty?.description}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.weight ??
+              <FormattedMessage id="stripes-kint-components.customProperties.weight" />
+            }
+            value={customProperty?.weight}
+          />
+        </Col>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.primary ??
+              <FormattedMessage
+                id="stripes-kint-components.customProperties.primary"
+              />
+            }
+            value={
+              <FormattedMessage
+                id={
+                  customProperty?.primary
+                    ? 'stripes-kint-components.yes'
+                    : 'stripes-kint-components.no'
+                }
+              />
+            }
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.defaultVisibility ??
+              <FormattedMessage id="stripes-kint-components.customProperties.defaultVisibility" />
+            }
+            value={
+              <FormattedMessage
+                id={
+                  customProperty?.defaultInternal
+                    ? 'stripes-kint-components.customProperties.internalTrue'
+                    : 'stripes-kint-components.customProperties.internalFalse'
+                }
+              />
+            }
+          />
+        </Col>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.ctx ??
+              <FormattedMessage id="stripes-kint-components.customProperties.ctx" />
+            }
+            value={customProperty?.ctx ?? <NoValue />}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={6}>
+          {customProperty?.type && (
+            <KeyValue
+              label={
+                labelOverrides?.type ??
+                <FormattedMessage id="stripes-kint-components.customProperties.type" />
+              }
+              value={<FormattedMessage id={`stripes-kint-components.customProperties.type.${customProperty?.type}`} />}
+            />
+          )}
+        </Col>
+        <Col xs={6}>
+          {customProperty?.type === REFDATA_CLASS_NAME && (
+            <KeyValue
+              label={
+                labelOverrides?.category ??
+                <FormattedMessage id="stripes-kint-components.customProperties.category" />
+              }
+              value={customProperty?.category?.desc ?? <NoValue />}
+            />
+          )}
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+CustomPropertiesView.propTypes = {
+  customProperty: PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    weight: PropTypes.number,
+    primary: PropTypes.bool,
+    defaultInternal: PropTypes.bool,
+    ctx: PropTypes.string,
+    type: PropTypes.string,
+    category: PropTypes.shape({
+      desc: PropTypes.string
+    })
+
+  }),
+  labelOverrides: PropTypes.object
+};
+
+export default CustomPropertiesView;

package/src/lib/CustomProperties/Config/CustomPropertyForm.js

@@ -0,0 +1,296 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Field, useFormState, useForm } from 'react-final-form';
+
+import {
+  Col,
+  InfoPopover,
+  MultiSelection,
+  Row,
+  Select,
+  TextArea,
+  TextField
+} from '@folio/stripes/components';
+import { requiredValidator } from '@folio/stripes-erm-components';
+
+const CustomPropertyForm = ({
+  contextFilterOptions,
+  helpPopovers,
+  labelOverrides,
+  refdata
+}) => {
+  const { values } = useFormState();
+  const { change } = useForm();
+  const intl = useIntl();
+
+  const booleanToString = booleanValue => booleanValue?.toString();
+  const stringToBoolean = stringValue => stringValue === 'true';
+
+  const [contextOptions, setContextOptions] = useState(contextFilterOptions?.filter(ctx => ctx.value !== '' && ctx?.value !== 'isNull'));
+
+  const addCtx = ({ _r, _e, filterText }) => {
+    const newOption = { value: filterText, label: filterText };
+    setContextOptions([newOption, ...contextOptions]);
+    change('ctx', [newOption]);
+  };
+
+  const renderAddCtx = ({ filterValue, exactMatch }) => {
+    if (!filterValue || exactMatch) {
+      return null;
+    } else {
+      return <FormattedMessage id="stripes-kint-components.customProperties.ctx.addContext" values={{ value: filterValue }} />;
+    }
+  };
+
+  return (
+    <>
+      <Row>
+        <Col xs={6}>
+          <Field
+            component={TextField}
+            label={labelOverrides?.label ??
+              <FormattedMessage id="stripes-kint-components.customProperties.label" />
+            }
+            name="label"
+            required
+            startControl={helpPopovers?.label ?
+              <InfoPopover
+                content={helpPopovers?.label}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={6}>
+          <Field
+            component={TextField}
+            label={labelOverrides?.name ??
+              <FormattedMessage id="stripes-kint-components.customProperties.name" />
+            }
+            name="name"
+            required
+            startControl={helpPopovers?.name ?
+              <InfoPopover
+                content={helpPopovers?.name}
+              /> : null
+            }
+            validate={v => {
+              if (v && v.length) {
+                return /^[a-z][a-z0-9]*$/i.test(v) ? (
+                  undefined
+                ) : (
+                  <FormattedMessage id="stripes-kint-components.errors.hasNonAlphaName" />
+                );
+              }
+
+              return requiredValidator(v);
+            }}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <Field
+            component={TextArea}
+            label={labelOverrides?.description ??
+              <FormattedMessage id="stripes-kint-components.customProperties.description" />
+            }
+            name="description"
+            required
+            startControl={helpPopovers?.description ?
+              <InfoPopover
+                content={helpPopovers?.description}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={3}>
+          <Field
+            component={TextField}
+            label={labelOverrides?.weight ??
+              <FormattedMessage id="stripes-kint-components.customProperties.weight" />
+            }
+            name="weight"
+            required
+            startControl={helpPopovers?.weight ?
+              <InfoPopover
+                content={helpPopovers?.weight}
+              /> : null
+            }
+            type="number"
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={3}>
+          <Field
+            component={Select}
+            dataOptions={[
+              {
+                label: intl.formatMessage({
+                  id: 'stripes-kint-components.yes',
+                }),
+                value: 'true',
+              },
+              {
+                label: intl.formatMessage({
+                  id: 'stripes-kint-components.no',
+                }),
+                value: 'false',
+              },
+            ]}
+            format={booleanToString}
+            label={labelOverrides?.primary ??
+              <FormattedMessage
+                id="stripes-kint-components.customProperties.primary"
+              />
+            }
+            name="primary"
+            parse={stringToBoolean}
+            required
+            startControl={helpPopovers?.primary ?
+              <InfoPopover
+                content={helpPopovers?.primary}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={3}>
+          <Field
+            component={Select}
+            dataOptions={[
+              {
+                label: intl.formatMessage({
+                  id:
+                    'stripes-kint-components.customProperties.internalTrue',
+                }),
+                value: 'true',
+              },
+              {
+                label: intl.formatMessage({
+                  id:
+                    'stripes-kint-components.customProperties.internalFalse',
+                }),
+                value: 'false',
+              },
+            ]}
+            format={booleanToString}
+            label={labelOverrides?.defaultVisibility ??
+              <FormattedMessage id="stripes-kint-components.customProperties.defaultVisibility" />
+            }
+            name="defaultInternal"
+            parse={stringToBoolean}
+            required
+            startControl={helpPopovers?.defaultVisibility ?
+              <InfoPopover
+                content={helpPopovers?.defaultVisibility}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={3}>
+          <Field
+            actions={[{ onSelect: addCtx, render: renderAddCtx }]}
+            component={MultiSelection}
+            dataOptions={contextOptions}
+            emptyMessage={intl.formatMessage({ id: 'stripes-kint-components.customProperties.noCtxFound' })}
+            label={labelOverrides?.ctx ??
+              <FormattedMessage id="stripes-kint-components.customProperties.ctx" />
+            }
+            name="ctx"
+            onChange={(selectedItems) => {
+              if (selectedItems.length) {
+                change('ctx', [selectedItems?.[selectedItems?.length - 1]]);
+              } else {
+                change('ctx', undefined);
+              }
+            }}
+            validate={value => (value?.length > 1 ? <FormattedMessage id="stripes-kint-components.customProperties.ctx.error.moreThanOne" /> : null)}
+          />
+        </Col>
+      </Row>
+      {/* Users can only configure the type of a custom property when creating it, not when editing it */}
+      {!values?.id && (
+        <Row>
+          <Col xs={6}>
+            <Field
+              component={Select}
+              dataOptions={[
+                { label: '', value: '' },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal',
+                  }),
+                  value: 'Decimal',
+                },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyInteger',
+                  }),
+                  value: 'Integer',
+                },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyText',
+                  }),
+                  value: 'Text',
+                },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata',
+                  }),
+                  value: 'Refdata',
+                },
+              ]
+              }
+              label={labelOverrides?.type ??
+                <FormattedMessage id="stripes-kint-components.customProperties.type" />
+              }
+              name="type"
+              required
+              startControl={helpPopovers?.type ?
+                <InfoPopover
+                  content={helpPopovers?.type}
+                /> : null
+              }
+              validate={requiredValidator}
+            />
+          </Col>
+          <Col xs={6}>
+            {values?.type === 'Refdata' && (
+              <Field
+                component={Select}
+                dataOptions={[{ label: '', value: '' }, ...refdata]}
+                label={labelOverrides?.category ??
+                  <FormattedMessage id="stripes-kint-components.customProperties.category" />
+                }
+                name="category"
+                required
+                startControl={helpPopovers?.category ?
+                  <InfoPopover
+                    content={helpPopovers?.category}
+                  /> : null
+                }
+                validate={requiredValidator}
+              />
+            )}
+          </Col>
+        </Row>
+      )}
+    </>
+  );
+};
+
+CustomPropertyForm.propTypes = {
+  contextFilterOptions: PropTypes.arrayOf(PropTypes.string),
+  helpPopovers: PropTypes.object,
+  labelOverrides: PropTypes.object,
+  refdata: PropTypes.arrayOf(PropTypes.object)
+};
+
+export default CustomPropertyForm;

package/src/lib/CustomProperties/Config/index.js

@@ -0,0 +1,4 @@
+export { default as CustomPropertiesLookup } from './CustomPropertiesLookup';
+export { default as CustomPropertiesView } from './CustomPropertiesLookup';
+export { default as CustomPropertiesSettings } from './CustomPropertiesSettings';
+export { default as CustomPropertyForm } from './CustomPropertyForm';

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -53,7 +53,6 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
   }
 
   // This is the function which will take a row in the table and assign the relevant actions to it
-  // TODO make these 'labels' into ARIA labels
   const actionAssigner = () => {
     const actionArray = [
       { name: 'edit', label: <FormattedMessage id="stripes-kint-components.editableRefdataList.edit" />, icon: 'edit' },

package/src/lib/FormModal/FormModal.js

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+
+import { Form } from 'react-final-form';
+import { FormattedMessage } from 'react-intl';
+import { Button, Modal, ModalFooter } from '@folio/stripes/components';
+
+const FormModal = ({ children, modalProps: { onClose, ...modalProps }, onSubmit, ...formProps }) => {
+  return (
+    <Form
+      onSubmit={onSubmit}
+      {...formProps}
+    >
+      {({ handleSubmit, form: { restart } }) => {
+        const handleClose = (e) => {
+          onClose(e);
+          restart();
+        };
+
+        const handleSubmitAndClear = () => {
+          handleSubmit();
+          restart();
+        };
+
+        const renderFooter = () => (
+          <ModalFooter>
+            <Button
+              buttonStyle="primary"
+              onClick={handleSubmitAndClear}
+            >
+              <FormattedMessage id="stripes-kint-components.save" />
+            </Button>
+            <Button
+              onClick={handleClose}
+            >
+              <FormattedMessage id="stripes-kint-components.cancel" />
+            </Button>
+          </ModalFooter>
+        );
+
+        return (
+          <form
+            onSubmit={handleSubmitAndClear}
+          >
+            <Modal
+              enforceFocus={false}
+              footer={renderFooter()}
+              onClose={handleClose}
+              {...modalProps}
+            >
+              {children}
+            </Modal>
+          </form>
+        );
+      }}
+    </Form>
+  );
+};
+
+FormModal.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.func,
+  ]),
+  modalProps: PropTypes.shape({
+    onClose: PropTypes.func
+  }),
+  onSubmit: PropTypes.func
+};
+
+export default FormModal;

package/src/lib/FormModal/index.js

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

package/src/lib/NoResultsMessage/NoResultsMessage.js

@@ -66,11 +66,11 @@ NoResultsMessage.propTypes = {
   icon: PropTypes.string,
   isLoading: PropTypes.bool,
   isError: PropTypes.bool,
-  label: PropTypes.oneOfType(
+  label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node,
     PropTypes.func
-  ),
+  ]),
   searchTerm: PropTypes.string.isRequired,
   toggleFilterPane: PropTypes.func.isRequired,
 };

package/src/lib/SASQRoute/SASQRoute.js

@@ -2,13 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  Route
+  Route,
+  Switch
 } from 'react-router-dom';
 
 import SASQLookupComponent from '../SASQLookupComponent';
 import SASQViewComponent from '../SASQViewComponent';
 
-const SASQRoute = ({ path, fetchParameters, ...props }) => {
+const SASQRoute = ({ children, path, fetchParameters, ...props }) => {
   // Grab the SASQ_MAP and tweak it
   const { SASQ_MAP = {} } = fetchParameters;
 
@@ -32,18 +33,21 @@ const SASQRoute = ({ path, fetchParameters, ...props }) => {
             path={path}
             {...props}
           >
-            <Route
-              path={`${path}/:id`}
-              render={innerProps => (
-                <SASQViewComponent
-                  {...innerProps}
-                  fetchParameters={fetchParameters}
-                  path={path}
-                  ViewComponent={props.ViewComponent}
-                  {...props}
-                />
-              )}
-            />
+            <Switch>
+              {children}
+              <Route
+                path={`${path}/:id`}
+                render={innerProps => (
+                  <SASQViewComponent
+                    {...innerProps}
+                    fetchParameters={fetchParameters}
+                    path={path}
+                    ViewComponent={props.ViewComponent}
+                    {...props}
+                  />
+                )}
+              />
+            </Switch>
           </SASQLookupComponent>
         );
       }}
@@ -52,6 +56,11 @@ const SASQRoute = ({ path, fetchParameters, ...props }) => {
 };
 
 SASQRoute.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.func
+  ]),
   fetchParameters: PropTypes.object,
   path: PropTypes.string,
   ViewComponent: PropTypes.oneOfType([

package/src/lib/SASQViewComponent/SASQViewComponent.js

@@ -23,7 +23,7 @@ const SASQViewComponent = ({
   const endpoint = fetchParameters?.itemEndpoint ?? fetchParameters?.endpoint;
 
   const ky = useOkapiKy();
-  const { data = {} } = useQuery(
+  const { data = {}, ...rest } = useQuery(
     [namespace, 'data', 'view', match?.params?.id],
     () => ky(`${endpoint}/${match?.params?.id}`).json(),
     {
@@ -34,6 +34,7 @@ const SASQViewComponent = ({
   return (
     <ViewComponent
       onClose={() => history.push(`${path}${location.search}`)}
+      queryProps={{ ...rest }}
       resource={data}
       {...props}
     />