59876 refactor(template): migrate template edit form to Formik

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { IntlShape } from 'react-intl';
-import { useDispatch } from 'react-redux';
 
 import { getEmptyField } from './utils/getEmptyField';
 import { KickoffShareForm } from './KickoffShareForm';
@@ -9,48 +8,39 @@ import { isKickoffCleared } from './utils/isKickoffCleared';
 import { KickoffMenu } from './KickoffMenu';
 import { IntlMessages } from '../../IntlMessages';
 import { EMoveDirections, EInputNameBackgroundColor } from '../../../types/workflow';
-import { EExtraFieldMode, EExtraFieldType, IKickoff, IExtraField, ITemplate, ETemplateParts } from '../../../types/template';
+import { EExtraFieldMode, EExtraFieldType, IKickoff, IExtraField, ETemplateParts } from '../../../types/template';
 import { isArrayWithItems } from '../../../utils/helpers';
 import { getNormalizeFieldsOrders, moveWorkflowField } from '../../../utils/workflows';
 import { ExtraFieldsMap } from '../ExtraFields/utils/ExtraFieldsMap';
 import { ExtraFieldIcon } from '../ExtraFields/utils/ExtraFieldIcon';
 import { ExtraFieldIntl } from '../ExtraFields';
 import { getEditedFields } from '../ExtraFields/utils/getEditedFields';
-import { ETemplateStatus } from '../../../types/redux';
 import { ExtraFieldsLabels } from '../ExtraFields/utils/ExtraFieldsLabels';
 import { getEmptyKickoff } from '../../../utils/template';
 import { useHashLink } from '../../../hooks/useHashLink';
 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';
+import { useTemplateField } from '../useTemplateForm';
 
 export interface IKickoffReduxProps {
-  template: ITemplate;
   intl: IntlShape;
   accountId: number;
-  templateStatus: ETemplateStatus;
-  setKickoff(value: IKickoff): void;
 }
 
 export function KickoffRedux({
-  template: { kickoff, wfNameTemplate },
   intl: { formatMessage },
-  setKickoff,
   accountId,
 }: IKickoffReduxProps) {
-  const dispatch = useDispatch();
+  const { values, setFieldValue } = useTemplateField();
+  const { kickoff, wfNameTemplate } = values;
   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 }));
-  };
-
   useHashLink([
     {
       element: containerRef,
@@ -70,12 +60,12 @@ export function KickoffRedux({
   };
 
   const handleChangeKickoff = (newKickoff: IKickoff) => {
-    setKickoff(newKickoff);
+    setFieldValue('kickoff', newKickoff, false);
   };
 
   const handleClearKickoff = () => {
     const newKickoff = { ...getEmptyKickoff() };
-    setKickoff(newKickoff);
+    handleChangeKickoff(newKickoff);
   };
 
   const handleCreateField = (type: EExtraFieldType) => {
@@ -125,9 +115,7 @@ export function KickoffRedux({
             templateVariables={variables}
             value={wfNameTemplate || ''}
             onChange={(value: string) => {
-              editTemplate({
-                wfNameTemplate: value,
-              });
+              setFieldValue('wfNameTemplate', value, false);
 
               return Promise.resolve(value);
             }}

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

@@ -4,12 +4,10 @@ import Switch from 'rc-switch';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import classnames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { default as TextareaAutosize } from 'react-textarea-autosize';
 import { useMemo, useState } from 'react';
 
-import { patchTemplate } from '../../../../redux/actions';
-import { getTemplateData } from '../../../../redux/selectors/template';
 import { getIsUserSubsribed, getSubscriptionPlan } from '../../../../redux/selectors/user';
 import { copyToClipboard } from '../../../../utils/helpers';
 import { NotificationManager } from '../../../UI/Notifications';
@@ -21,6 +19,7 @@ import { trackShareKickoffForm } from '../../../../utils/analytics';
 import { TPublicFormType } from '../../../../types/publicForms';
 import { generateEmbedCode } from './utils/generateEmbedCode';
 import { ESubscriptionPlan } from '../../../../types/account';
+import { useTemplateField } from '../../useTemplateForm';
 
 import styles from './KickoffShareForm.css';
 
@@ -29,12 +28,12 @@ interface IKickoffShareFormProps {
 }
 
 export function KickoffShareForm({ className }: IKickoffShareFormProps) {
-  const dispatch = useDispatch();
   const { formatMessage } = useIntl();
+  const { values, setFieldValue } = useTemplateField();
   const isSubscribed = useSelector(getIsUserSubsribed);
   const subcriptionPlan = useSelector(getSubscriptionPlan);
   const accessSharedForm = isSubscribed || subcriptionPlan === ESubscriptionPlan.Free;
-  const { publicUrl, isPublic, publicSuccessUrl, embedUrl, isEmbedded } = useSelector(getTemplateData);
+  const { publicUrl, isPublic, publicSuccessUrl, embedUrl, isEmbedded } = values;
 
   const TABS: { id: TPublicFormType; label: string }[] = useMemo(
     () => [
@@ -62,7 +61,9 @@ export function KickoffShareForm({ className }: IKickoffShareFormProps) {
   }, [embedUrl]);
 
   const editTemplate = (templateFields: Partial<ITemplate>) => {
-    dispatch(patchTemplate({ changedFields: templateFields }));
+    (Object.keys(templateFields) as (keyof ITemplate)[]).forEach((key) => {
+      setFieldValue(key as string, templateFields[key], false);
+    });
   };
 
   useDidUpdateEffect(() => {

frontend/src/public/components/TemplateEdit/KickoffRedux/container.ts

@@ -5,17 +5,14 @@ import { IApplicationState } from '../../../types/redux';
 
 import { IKickoffReduxProps, KickoffRedux } from './KickoffRedux';
 
-type TStoreProps = Pick<IKickoffReduxProps, 'template' | 'accountId' | 'templateStatus'>;
+type TStoreProps = Pick<IKickoffReduxProps, 'accountId'>;
 
 export function mapStateToProps({
-  template: { data: template, status },
   authUser: { account },
 }: IApplicationState): TStoreProps {
   return {
-    template,
-    templateStatus: status,
     accountId: account.id || -1,
   };
 }
 
-export const KickoffReduxContainer = injectIntl(connect(mapStateToProps)(KickoffRedux));
+export const KickoffReduxContainer = injectIntl(connect<TStoreProps>(mapStateToProps)(KickoffRedux));

frontend/src/public/components/TemplateEdit/TaskForm/ReturnTo/ReturnTo.tsx

@@ -11,15 +11,14 @@ import { useCheckDevice } from '../../../../hooks/useCheckDevice';
 
 import { TTaskVariable } from '../../types';
 import { ITemplateTask } from '../../../../types/template';
+import { useTaskForm } from '../useTaskForm';
 
 import styles from './ReturnTo.css';
 import stylesTaskForm from '../TaskForm.css';
 
 interface IReturnToProps {
   variables: TTaskVariable[];
   tasks: ITemplateTask[];
-  currentTaskRevertTask: string | null;
-  setCurrentTask(changedFields: Partial<ITemplateTask>): void;
   taskAncestors: Set<string>;
 }
 
@@ -29,8 +28,9 @@ interface IDropdownTask {
   richLabel: ReactNode;
 }
 
-export function ReturnTo({ variables, tasks, currentTaskRevertTask, setCurrentTask, taskAncestors }: IReturnToProps) {
-  const [isReturnTo, setIsReturnTo] = useState(Boolean(currentTaskRevertTask));
+export function ReturnTo({ variables, tasks, taskAncestors }: IReturnToProps) {
+  const { task, updateTask } = useTaskForm();
+  const [isReturnTo, setIsReturnTo] = useState(Boolean(task.revertTask));
   const { formatMessage } = useIntl();
   const { isMobile } = useCheckDevice();
   const STYLES = {
@@ -57,7 +57,7 @@ export function ReturnTo({ variables, tasks, currentTaskRevertTask, setCurrentTa
   const dropdownTaskList = useMemo(
     () => [
       ...tasks
-        .filter((task: ITemplateTask) => taskAncestors.has(task.apiName))
+        .filter((ancestorTask: ITemplateTask) => taskAncestors.has(ancestorTask.apiName))
         .map(({ name, apiName }) => {
           return {
             label: name,
@@ -74,25 +74,25 @@ export function ReturnTo({ variables, tasks, currentTaskRevertTask, setCurrentTa
   );
 
   const selectedTask =
-    currentTaskRevertTask && dropdownTaskList.find((task: IDropdownTask) => currentTaskRevertTask === task.apiName);
+    task.revertTask && dropdownTaskList.find((dropdownTask: IDropdownTask) => task.revertTask === dropdownTask.apiName);
 
   const formatOptionLabel = (option: IDropdownTask, { context }: { context: string }) => {
     return context === 'menu'
       ? getFormattedDropdownOption({
           label: option.richLabel,
-          isSelected: option.apiName === currentTaskRevertTask,
+          isSelected: option.apiName === task.revertTask,
         })
       : option.richLabel;
   };
 
   const removeReturn = () => {
     setIsReturnTo(false);
-    setCurrentTask({ revertTask: null });
+    updateTask({ revertTask: null });
   };
 
   const handleOptionChange = (option: IDropdownTask) => {
     if (selectedTask && option.apiName === selectedTask.apiName) return;
-    setCurrentTask({ revertTask: option.apiName });
+    updateTask({ revertTask: option.apiName });
   };
 
   return (