refactor: LEAP-1314: Remove Stale Feature Flag - fflag_feat_front_dev… (HumanSignal#6732)

Co-authored-by: yyassi-heartex <[email protected]>

Author: 2 people

label_studio/core/feature_flags/stale_feature_flags.py

@@ -33,7 +33,6 @@
     'fflag_fix_front_dev_3666_max_usages_on_region_creation_171122_short': True,
     'fflag_fix_front_dev_3617_taxonomy_memory_leaks_fix': True,
     'fflag_fix_front_dev_3350_restrict_drawing_area_short': True,
-    'fflag_feat_front_dev_2984_dm_draggable_columns_short': True,
     'fflag_feat_front_dev_2461_audio_paragraphs_seek_chunk_position_short': True,
     'ff_front_dev_2432_auto_save_polygon_draft_210622_short': True,
     'ff_front_dev_2575_projects_list_performance_280622_short': True,

web/libs/datamanager/src/components/Common/Table/TableHead/TableHead.jsx

@@ -13,13 +13,11 @@ import { TableCell, TableCellContent } from "../TableCell/TableCell";
 import { TableContext, TableElem } from "../TableContext";
 import { getStyle } from "../utils";
 import "./TableHead.scss";
-import { FF_DEV_2984, FF_DEV_3873, isFF } from "../../../../utils/feature-flags";
+import { FF_DEV_3873, isFF } from "../../../../utils/feature-flags";
 import { getRoot } from "mobx-state-tree";
 
 const { Block, Elem } = BemWithSpecifiContext();
 
-const is2984FF = isFF(FF_DEV_2984);
-
 const DropdownWrapper = observer(({ column, cellViews, children, onChange }) => {
   const types = ViewColumnType._types
     .map((t) => t.value)
@@ -165,157 +163,132 @@ export const TableHead = observer(
       ref,
     ) => {
       const { columns, headerRenderers, cellViews } = React.useContext(TableContext);
+      const states = useLocalStore(() => ({
+        orderedColumns: {},
+        setOrderedColumns(updatedColumns) {
+          states.orderedColumns = { ...updatedColumns };
+        },
+        getOrderedColumns() {
+          return toJS(states.orderedColumns) ?? {};
+        },
+        isDragging: false,
+        setIsDragging(isDragging) {
+          states.isDragging = isDragging;
+        },
+        getIsDragging() {
+          return toJS(states.isDragging);
+        },
+        initialDragPos: false,
+        setInitialDragPos(initPos) {
+          states.initialDragPos = initPos;
+        },
+        getInitialDragPos() {
+          return toJS(states.initialDragPos);
+        },
+        draggedCol: null,
+        setDraggedCol(draggedCol) {
+          states.draggedCol = draggedCol;
+        },
+        getDraggedCol() {
+          return toJS(states.draggedCol);
+        },
+      }));
+      const colRefs = useRef({});
+      const getUpdatedColOrder = useCallback(
+        (cols) => {
+          const orderedColumns = {};
 
-      if (is2984FF) {
-        const states = useLocalStore(() => ({
-          orderedColumns: {},
-          setOrderedColumns(updatedColumns) {
-            states.orderedColumns = { ...updatedColumns };
-          },
-          getOrderedColumns() {
-            return toJS(states.orderedColumns) ?? {};
-          },
-          isDragging: false,
-          setIsDragging(isDragging) {
-            states.isDragging = isDragging;
-          },
-          getIsDragging() {
-            return toJS(states.isDragging);
-          },
-          initialDragPos: false,
-          setInitialDragPos(initPos) {
-            states.initialDragPos = initPos;
-          },
-          getInitialDragPos() {
-            return toJS(states.initialDragPos);
-          },
-          draggedCol: null,
-          setDraggedCol(draggedCol) {
-            states.draggedCol = draggedCol;
-          },
-          getDraggedCol() {
-            return toJS(states.draggedCol);
-          },
-        }));
-        const colRefs = useRef({});
-        const getUpdatedColOrder = useCallback(
-          (cols) => {
-            const orderedColumns = {};
-
-            (cols ?? columns).forEach((col, colIndex) => {
-              orderedColumns[col.id] = colIndex;
-            });
-            return orderedColumns;
-          },
-          [columns],
-        );
+          (cols ?? columns).forEach((col, colIndex) => {
+            orderedColumns[col.id] = colIndex;
+          });
+          return orderedColumns;
+        },
+        [columns],
+      );
 
-        useEffect(() => {
-          ref.current?.addEventListener("mousedown", (event) => {
-            const className = event.target.className;
+      useEffect(() => {
+        ref.current?.addEventListener("mousedown", (event) => {
+          const className = event.target.className;
 
-            // This element could be an SVG element where className is an object, not a string.
-            if (className?.includes?.("handle")) {
-              event.preventDefault();
-            }
-          });
-        }, []);
+          // This element could be an SVG element where className is an object, not a string.
+          if (className?.includes?.("handle")) {
+            event.preventDefault();
+          }
+        });
+      }, []);
 
-        return (
-          <Block
-            name="table-head"
-            ref={ref}
-            style={{
-              ...style,
-              height: isFF(FF_DEV_3873) && 42,
-            }}
-            mod={{ droppable: true }}
-            mix="horizontal-shadow"
-            onDragOver={useCallback(
-              (e) => {
-                const draggedCol = states.getDraggedCol();
+      return (
+        <Block
+          name="table-head"
+          ref={ref}
+          style={{
+            ...style,
+            height: isFF(FF_DEV_3873) && 42,
+          }}
+          mod={{ droppable: true }}
+          mix="horizontal-shadow"
+          onDragOver={useCallback(
+            (e) => {
+              const draggedCol = states.getDraggedCol();
 
-                colRefs.current[draggedCol].style.setProperty("--scale", "0");
-                e.stopPropagation();
-              },
-              [states],
-            )}
-          >
-            {columns.map((col) => {
-              return (
-                <Elem
-                  name="draggable"
-                  draggable={true}
-                  ref={(ele) => (colRefs.current[col.id] = ele)}
-                  key={col.id}
-                  onDragStart={(e) => {
-                    e.dataTransfer.effectAllowed = "none";
-                    const ele = colRefs.current[col.id];
+              colRefs.current[draggedCol].style.setProperty("--scale", "0");
+              e.stopPropagation();
+            },
+            [states],
+          )}
+        >
+          {columns.map((col) => {
+            return (
+              <Elem
+                name="draggable"
+                draggable={true}
+                ref={(ele) => (colRefs.current[col.id] = ele)}
+                key={col.id}
+                onDragStart={(e) => {
+                  e.dataTransfer.effectAllowed = "none";
+                  const ele = colRefs.current[col.id];
 
-                    states.setInitialDragPos({
-                      x: ele.offsetLeft,
-                      y: ele.offsetTop,
-                    });
-                    states.setDraggedCol(col.id);
-                  }}
-                  onDragEnd={(e) => {
-                    e.stopPropagation();
-                    const draggedCol = states.getDraggedCol();
-                    const curColumns = columns.filter((curCol) => curCol.id !== draggedCol);
-                    const newIndex = curColumns.findIndex((curCol) => {
-                      const colRefrence = colRefs.current[curCol.id];
-                      const mousePos = e.clientX + (ref?.current?.parentElement?.parentElement.scrollLeft ?? 0);
-                      const isGreaterThanPos = mousePos < colRefrence.offsetLeft + colRefrence.clientWidth / 2;
+                  states.setInitialDragPos({
+                    x: ele.offsetLeft,
+                    y: ele.offsetTop,
+                  });
+                  states.setDraggedCol(col.id);
+                }}
+                onDragEnd={(e) => {
+                  e.stopPropagation();
+                  const draggedCol = states.getDraggedCol();
+                  const curColumns = columns.filter((curCol) => curCol.id !== draggedCol);
+                  const newIndex = curColumns.findIndex((curCol) => {
+                    const colRefrence = colRefs.current[curCol.id];
+                    const mousePos = e.clientX + (ref?.current?.parentElement?.parentElement.scrollLeft ?? 0);
+                    const isGreaterThanPos = mousePos < colRefrence.offsetLeft + colRefrence.clientWidth / 2;
 
-                      return isGreaterThanPos;
-                    });
+                    return isGreaterThanPos;
+                  });
 
-                    colRefs.current[draggedCol].style.setProperty("--scale", "");
+                  colRefs.current[draggedCol].style.setProperty("--scale", "");
 
-                    states.setDraggedCol(null);
-                    curColumns.splice(newIndex, 0, col);
-                    const updatedColOrder = getUpdatedColOrder(curColumns);
+                  states.setDraggedCol(null);
+                  curColumns.splice(newIndex, 0, col);
+                  const updatedColOrder = getUpdatedColOrder(curColumns);
 
-                    onDragEnd?.(updatedColOrder);
-                  }}
-                >
-                  <ColumnRenderer
-                    column={col}
-                    mod={{ draggable: true }}
-                    headerRenderers={headerRenderers}
-                    cellViews={cellViews}
-                    columnHeaderExtra={columnHeaderExtra}
-                    sortingEnabled={sortingEnabled}
-                    stopInteractions={stopInteractions}
-                    decoration={decoration}
-                    onTypeChange={onTypeChange}
-                    onResize={onResize}
-                    onReset={onReset}
-                  />
-                </Elem>
-              );
-            })}
-            <Elem name="extra">{extra}</Elem>
-          </Block>
-        );
-      }
-      return (
-        <Block name="table-head" ref={ref} style={style} mix="horizontal-shadow">
-          {columns.map((col) => {
-            return (
-              <ColumnRenderer
-                key={col.id}
-                column={col}
-                headerRenderers={headerRenderers}
-                cellViews={cellViews}
-                columnHeaderExtra={columnHeaderExtra}
-                sortingEnabled={sortingEnabled}
-                stopInteractions={stopInteractions}
-                decoration={decoration}
-                onTypeChange={onTypeChange}
-                onResize={onResize}
-                onReset={onReset}
-              />
+                  onDragEnd?.(updatedColOrder);
+                }}
+              >
+                <ColumnRenderer
+                  column={col}
+                  mod={{ draggable: true }}
+                  headerRenderers={headerRenderers}
+                  cellViews={cellViews}
+                  columnHeaderExtra={columnHeaderExtra}
+                  sortingEnabled={sortingEnabled}
+                  stopInteractions={stopInteractions}
+                  decoration={decoration}
+                  onTypeChange={onTypeChange}
+                  onResize={onResize}
+                  onReset={onReset}
+                />
+              </Elem>
             );
           })}
           <Elem name="extra">{extra}</Elem>

web/libs/datamanager/src/utils/feature-flags.js

@@ -21,9 +21,6 @@ export const FF_DEV_2715 = "ff_front_dev_2715_audio_3_280722_short";
 // Comments for annotation editor
 export const FF_DEV_2887 = "fflag-feat-dev-2887-comments-ui-editor-short";
 
-// toggles the ability to drag columns on the datamanager table
-export const FF_DEV_2984 = "fflag_feat_front_dev_2984_dm_draggable_columns_short";
-
 export const FF_DEV_3034 = "fflag-feat-dev-3034-comments-with-drafts-short";
 
 export const FF_DEV_3873 = "fflag_feat_front_dev_3873_labeling_ui_improvements_short";