refactor: LEAP-1772: Remove FF_OPTIC_2 feature flag and associated logic (#7211)

Gondragos · robot-ci-heartex · web-flow · commit b023a3c9ded3 · 2025-03-19T01:13:24.000Z
Co-authored-by: robot-ci-heartex &lt;robot-ci-heartex@users.noreply.github.com&gt;
diff --git a/label_studio/core/feature_flags/stale_feature_flags.py b/label_studio/core/feature_flags/stale_feature_flags.py
@@ -1,7 +1,6 @@
 STALE_FEATURE_FLAGS = {
     'fflag_feat_all_dia_13_structured_data_support_short': False,
     'fflag_feat_front_optic_66_lazy_chart_evaluation_19092023_short': False,
-    'fflag_feat_optic_2_ensure_draft_saved_short': True,
     'fflag_fix_front_lsdv_4600_lead_time_27072023_short': False,
     'fflag_fix_front_lsdv_4988_dynamic_no_label_120523_short': True,
     'fflag_fix_back_lsdv_4648_annotator_filter_29052023_short': True,
diff --git a/web/apps/labelstudio/src/app/App.jsx b/web/apps/labelstudio/src/app/App.jsx
@@ -14,7 +14,7 @@ import { RoutesProvider } from "../providers/RoutesProvider";
 import { DRAFT_GUARD_KEY, DraftGuard, draftGuardCallback } from "../components/DraftGuard/DraftGuard";
 import { AsyncPage } from "./AsyncPage/AsyncPage";
 import ErrorBoundary from "./ErrorBoundary";
-import { FF_OPTIC_2, FF_UNSAVED_CHANGES, FF_PRODUCT_TOUR, isFF } from "../utils/feature-flags";
+import { FF_UNSAVED_CHANGES, FF_PRODUCT_TOUR, isFF } from "../utils/feature-flags";
 import { TourProvider } from "@humansignal/core";
 import { ToastProvider, ToastViewport } from "@humansignal/ui";
 import { QueryClient } from "@tanstack/react-query";
@@ -49,7 +49,7 @@ const browserHistory = createBrowserHistory({
       callback(result);
       isFF(FF_UNSAVED_CHANGES) && window.postMessage({ source: "label-studio", payload: UNBLOCK_HISTORY_MESSAGE });
     };
-    if (isFF(FF_OPTIC_2) && message === DRAFT_GUARD_KEY) {
+    if (message === DRAFT_GUARD_KEY) {
       draftGuardCallback.current = callbackWrapper;
     } else if (isFF(FF_UNSAVED_CHANGES) && message === LEAVE_BLOCKER_KEY) {
       leaveBlockerCallback.current = callbackWrapper;
diff --git a/web/apps/labelstudio/src/components/DraftGuard/DraftGuard.jsx b/web/apps/labelstudio/src/components/DraftGuard/DraftGuard.jsx
@@ -1,7 +1,6 @@
 import { useContext, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { ToastContext } from "@humansignal/ui";
-import { FF_OPTIC_2, isFF } from "../../utils/feature-flags";
 
 export const DRAFT_GUARD_KEY = "DRAFT_GUARD";
 
@@ -14,49 +13,47 @@ export const DraftGuard = () => {
   const history = useHistory();
 
   useEffect(() => {
-    if (isFF(FF_OPTIC_2)) {
-      const unblock = () => {
-        draftGuardCallback.current?.(true);
-        draftGuardCallback.current = null;
-      };
-
-      /**
-       * The version of Router History that is in use does not currently support
-       * the `block` method fully. This is a workaround to allow us to block navigation
-       * when there are unsaved changes. The draftGuardCallback allows the unblock callback to be captured from the
-       * history callback `getUserConfirmation` that is triggered by returning a string message from history.block, allowing the user to
-       * confirm they want to leave the page. Here we send through a constant message
-       * to signify that we aren't looking for user confirmation but to utilize this to enable navigation blocking based on
-       * unsuccessful draft saves.
-       */
-      const unsubscribe = history.block(() => {
-        const selected = window.Htx?.annotationStore?.selected;
-        const submissionInProgress = !!selected?.submissionStarted;
-        const hasChanges = !!selected?.history.undoIdx && !submissionInProgress;
-
-        if (hasChanges) {
-          selected.saveDraftImmediatelyWithResults()?.then((res) => {
-            const status = res?.$meta?.status;
-
-            if (status === 200 || status === 201) {
-              toast.show({ message: "Draft saved successfully", type: "info" });
-              unblock();
-            } else if (status !== undefined) {
-              toast.show({ message: "There was an error saving your draft", type: "error" });
-            } else {
-              unblock();
-            }
-          });
-
-          return DRAFT_GUARD_KEY;
-        }
-      });
-
-      return () => {
-        unblock();
-        unsubscribe();
-      };
-    }
+    const unblock = () => {
+      draftGuardCallback.current?.(true);
+      draftGuardCallback.current = null;
+    };
+
+    /**
+     * The version of Router History that is in use does not currently support
+     * the `block` method fully. This is a workaround to allow us to block navigation
+     * when there are unsaved changes. The draftGuardCallback allows the unblock callback to be captured from the
+     * history callback `getUserConfirmation` that is triggered by returning a string message from history.block, allowing the user to
+     * confirm they want to leave the page. Here we send through a constant message
+     * to signify that we aren't looking for user confirmation but to utilize this to enable navigation blocking based on
+     * unsuccessful draft saves.
+     */
+    const unsubscribe = history.block(() => {
+      const selected = window.Htx?.annotationStore?.selected;
+      const submissionInProgress = !!selected?.submissionStarted;
+      const hasChanges = !!selected?.history.undoIdx && !submissionInProgress;
+
+      if (hasChanges) {
+        selected.saveDraftImmediatelyWithResults()?.then((res) => {
+          const status = res?.$meta?.status;
+
+          if (status === 200 || status === 201) {
+            toast.show({ message: "Draft saved successfully", type: "info" });
+            unblock();
+          } else if (status !== undefined) {
+            toast.show({ message: "There was an error saving your draft", type: "error" });
+          } else {
+            unblock();
+          }
+        });
+
+        return DRAFT_GUARD_KEY;
+      }
+    });
+
+    return () => {
+      unblock();
+      unsubscribe();
+    };
   }, []);
 
   return <></>;
diff --git a/web/apps/labelstudio/src/pages/DataManager/DataManager.jsx b/web/apps/labelstudio/src/pages/DataManager/DataManager.jsx
@@ -7,15 +7,14 @@ import { modal } from "../../components/Modal/Modal";
 import { Space } from "../../components/Space/Space";
 import { useAPI } from "../../providers/ApiProvider";
 import { useProject } from "../../providers/ProjectProvider";
-import { useContextProps, useFixedLocation, useParams } from "../../providers/RoutesProvider";
-import { addAction, addCrumb, deleteAction, deleteCrumb } from "../../services/breadrumbs";
+import { useContextProps, useParams } from "../../providers/RoutesProvider";
+import { addCrumb, deleteCrumb } from "../../services/breadrumbs";
 import { Block, Elem } from "../../utils/bem";
 import { isDefined } from "../../utils/helpers";
 import { ImportModal } from "../CreateProject/Import/ImportModal";
 import { ExportPage } from "../ExportPage/ExportPage";
 import { APIConfig } from "./api-config";
 import { ToastContext, ToastType } from "@humansignal/ui";
-import { FF_OPTIC_2, isFF } from "../../utils/feature-flags";
 
 import "./DataManager.scss";
 
@@ -236,7 +235,6 @@ DataManagerPage.pages = {
   ImportModal,
 };
 DataManagerPage.context = ({ dmRef }) => {
-  const location = useFixedLocation();
   const { project } = useProject();
   const [mode, setMode] = useState(dmRef?.mode ?? "explorer");
 
@@ -246,19 +244,10 @@ DataManagerPage.context = ({ dmRef }) => {
 
   const updateCrumbs = (currentMode) => {
     const isExplorer = currentMode === "explorer";
-    const dmPath = location.pathname.replace(DataManagerPage.path, "");
 
     if (isExplorer) {
-      deleteAction(dmPath);
       deleteCrumb("dm-crumb");
     } else {
-      if (!isFF(FF_OPTIC_2)) {
-        addAction(dmPath, (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          dmRef?.store?.closeLabeling?.();
-        });
-      }
       addCrumb({
         key: "dm-crumb",
         title: "Labeling",
diff --git a/web/libs/core/src/lib/utils/feature-flags.ts b/web/libs/core/src/lib/utils/feature-flags.ts
@@ -13,10 +13,6 @@ export const FF_DEV_1682 = "ff_front_dev_1682_model_version_dropdown_070622_shor
 export const FF_LSDV_4711 = "fflag_fix_all_lsdv_4711_cors_errors_accessing_task_data_short";
 // Enables "Enterprise Awareness" features
 export const FF_LSDV_E_297 = "fflag_feat_front_lsdv_e_297_increase_oss_to_enterprise_adoption_short";
-/**
- * Improve load time performance of Dashboard Members page
- */
-export const FF_OPTIC_2 = "fflag_feat_optic_2_ensure_draft_saved_short";
 
 /**
  * Prompter workflow
diff --git a/web/libs/datamanager/src/components/MainView/DataView/Table.jsx b/web/libs/datamanager/src/components/MainView/DataView/Table.jsx
@@ -4,7 +4,7 @@ import { useCallback, useMemo } from "react";
 import { FaQuestionCircle } from "react-icons/fa";
 import { useShortcut } from "../../../sdk/hotkeys";
 import { Block, Elem } from "../../../utils/bem";
-import { FF_DEV_2536, FF_LOPS_86, FF_OPTIC_2, isFF } from "../../../utils/feature-flags";
+import { FF_DEV_2536, FF_LOPS_86, isFF } from "../../../utils/feature-flags";
 import * as CellViews from "../../CellViews";
 import { Icon } from "../../Common/Icon/Icon";
 import { ImportButton } from "../../Common/SDKButtons";
@@ -120,7 +120,7 @@ export const DataView = injector(
         } else if (e.metaKey || e.ctrlKey) {
           window.open(`./?task=${itemID}`, "_blank");
         } else {
-          if (isFF(FF_OPTIC_2)) store._sdk.lsf?.saveDraft();
+          store._sdk.lsf?.saveDraft();
           getRoot(view).startLabeling(item);
         }
       },
diff --git a/web/libs/datamanager/src/sdk/lsf-sdk.js b/web/libs/datamanager/src/sdk/lsf-sdk.js
@@ -18,7 +18,6 @@ import {
   FF_DEV_2887,
   FF_DEV_3034,
   FF_LSDV_4620_3_ML,
-  FF_OPTIC_2,
   FF_REGION_VISIBILITY_FROM_URL,
   isFF,
 } from "../utils/feature-flags";
@@ -881,7 +880,7 @@ export class LSFWrapper {
     if (window.APP_SETTINGS.read_only_quick_view_enabled && !this.labelStream) {
       prevAnnotation?.setEditable(false);
     }
-    if (isFF(FF_OPTIC_2) && !!nextAnnotation?.history?.undoIdx) {
+    if (nextAnnotation?.history?.undoIdx) {
       this.saveDraft(nextAnnotation).then(() => {
         this.datamanager.invoke("onSelectAnnotation", prevAnnotation, nextAnnotation, options, this);
       });
@@ -891,11 +890,11 @@ export class LSFWrapper {
   };
 
   onNextTask = async (nextTaskId, nextAnnotationId) => {
-    if (isFF(FF_OPTIC_2)) this.saveDraft();
+    this.saveDraft();
     this.loadTask(nextTaskId, nextAnnotationId, true);
   };
   onPrevTask = async (prevTaskId, prevAnnotationId) => {
-    if (isFF(FF_OPTIC_2)) this.saveDraft();
+    this.saveDraft();
     this.loadTask(prevTaskId, prevAnnotationId, true);
   };
   async submitCurrentAnnotation(eventName, submit, includeId = false, loadNext = true) {
diff --git a/web/libs/datamanager/src/utils/feature-flags.js b/web/libs/datamanager/src/utils/feature-flags.js
@@ -42,11 +42,6 @@ export const FF_LSDV_4620_3_ML = "fflag_fix_front_lsdv_4620_memory_leaks_100723_
  */
 export const FF_LSDV_4711 = "fflag_fix_all_lsdv_4711_cors_errors_accessing_task_data_short";
 
-/**
- * Save draft on leave annotation editor
- */
-export const FF_OPTIC_2 = "fflag_feat_optic_2_ensure_draft_saved_short";
-
 /**
  * Adding the ability to toggle dataset storage editability.
  */
