create a seperate use_can_save hook

Signed-off-by: abbyhu2000 <[email protected]>

src/plugins/wizard/public/application/components/top_nav.tsx

@@ -15,26 +15,7 @@ import './top_nav.scss';
 import { useIndexPatterns, useSavedWizardVis } from '../utils/use';
 import { useTypedSelector, useTypedDispatch } from '../utils/state_management';
 import { setEditorState } from '../utils/state_management/metadata_slice';
-
-const useCanSave = (isEmpty, hasChange, hasDraftAgg) => {
-  let errorMsg = '';
-
-  // TODO: Need to finalize the error messages
-  if (isEmpty) {
-    errorMsg = 'The canvas is empty. Add some aggregations before saving.';
-  } else if (!hasChange) {
-    errorMsg = 'Add some changes before saving.';
-  } else if (hasDraftAgg) {
-    errorMsg = 'Has unapplied aggregations changes, update them before saving.';
-  } else {
-    errorMsg = '';
-  }
-
-  return {
-    canSave: !isEmpty && hasChange && !hasDraftAgg,
-    errorMsg,
-  };
-};
+import { useCanSave } from '../utils/use/use_can_save';
 
 export const TopNav = () => {
   // id will only be set for the edit route
@@ -49,15 +30,7 @@ export const TopNav = () => {
   const rootState = useTypedSelector((state) => state);
   const dispatch = useTypedDispatch();
 
-  const isEmpty = useTypedSelector(
-    (state) => state.visualization.activeVisualization?.aggConfigParams?.length === 0
-  );
-  const hasChange = useTypedSelector((state) => state.metadata.editorState.state === 'dirty');
-  const hasDraftAgg = useTypedSelector(
-    (state) => !!state.visualization.activeVisualization?.draftAgg
-  );
-
-  const saveState = useCanSave(isEmpty, hasChange, hasDraftAgg);
+  const saveState = useCanSave();
   const savedWizardVis = useSavedWizardVis(visualizationIdFromUrl);
 
   const config = useMemo(() => {

src/plugins/wizard/public/application/utils/use/use_can_save.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useTypedSelector } from '../state_management';
+
+export const useCanSave = () => {
+  let errorMsg = '';
+  const isEmpty = useTypedSelector(
+    (state) => state.visualization.activeVisualization?.aggConfigParams?.length === 0
+  );
+  const hasChange = useTypedSelector((state) => state.metadata.editorState.state === 'dirty');
+  const hasDraftAgg = useTypedSelector(
+    (state) => !!state.visualization.activeVisualization?.draftAgg
+  );
+
+  // TODO: Need to finalize the error messages
+  if (isEmpty) {
+    errorMsg = 'The canvas is empty. Add some aggregations before saving.';
+  } else if (!hasChange) {
+    errorMsg = 'Add some changes before saving.';
+  } else if (hasDraftAgg) {
+    errorMsg = 'Has unapplied aggregations changes, update them before saving.';
+  } else {
+    errorMsg = '';
+  }
+
+  return {
+    canSave: !isEmpty && hasChange && !hasDraftAgg,
+    errorMsg,
+  };
+};