Stay on current tab when building feature set (#1247)

* stay on current preview tab

* linting

* react deps

Author: dolbeew

ui/src/components/tabs.tsx

@@ -26,18 +26,20 @@ export type TabsProps = {
 };
 
 export function Tabs(props: TabsProps) {
-  const [currentTab, setCurrentTab] = useState(props?.configs?.[0]?.id);
+  const [currentTab, setCurrentTab] = useState(
+    props.currentTab ?? props?.configs?.[0]?.id
+  );
 
   const onChange = (event: React.SyntheticEvent, newValue: string) => {
     (props.setCurrentTab ?? setCurrentTab)(newValue);
   };
 
   useEffect(() => {
     // If the data feature for currentTab was deleted, reset to the first in the list
-    if (!props.configs.some((c) => c.id === currentTab)) {
-      setCurrentTab(props?.configs?.[0]?.id);
+    if (!props.configs.some((c) => c.id === (props.currentTab ?? currentTab))) {
+      (props.setCurrentTab ?? setCurrentTab)(props?.configs?.[0]?.id);
     }
-  }, [props.configs, currentTab]);
+  }, [props.configs, currentTab, props.currentTab, props.setCurrentTab]);
 
   return (
     <TabContext

ui/src/featureSet/featureSet.tsx

@@ -299,7 +299,14 @@ export type PreviewTabData = {
 };
 
 function Preview() {
-  const previewContext = useFeatureSetPreviewContext();
+  const {
+    previewData,
+    updatePreviewData,
+    updating,
+    setUpdating,
+    currentTab,
+    setCurrentTab,
+  } = useFeatureSetPreviewContext();
   const featureSet = useFeatureSet();
   const underlaySource = useUnderlaySource();
   const underlay = useUnderlay();
@@ -324,22 +331,20 @@ function Preview() {
       newPreviewOccurrences.sort((a, b) => a.id.localeCompare(b.id));
       let previewOccurrencesToLoad: PreviewOccurrence[] = [];
       let updateExisting = false;
-      if (newPreviewOccurrences.length > previewContext.previewData?.length) {
+      if (newPreviewOccurrences.length > previewData?.length) {
         previewOccurrencesToLoad = newPreviewOccurrences.filter(
-          (npo) => !previewContext.previewData.some((po) => po.name === npo.id)
+          (npo) => !previewData.some((po) => po.name === npo.id)
         );
-      } else if (
-        newPreviewOccurrences.length === previewContext.previewData?.length
-      ) {
+      } else if (newPreviewOccurrences.length === previewData?.length) {
         const updatedPreviewOccurrences = newPreviewOccurrences.filter(
           (npo, n) =>
             JSON.stringify(npo.sourceCriteria) !==
-            JSON.stringify(previewContext.previewData[n].sourceCriteria)
+            JSON.stringify(previewData[n].sourceCriteria)
         );
         if (updatedPreviewOccurrences.length > 0) {
           previewOccurrencesToLoad = updatedPreviewOccurrences;
-          previewContext.updatePreviewData(
-            previewContext.previewData.map((pd) => {
+          updatePreviewData(
+            previewData.map((pd) => {
               const updatedIndex = updatedPreviewOccurrences.findIndex(
                 (upo) => upo.id === pd.name
               );
@@ -356,13 +361,11 @@ function Preview() {
           );
           updateExisting = true;
         }
-      } else if (
-        newPreviewOccurrences.length < previewContext.previewData?.length
-      ) {
-        const newPreviewData = previewContext.previewData.filter((pd) =>
+      } else if (newPreviewOccurrences.length < previewData?.length) {
+        const newPreviewData = previewData.filter((pd) =>
           newPreviewOccurrences.some((npo) => npo.id === pd.name)
         );
-        previewContext.updatePreviewData(newPreviewData);
+        updatePreviewData(newPreviewData);
       }
       if (previewOccurrencesToLoad?.length > 0) {
         loadNewPreviewData(
@@ -387,7 +390,7 @@ function Preview() {
     allOccurrences: PreviewOccurrence[],
     updateExisting?: boolean
   ) => {
-    previewContext.setUpdating(true);
+    setUpdating(true);
     const newOccurrenceData = await Promise.all(
       newOccurrences.map(async (params) => {
         const res = await underlaySource.exportPreview(
@@ -420,14 +423,14 @@ function Preview() {
       })
     );
     if (!updateExisting) {
-      const updatedPreviewData = [
-        ...previewContext.previewData,
-        ...newOccurrenceData,
-      ];
+      const updatedPreviewData = [...previewData, ...newOccurrenceData];
       updatedPreviewData.sort((a, b) => a.name.localeCompare(b.name));
-      previewContext.updatePreviewData(updatedPreviewData);
+      updatePreviewData(updatedPreviewData);
+      if (!currentTab) {
+        setCurrentTab(updatedPreviewData[0].name);
+      }
     }
-    previewContext.setUpdating(false);
+    setUpdating(false);
     allOccurrences.sort((a, b) => a.id.localeCompare(b.id));
     setPreviewOccurrences(allOccurrences);
   };
@@ -438,14 +441,12 @@ function Preview() {
       featureSet.predefinedCriteria.length > 0 ? (
         <Loading
           status={{}}
-          isLoading={
-            occurrenceFiltersState.isLoading || previewContext.updating
-          }
+          isLoading={occurrenceFiltersState.isLoading || updating}
           showLoadingMessage={true}
         >
           <Tabs
             configs={
-              (previewContext.previewData ?? []).map((data) => ({
+              (previewData ?? []).map((data) => ({
                 id: data.name,
                 title: data.name,
                 render: () => {
@@ -472,6 +473,8 @@ function Preview() {
                 },
               })) ?? []
             }
+            currentTab={currentTab}
+            setCurrentTab={setCurrentTab}
           />
         </Loading>
       ) : (

ui/src/featureSet/featureSetContext.ts

@@ -34,6 +34,8 @@ type FeatureSetPreviewContextData = {
   updatePreviewData: (state: PreviewTabData[]) => void;
   updating: boolean;
   setUpdating: (state: boolean) => void;
+  currentTab: string;
+  setCurrentTab: (state: string) => void;
 };
 
 export const FeatureSetPreviewContext =

ui/src/featureSet/featureSetRoot.tsx

@@ -19,6 +19,7 @@ export default function FeatureSetRoot() {
   const [message, setMessage] = useState("");
   const [previewData, setPreviewData] = useState<PreviewTabData[]>([]);
   const [updatingPreview, setUpdatingPreview] = useState<boolean>(false);
+  const [currentTab, setCurrentTab] = useState<string>("");
 
   const status = useNewFeatureSetContext((message: string) => {
     setMessage(message);
@@ -45,6 +46,8 @@ export default function FeatureSetRoot() {
               updatePreviewData: setPreviewData,
               updating: updatingPreview,
               setUpdating: setUpdatingPreview,
+              currentTab,
+              setCurrentTab,
             }}
           >
             <Outlet />