46110 fix(datasets): fix redundant dataset store subscriptions, unauthorized loadAllDatasets calls, empty dataset tag rendering

Author: Maria-Lordwill

frontend/src/public/components/TemplateEdit/ExtraFields/ExtraField.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useCallback, useEffect, useMemo } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useCallback, useMemo } from 'react';
 import classnames from 'classnames';
 import { injectIntl} from 'react-intl';
 
@@ -18,13 +17,11 @@ import { ExtraFieldNumber } from './Number';
 import { EExtraFieldType } from '../../../types/template';
 import { ExtraFieldDropdown } from './utils/ExtraFieldDropdown';
 import { getInputNameBackground } from './utils/getInputNameBackground';
-import { getAllDatasetsList, getIsAllDatasetsLoading, getIsAllDatasetsLoaded } from '../../../redux/selectors/datasets';
-import { loadAllDatasets } from '../../../redux/datasets/slice';
 import { IExtraFieldProps } from './types';
 
 import styles from '../KickoffRedux/KickoffRedux.css';
 
-const DATASET_FIELD_TYPES = [EExtraFieldType.Checkbox, EExtraFieldType.Radio, EExtraFieldType.Creatable];
+import { DATASET_FIELD_TYPES } from './constants';
 
 function ExtraField(props: IExtraFieldProps) {
   const {
@@ -41,29 +38,13 @@ function ExtraField(props: IExtraFieldProps) {
     wrapperClassName,
     labelBackgroundColor,
     innerRef,
+    datasetOptions,
   } = props;
 
-  const dispatch = useDispatch();
-
   const isDatasetField = DATASET_FIELD_TYPES.includes(field.type);
 
-  const datasetsList = useSelector(getAllDatasetsList);
-  const isDatasetsLoading = useSelector(getIsAllDatasetsLoading);
-  const isDatasetsLoaded = useSelector(getIsAllDatasetsLoaded);
-
-  useEffect(() => {
-    if (isDatasetField && !isDatasetsLoaded && !isDatasetsLoading) {
-      dispatch(loadAllDatasets());
-    }
-  }, [isDatasetField, isDatasetsLoaded, isDatasetsLoading, dispatch]);
-
-  const datasetOptions = useMemo(
-    () => datasetsList.map((dataset) => ({ label: dataset.name, value: String(dataset.id) })),
-    [datasetsList],
-  );
-
   const datasetName = useMemo(
-    () => datasetOptions.find((option) => option.value === String(field.dataset))?.label,
+    () => datasetOptions?.find((option) => option.value === String(field.dataset))?.label,
     [datasetOptions, field.dataset],
   );
 

frontend/src/public/components/TemplateEdit/ExtraFields/constants.ts

@@ -0,0 +1,3 @@
+import { EExtraFieldType } from '../../../types/template';
+
+export const DATASET_FIELD_TYPES = [EExtraFieldType.Checkbox, EExtraFieldType.Radio, EExtraFieldType.Creatable];

frontend/src/public/components/TemplateEdit/ExtraFields/types.ts

@@ -8,7 +8,7 @@ export interface IWorkflowExtraFieldProps {
   field: IExtraField;
   intl: IntlShape;
   showDropdown?: boolean;
-  mode?: EExtraFieldMode;
+  mode: EExtraFieldMode;
   namePlaceholder?: string;
   descriptionPlaceholder?: string;
   labelBackgroundColor?: EInputNameBackgroundColor;
@@ -26,4 +26,5 @@ export interface IExtraFieldProps extends IWorkflowExtraFieldProps {
   wrapperClassName?: string;
   fieldsCount?: number;
   id?: number;
+  datasetOptions?: { label: string; value: string }[];
 }

frontend/src/public/components/TemplateEdit/ExtraFields/utils/OutputFieldContent/OutputFieldContent.tsx

@@ -44,7 +44,7 @@ export function OutputFieldContent({
     </button>
   );
 
-  const content = dataset ? (
+  const content = dataset && datasetName ? (
     <div className={styles['output-field-content__content']}>
       <div className={styles['output-field-content__info']}>
         <div className={styles['output-field-content__info-dataset']}>

frontend/src/public/components/TemplateEdit/ExtraFields/utils/useDatasetOptions.ts

@@ -0,0 +1,28 @@
+import { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { IExtraField } from '../../../../types/template';
+import { getAllDatasetsList, getIsAllDatasetsLoading, getIsAllDatasetsLoaded } from '../../../../redux/selectors/datasets';
+import { loadAllDatasets } from '../../../../redux/datasets/slice';
+import { DATASET_FIELD_TYPES } from '../constants';
+
+export function useDatasetOptions(fields: IExtraField[]) {
+  const dispatch = useDispatch();
+
+  const hasDatasetFields = fields.some((field) => DATASET_FIELD_TYPES.includes(field.type));
+
+  const datasetsList = useSelector(getAllDatasetsList);
+  const isDatasetsLoading = useSelector(getIsAllDatasetsLoading);
+  const isDatasetsLoaded = useSelector(getIsAllDatasetsLoaded);
+
+  useEffect(() => {
+    if (hasDatasetFields && !isDatasetsLoaded && !isDatasetsLoading) {
+      dispatch(loadAllDatasets());
+    }
+  }, [hasDatasetFields, isDatasetsLoaded, isDatasetsLoading, dispatch]);
+
+  return useMemo(
+    () => datasetsList.map((dataset) => ({ label: dataset.name, value: String(dataset.id) })),
+    [datasetsList],
+  );
+}

frontend/src/public/components/TemplateEdit/KickoffRedux/KickoffRedux.tsx

@@ -9,7 +9,7 @@ import { isKickoffCleared } from './utils/isKickoffCleared';
 import { KickoffMenu } from './KickoffMenu';
 import { IntlMessages } from '../../IntlMessages';
 import { EMoveDirections, EInputNameBackgroundColor } from '../../../types/workflow';
-import { EExtraFieldType, IKickoff, IExtraField, ITemplate, ETemplateParts } from '../../../types/template';
+import { EExtraFieldMode, EExtraFieldType, IKickoff, IExtraField, ITemplate, ETemplateParts } from '../../../types/template';
 import { isArrayWithItems } from '../../../utils/helpers';
 import { getNormalizeFieldsOrders, moveWorkflowField } from '../../../utils/workflows';
 import { ExtraFieldsMap } from '../ExtraFields/utils/ExtraFieldsMap';
@@ -25,6 +25,7 @@ import { useWorkflowNameVariables } from '../TaskForm/utils/getTaskVariables';
 import styles from './KickoffRedux.css';
 import { patchTemplate } from '../../../redux/actions';
 import { InputWithVariables } from '../InputWithVariables';
+import { useDatasetOptions } from '../ExtraFields/utils/useDatasetOptions';
 
 export interface IKickoffReduxProps {
   template: ITemplate;
@@ -44,6 +45,7 @@ export function KickoffRedux({
   const [isOpen, setIsOpen] = React.useState(false);
   const containerRef = React.useRef<HTMLDivElement | null>(null);
   const variables = useWorkflowNameVariables(kickoff);
+  const datasetOptions = useDatasetOptions(kickoff.fields);
 
   const editTemplate = (templateFields: Partial<ITemplate>) => {
     dispatch(patchTemplate({ changedFields: templateFields }));
@@ -157,6 +159,8 @@ export function KickoffRedux({
                 moveFieldUp={() => handleMoveField(index, EMoveDirections.Up)}
                 moveFieldDown={() => handleMoveField(index, EMoveDirections.Down)}
                 editField={handleEditField(field.apiName)}
+                mode={EExtraFieldMode.Kickoff}
+                datasetOptions={datasetOptions}
                 accountId={accountId}
               />
             ))}

frontend/src/public/components/TemplateEdit/OutputForm/OutputForm.tsx

@@ -5,7 +5,7 @@ import { injectIntl, IntlShape } from 'react-intl';
 import classNames from 'classnames';
 
 import { EMoveDirections, EInputNameBackgroundColor } from '../../../types/workflow';
-import { EExtraFieldType, IExtraField } from '../../../types/template';
+import { EExtraFieldMode, EExtraFieldType, IExtraField } from '../../../types/template';
 import { isArrayWithItems } from '../../../utils/helpers';
 import { getNormalizeFieldsOrders, moveWorkflowField } from '../../../utils/workflows';
 
@@ -17,6 +17,7 @@ import { getEmptyField } from '../KickoffRedux/utils/getEmptyField';
 
 import styles from './OutputForm.css';
 import stylesTaskForm from '../TaskForm/TaskForm.css';
+import { useDatasetOptions } from '../ExtraFields/utils/useDatasetOptions';
 
 export interface IOutputFormOwnProps {
   fields: IExtraField[];
@@ -37,6 +38,7 @@ export function OutputForm({ fields, onOutputChange, intl, isDisabled, show, acc
   }, [outputRef]);
 
   const sortedFields = [...fields].sort((a, b) => b.order - a.order);
+  const datasetOptions = useDatasetOptions(fields);
 
   const isFormEmpty = !isArrayWithItems(fields);
 
@@ -98,6 +100,8 @@ export function OutputForm({ fields, onOutputChange, intl, isDisabled, show, acc
               moveFieldUp={() => handleMoveField(index, EMoveDirections.Up)}
               moveFieldDown={() => handleMoveField(index, EMoveDirections.Down)}
               editField={handleEditField(field.apiName)}
+              mode={EExtraFieldMode.Kickoff}
+              datasetOptions={datasetOptions}
               isDisabled={isDisabled}
               innerRef={outputRef}
               accountId={accountId}