Add the editor type selection in localStorage

openshift-pipelines · Nov 27, 2024 · dcf83bb · dcf83bb
1 parent 98e447c
commit dcf83bb
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 143 deletions.
diff --git a/src/components/pipeline-builder/SyncedEditorField.tsx b/src/components/pipeline-builder/SyncedEditorField.tsx
@@ -9,6 +9,7 @@ import { EditorType } from './types';
 import { safeJSToYAML, safeYAMLToJS } from './yaml';
 
 import './SyncedEditorField.scss';
+import { LOCAL_STORAGE_KEY_EDITOR_TYPE } from './const';
 
 type FormErrorCallback<ReturnValue = {}> = () => ReturnValue;
 type WithOrWithoutPromise<Type> = Promise<Type> | Type;
@@ -43,7 +44,8 @@ const SyncedEditorField: React.FC<SyncedEditorFieldProps> = ({
 }) => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   const [editorType, setEditorType] = React.useState<EditorType>(
-    EditorType.Form,
+    (localStorage.getItem(LOCAL_STORAGE_KEY_EDITOR_TYPE) as EditorType) ||
+      EditorType.Form,
   );
   const [field] = useField(name);
 
@@ -61,6 +63,7 @@ const SyncedEditorField: React.FC<SyncedEditorFieldProps> = ({
 
   const changeEditorType = (newType: EditorType) => {
     setEditorType(newType);
+    localStorage.setItem(LOCAL_STORAGE_KEY_EDITOR_TYPE, newType);
     setFieldValue(name, newType);
   };
 

diff --git a/src/components/pipeline-builder/const.ts b/src/components/pipeline-builder/const.ts
@@ -70,3 +70,6 @@ export const initialPipelineFormData: PipelineBuilderFormValues = {
   finallyListTasks: [],
   loadingTasks: [],
 };
+
+export const LOCAL_STORAGE_KEY_EDITOR_TYPE =
+  'pipeline-console-plugin-editorType';
diff --git a/src/components/pipeline-builder/synced-editor/__tests__/useEditorType.spec.ts b/src/components/pipeline-builder/synced-editor/__tests__/useEditorType.spec.ts
diff --git a/src/components/pipeline-builder/synced-editor/index.tsx b/src/components/pipeline-builder/synced-editor/index.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { EditorType, EditorToggle } from './editor-toggle';
 import { K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
 import { asyncYAMLToJS, safeJSToYAML } from '../yaml';
+import { LOCAL_STORAGE_KEY_EDITOR_TYPE } from '../const';
 
 const YAML_KEY_ORDER = ['apiVerion', 'kind', 'metadata', 'spec', 'status'];
 export const YAML_TO_JS_OPTIONS = {
@@ -47,7 +48,8 @@ export const SyncedEditor: React.FC<SyncedEditorProps> = ({
   const [switchError, setSwitchError] = React.useState<string | undefined>();
   const [yamlWarning, setYAMLWarning] = React.useState<boolean>(false);
   const [editorType, setEditorType] = React.useState<EditorType>(
-    EditorType.Form,
+    (localStorage.getItem(LOCAL_STORAGE_KEY_EDITOR_TYPE) as EditorType) ||
+      EditorType.Form,
   );
 
   const handleFormDataChange = (newFormData: K8sResourceKind = {}) => {
@@ -71,6 +73,7 @@ export const SyncedEditor: React.FC<SyncedEditorProps> = ({
 
   const changeEditorType = (newType: EditorType): void => {
     setEditorType(newType);
+    localStorage.setItem(LOCAL_STORAGE_KEY_EDITOR_TYPE, newType);
     onChangeEditorType(newType);
   };