CDC #13 - Adding modal.defaults and modal.props fields to UserDefined…

…FieldsEmbeddedList and UserDefinedFieldsList
performant-software · Sep 13, 2023 · 3355819 · 3355819
1 parent 50fbe74
commit 3355819
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 98 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+NODE_AUTH_TOKEN=abcd
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+18.17.1
diff --git a/packages/storybook/.env.example b/packages/storybook/.env.example
@@ -0,0 +1,5 @@
+A11Y_TAGS=wcag21aa
+BABEL_DISABLE_CACHE=1
+GOOGLE_MAPS_API_KEY=abcd
+TRANSLATE_URL=https://example.com/translation-server
+BABEL_SHOW_CONFIG_FOR=.storybook/preview.js
diff --git a/packages/storybook/src/user-defined-fields/UserDefinedFieldsEmbeddedList.stories.js b/packages/storybook/src/user-defined-fields/UserDefinedFieldsEmbeddedList.stories.js
@@ -1,15 +1,12 @@
 // @flow
 
 import React, { useCallback, useState } from 'react';
-import { withA11y } from '@storybook/addon-a11y';
-import { withKnobs } from '@storybook/addon-knobs';
 import _ from 'underscore';
 import UserDefinedFieldsEmbeddedList from '../../../user-defined-fields/src/components/UserDefinedFieldsEmbeddedList';
 import useDragDrop from '../../../shared/src/utils/DragDrop';
 
 export default {
-  title: 'Components/User Defined Fields/UserDefinedFieldsEmbeddedList',
-  decorators: [withA11y, withKnobs]
+  title: 'Components/User Defined Fields/UserDefinedFieldsEmbeddedList'
 };
 
 export const Default = useDragDrop(() => {
@@ -37,3 +34,37 @@ export const Default = useDragDrop(() => {
     />
   );
 });
+
+export const HiddenTableSelector = useDragDrop(() => {
+  const [items, setItems] = useState([]);
+
+  /**
+   * Removes the passed item from the list.
+   *
+   * @type {function(*): void}
+   */
+  const onDelete = useCallback((item) => setItems((prevItems) => _.filter(prevItems, (i) => i !== item)), []);
+
+  /**
+   * Adds the passed item to the list.
+   *
+   * @type {function(*): void}
+   */
+  const onSave = useCallback((item) => setItems((prevItems) => [...prevItems, item]), []);
+
+  return (
+    <UserDefinedFieldsEmbeddedList
+      items={items}
+      modal={{
+        defaults: {
+          table_name: 'people'
+        },
+        props: {
+          hideTable: true
+        }
+      }}
+      onDelete={onDelete}
+      onSave={onSave}
+    />
+  );
+});
diff --git a/packages/user-defined-fields/src/components/UserDefinedFieldModal.js b/packages/user-defined-fields/src/components/UserDefinedFieldModal.js
@@ -1,5 +1,6 @@
 // @flow
 
+import type { EditContainerProps } from '@performant-software/shared-components/types';
 import React, {
   useCallback,
   useEffect,
@@ -12,11 +13,15 @@ import i18n from '../i18n/i18n';
 import UserDefinedFieldOptions from './UserDefinedFieldOptions';
 import UserDefinedFieldsService from '../services/UserDefinedFields';
 
+type Props = EditContainerProps & {
+  hideTable?: boolean
+};
+
 const DataTypes = {
   select: 'Select'
 };
 
-const UserDefinedFieldModal: ComponentType<any> = (props) => {
+const UserDefinedFieldModal: ComponentType<any> = (props: Props) => {
   const [dataTypeOptions, setDataTypeOptions] = useState([]);
   const [tableOptions, setTableOptions] = useState([]);
 
@@ -33,9 +38,11 @@ const UserDefinedFieldModal: ComponentType<any> = (props) => {
    * Fetch the available tables and data types.
    */
   useEffect(() => {
-    UserDefinedFieldsService
-      .fetchTables()
-      .then(({ data }) => setTableOptions(transformOptions(data.tables)));
+    if (!props.hideTable) {
+      UserDefinedFieldsService
+        .fetchTables()
+        .then(({ data }) => setTableOptions(transformOptions(data.tables)));
+    }
 
     UserDefinedFieldsService
       .fetchDataTypes()
@@ -54,17 +61,19 @@ const UserDefinedFieldModal: ComponentType<any> = (props) => {
           : i18n.t('UserDefinedFieldModal.title.add')}
       />
       <Modal.Content>
-        <Form.Dropdown
-          clearable
-          error={props.isError('table_name')}
-          label={i18n.t('UserDefinedFieldModal.labels.table')}
-          onChange={props.onTextInputChange.bind(this, 'table_name')}
-          options={tableOptions}
-          required={props.isRequired('table_name')}
-          selection
-          selectOnBlur={false}
-          value={props.item.table_name || ''}
-        />
+        { !props.hideTable && (
+          <Form.Dropdown
+            clearable
+            error={props.isError('table_name')}
+            label={i18n.t('UserDefinedFieldModal.labels.table')}
+            onChange={props.onTextInputChange.bind(this, 'table_name')}
+            options={tableOptions}
+            required={props.isRequired('table_name')}
+            selection
+            selectOnBlur={false}
+            value={props.item.table_name || ''}
+          />
+        )}
         <Form.Input
           error={props.isError('column_name')}
           label={i18n.t('UserDefinedFieldModal.labels.name')}

diff --git a/packages/user-defined-fields/src/components/UserDefinedFieldsEmbeddedList.js b/packages/user-defined-fields/src/components/UserDefinedFieldsEmbeddedList.js
@@ -1,56 +1,68 @@
 // @flow
 
 import { BooleanIcon, EmbeddedList } from '@performant-software/semantic-components';
-import React from 'react';
+import React, { useMemo } from 'react';
 import i18n from '../i18n/i18n';
 import UserDefinedFieldModal from './UserDefinedFieldModal';
 import UserDefinedFields from '../utils/UserDefinedFields';
 
 type Props = {
+  defaults: any,
   items: Array<any>,
+  modal?: {
+    defaults: any,
+    props: any
+  },
   onDelete: (item: any) => Promise<any>,
   onSave: (item: any) => Promise<any>
 };
 
 const DEFAULT_ORDER = 0;
 
-const UserDefinedFieldsEmbeddedList = (props: Props) => (
-  <EmbeddedList
-    actions={[{
-      name: 'edit'
-    }, {
-      name: 'delete'
-    }]}
-    columns={[{
-      name: 'table_name',
-      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.table')
-    }, {
-      name: 'column_name',
-      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.name')
-    }, {
-      name: 'data_type',
-      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.dataType')
-    }, {
-      name: 'required',
-      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.required'),
-      render: (udf) => <BooleanIcon value={udf.required} />
-    }, {
-      name: 'order',
-      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.order')
-    }]}
-    items={props.items}
-    modal={{
-      component: UserDefinedFieldModal,
-      props: {
-        defaults: {
-          order: DEFAULT_ORDER
-        },
-        validate: UserDefinedFields.validateUserDefinedField.bind(this)
-      }
-    }}
-    onDelete={props.onDelete}
-    onSave={props.onSave}
-  />
-);
+const UserDefinedFieldsEmbeddedList = (props: Props) => {
+  const defaults = useMemo(() => props.modal?.defaults || {}, [props.modal]);
+  const modalProps = useMemo(() => props.modal?.props || {}, [props.modal]);
+
+  return (
+    <EmbeddedList
+      actions={[{
+        name: 'edit'
+      }, {
+        name: 'delete'
+      }]}
+      columns={[{
+        name: 'table_name',
+        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.table')
+      }, {
+        name: 'column_name',
+        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.name')
+      }, {
+        name: 'data_type',
+        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.dataType')
+      }, {
+        name: 'required',
+        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.required'),
+        render: (udf) => <BooleanIcon value={udf.required} />
+      }, {
+        name: 'order',
+        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.order')
+      }]}
+      items={props.items}
+      modal={{
+        component: UserDefinedFieldModal,
+        props: {
+          defaults: {
+            order: DEFAULT_ORDER,
+            ...defaults
+          },
+          ...modalProps,
+          validate: UserDefinedFields.validateUserDefinedField.bind(this)
+        }
+      }}
+      onDelete={props.onDelete}
+      onSave={props.onSave}
+    />
+  );
+};
 
 export default UserDefinedFieldsEmbeddedList;
diff --git a/packages/user-defined-fields/src/components/UserDefinedFieldsList.js b/packages/user-defined-fields/src/components/UserDefinedFieldsList.js
@@ -1,52 +1,66 @@
 // @flow
 
 import { BooleanIcon, ListTable } from '@performant-software/semantic-components';
-import React, { type ComponentType } from 'react';
+import React, { type ComponentType, useMemo } from 'react';
 import i18n from '../i18n/i18n';
 import UserDefinedFieldModal from './UserDefinedFieldModal';
 import UserDefinedFields from '../utils/UserDefinedFields';
 import UserDefinedFieldsService from '../services/UserDefinedFields';
 
+type Props = {
+  modal?: {
+    defaults: any,
+    props: any
+  }
+};
+
 const DEFAULT_ORDER = 0;
 
-const UserDefinedFieldsList: ComponentType<any> = () => (
-  <ListTable
-    actions={[{
-      name: 'edit'
-    }, {
-      name: 'delete'
-    }]}
-    columns={[{
-      name: 'table_name',
-      label: i18n.t('UserDefinedFieldsList.columns.table')
-    }, {
-      name: 'column_name',
-      label: i18n.t('UserDefinedFieldsList.columns.name')
-    }, {
-      name: 'data_type',
-      label: i18n.t('UserDefinedFieldsList.columns.dataType')
-    }, {
-      name: 'required',
-      label: i18n.t('UserDefinedFieldsList.columns.required'),
-      render: (udf) => <BooleanIcon value={udf.required} />
-    }, {
-      name: 'order',
-      label: i18n.t('UserDefinedFieldsList.columns.order')
-    }]}
-    collectionName='user_defined_fields'
-    modal={{
-      component: UserDefinedFieldModal,
-      props: {
-        defaults: {
-          order: DEFAULT_ORDER
-        },
-        validate: UserDefinedFields.validateUserDefinedField.bind(this)
-      }
-    }}
-    onLoad={(params) => UserDefinedFieldsService.fetchAll(params)}
-    onSave={(udf) => UserDefinedFieldsService.save(udf)}
-    onDelete={(udf) => UserDefinedFieldsService.delete(udf)}
-  />
-);
+const UserDefinedFieldsList: ComponentType<any> = (props: Props) => {
+  const defaults = useMemo(() => props.modal?.defaults || {}, [props.modal]);
+  const modalProps = useMemo(() => props.modal?.props || {}, [props.modal]);
+
+  return (
+    <ListTable
+      actions={[{
+        name: 'edit'
+      }, {
+        name: 'delete'
+      }]}
+      columns={[{
+        name: 'table_name',
+        label: i18n.t('UserDefinedFieldsList.columns.table')
+      }, {
+        name: 'column_name',
+        label: i18n.t('UserDefinedFieldsList.columns.name')
+      }, {
+        name: 'data_type',
+        label: i18n.t('UserDefinedFieldsList.columns.dataType')
+      }, {
+        name: 'required',
+        label: i18n.t('UserDefinedFieldsList.columns.required'),
+        render: (udf) => <BooleanIcon value={udf.required} />
+      }, {
+        name: 'order',
+        label: i18n.t('UserDefinedFieldsList.columns.order')
+      }]}
+      collectionName='user_defined_fields'
+      modal={{
+        component: UserDefinedFieldModal,
+        props: {
+          defaults: {
+            order: DEFAULT_ORDER,
+            ...defaults
+          },
+          ...modalProps,
+          validate: UserDefinedFields.validateUserDefinedField.bind(this)
+        }
+      }}
+      onLoad={(params) => UserDefinedFieldsService.fetchAll(params)}
+      onSave={(udf) => UserDefinedFieldsService.save(udf)}
+      onDelete={(udf) => UserDefinedFieldsService.delete(udf)}
+    />
+  );
+};
 
 export default UserDefinedFieldsList;