chore: FIT-343: Remove feature flag fflag_feat_front_lsdv_e_278_contextual_scrolling_short

label_studio/feature_flags.json

@@ -2528,33 +2528,7 @@
       "version": 4,
       "deleted": false
     },
-    "fflag_feat_front_lsdv_e_278_contextual_scrolling_short": {
-      "key": "fflag_feat_front_lsdv_e_278_contextual_scrolling_short",
-      "on": true,
-      "prerequisites": [],
-      "targets": [],
-      "contextTargets": [],
-      "rules": [],
-      "fallthrough": {
-        "variation": 0
-      },
-      "offVariation": 1,
-      "variations": [
-        true,
-        false
-      ],
-      "clientSideAvailability": {
-        "usingMobileKey": false,
-        "usingEnvironmentId": false
-      },
-      "clientSide": false,
-      "salt": "04cfe1dec05344db9c20e81663546744",
-      "trackEvents": false,
-      "trackEventsFallthrough": false,
-      "debugEventsUntilDate": null,
-      "version": 6,
-      "deleted": false
-    },
+
     "fflag_feat_front_lsdv_e_297_increase_oss_to_enterprise_adoption_short": {
       "key": "fflag_feat_front_lsdv_e_297_increase_oss_to_enterprise_adoption_short",
       "on": true,

web/libs/editor/src/tags/object/Audio/model.js

@@ -9,7 +9,6 @@ import ProcessAttrsMixin from "../../../mixins/ProcessAttrs";
 import { SyncableMixin } from "../../../mixins/Syncable";
 import { AudioRegionModel } from "../../../regions/AudioRegion";
 import Utils from "../../../utils";
-import { FF_LSDV_E_278, isFF } from "../../../utils/feature-flags";
 import { isDefined } from "../../../utils/utilities";
 import ObjectBase from "../Base";
 import { WS_SPEED, WS_VOLUME, WS_ZOOM_X } from "./constants";
@@ -495,9 +494,7 @@ export const AudioModel = types.compose(
 
           self.checkReady();
           self.needsUpdate();
-          if (isFF(FF_LSDV_E_278)) {
-            self.loadSyncedParagraphs();
-          }
+          self.loadSyncedParagraphs();
         },
 
         checkReady() {

web/libs/editor/src/tags/object/Paragraphs/HtxParagraphs.jsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
 
 import ObjectTag from "../../../components/Tags/Object";
-import { FF_DEV_2669, FF_DEV_2918, FF_LSDV_4711, FF_LSDV_E_278, isFF } from "../../../utils/feature-flags";
+import { FF_DEV_2669, FF_DEV_2918, FF_LSDV_4711, isFF } from "../../../utils/feature-flags";
 import { findNodeAt, matchesSelector, splitBoundaries } from "../../../utils/html";
 import { isSelectionContainsSpan } from "../../../utils/selection-tools";
 import styles from "./Paragraphs.module.scss";
@@ -423,7 +423,6 @@ class HtxParagraphsView extends Component {
     });
 
     if (
-      isFF(FF_LSDV_E_278) &&
       this.props.item.contextscroll &&
       item.playingId >= 0 &&
       this.lastPlayingId !== item.playingId &&
@@ -511,8 +510,7 @@ class HtxParagraphsView extends Component {
   }
 
   componentDidMount() {
-    if (isFF(FF_LSDV_E_278) && this.props.item.contextscroll)
-      this._resizeObserver.observe(document.querySelector(this.mainContentSelector));
+    if (this.props.item.contextscroll) this._resizeObserver.observe(document.querySelector(this.mainContentSelector));
     this._handleUpdate();
   }
 
@@ -572,9 +570,9 @@ class HtxParagraphsView extends Component {
   render() {
     const { item } = this.props;
     const withAudio = !!item.audio;
-    const contextScroll = isFF(FF_LSDV_E_278) && this.props.item.contextscroll;
+    const contextScroll = this.props.item.contextscroll;
 
-    if (!item.playing && isFF(FF_LSDV_E_278)) this._disposeTimeout(); // dispose scroll timeout when the audio is not playing
+    if (!item.playing) this._disposeTimeout(); // dispose scroll timeout when the audio is not playing
 
     // current way to not render when we wait for data
     if (isFF(FF_DEV_2669) && !item._value) return null;
@@ -594,7 +592,7 @@ class HtxParagraphsView extends Component {
             onCanPlay={item.handleCanPlay}
           />
         )}
-        {isFF(FF_LSDV_E_278) ? this.renderWrapperHeader() : isFF(FF_DEV_2669) && <AuthorFilter item={item} />}
+        {this.renderWrapperHeader()}
         <div
           ref={this.myRef}
           data-testid="phrases-wrapper"
@@ -606,7 +604,7 @@ class HtxParagraphsView extends Component {
             setIsInViewport={this.setIsInViewPort.bind(this)}
             item={item}
             playingId={item.playingId}
-            {...(isFF(FF_LSDV_E_278) ? { activeRef: this.activeRef } : {})}
+            activeRef={this.activeRef}
           />
         </div>
       </ObjectTag>

web/libs/editor/src/tags/object/Paragraphs/Phrases.jsx

@@ -1,9 +1,7 @@
 import { observer } from "mobx-react";
 import { getRoot } from "mobx-state-tree";
 import { Button } from "antd";
-import { PauseCircleOutlined, PlayCircleOutlined } from "@ant-design/icons";
 import styles from "./Paragraphs.module.scss";
-import { FF_LSDV_E_278, isFF } from "../../../utils/feature-flags";
 import { IconPause, IconPlay } from "@humansignal/icons";
 import { useCallback, useEffect, useState } from "react";
 
@@ -32,7 +30,7 @@
   // default function to animate the reading line
   const animateElement = useCallback(
     (element, start, duration, isPlaying = true) => {
-      if (!element || !isFF(FF_LSDV_E_278) || !item.contextscroll) return;
+      if (!element || !item.contextscroll) return;
 
       const _animationKeyFrame = element.animate([{ top: `${start}%` }, { top: "100%" }], {
         easing: "linear",
@@ -50,7 +48,7 @@
   // this function is used to animate the reading line when user seek audio
   const setSeekAnimation = useCallback(
     (isSeeking) => {
-      if (!isFF(FF_LSDV_E_278) || !item.contextscroll) return;
+      if (!item.contextscroll) return;
 
       const duration = item._value[playingId]?.duration || item._value[playingId]?.end - item._value[playingId]?.start;
       const endTime = !item._value[playingId]?.end
@@ -97,7 +95,7 @@
   );
 
   useEffect(() => {
-    if (!isFF(FF_LSDV_E_278) || !item.contextscroll) return;
+    if (!item.contextscroll) return;
 
     item.syncHandlers?.set("seek", (seek) => {
       item.handleSyncPlay(seek);
@@ -124,7 +122,7 @@
 
   // when user click on play/pause button, the useEffect will be triggered and pause or play the reading line animation
   useEffect(() => {
-    if (!isFF(FF_LSDV_E_278) || !item.contextscroll) return;
+    if (!item.contextscroll) return;
 
     if (item.playing) animationKeyFrame?.play();
     else animationKeyFrame?.pause();
@@ -134,7 +132,7 @@
   const val = item._value.map((v, idx) => {
     const isActive = playingId === idx;
     const isPlaying = isActive && item.playing;
-    const style = isFF(FF_LSDV_E_278) && !isActive ? item.layoutStyles(v).inactive : item.layoutStyles(v);
+    const style = !isActive ? item.layoutStyles(v).inactive : item.layoutStyles(v);
     const classNames = [cls.phrase];
     const isContentVisible = item.isVisibleForAuthorFilter(v);
 
@@ -156,56 +154,34 @@
         key={`${item.name}-${idx}`}
         ref={isActive ? activeRef : null}
         data-testid={`phrase:${idx}`}
-        className={`${classNames.join(" ")} ${isFF(FF_LSDV_E_278) && styles.newUI}`}
+        className={`${classNames.join(" ")} ${styles.newUI}`}
         style={style?.phrase}
       >
         {isContentVisible && withAudio && !isNaN(v.start) && (
           <Button
             type="text"
-            className={isFF(FF_LSDV_E_278) ? styles.playNewUi : styles.play}
+            className={styles.playNewUi}
             aria-label={isPlaying ? "pause" : "play"}
-            icon={
-              isPlaying ? (
-                isFF(FF_LSDV_E_278) ? (
-                  <IconPause />
-                ) : (
-                  <PauseCircleOutlined />
-                )
-              ) : isFF(FF_LSDV_E_278) ? (
-                <IconPlay />
-              ) : (
-                <PlayCircleOutlined />
-              )
-            }
+            icon={isPlaying ? <IconPause /> : <IconPlay />}
             onClick={() => {
               setIsInViewport(true);
               item.play(idx);
             }}
           />
         )}
-        {isFF(FF_LSDV_E_278) ? (
-          <span className={styles.titleWrapper} data-skip-node="true">
-            <span className={cls?.name} style={style?.name}>
-              {v[item.namekey]}
-            </span>
-            <span className={styles.time}>{withFormattedTime(item)}</span>
-          </span>
-        ) : (
-          <span className={cls?.name} data-skip-node="true" style={style?.name}>
+        <span className={styles.titleWrapper} data-skip-node="true">
+          <span className={cls?.name} style={style?.name}>
             {v[item.namekey]}
           </span>
-        )}
+          <span className={styles.time}>{withFormattedTime(item)}</span>
+        </span>
 
-        {isFF(FF_LSDV_E_278) ? (
-          <span className={styles.wrapperText}>
-            {isActive && (
-              <span ref={readingLineRef} className={`${styles.readingLine} reading-line`} data-skip-node="true" />
-            )}
-            <span className={`${cls?.text}`}>{v[item.textkey]}</span>
-          </span>
-        ) : (
+        <span className={styles.wrapperText}>
+          {isActive && (
+            <span ref={readingLineRef} className={`${styles.readingLine} reading-line`} data-skip-node="true" />
+          )}
           <span className={`${cls?.text}`}>{v[item.textkey]}</span>
-        )}
+        </span>
       </div>
     );
   });

web/libs/editor/src/tags/object/Paragraphs/__tests__/Phrases.test.tsx

@@ -3,10 +3,6 @@ import { render, screen } from "@testing-library/react";
 // @ts-ignore
 import { Phrases } from "../Phrases";
 import { getRoot } from "mobx-state-tree";
-import { mockFF } from "../../../../../__mocks__/global";
-import { FF_LSDV_E_278 } from "../../../../utils/feature-flags";
-
-const ff = mockFF();
 
 const intersectionObserverMock = () => ({
   observe: () => null,
@@ -21,16 +17,6 @@ jest.mock("mobx-state-tree", () => ({
 }));
 
 describe("Phrases Component", () => {
-  beforeAll(() => {
-    ff.setup();
-    ff.set({
-      [FF_LSDV_E_278]: true,
-    });
-  });
-  afterAll(() => {
-    ff.reset();
-  });
-
   it("renders phrases", () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -54,9 +40,10 @@ describe("Phrases Component", () => {
     };
 
     const playingId = 0;
-    const contextScroll = false;
+    const activeRef = { current: null };
+    const setIsInViewport = jest.fn();
 
-    render(<Phrases item={item} playingId={playingId} contextScroll={contextScroll} />);
+    render(<Phrases item={item} playingId={playingId} activeRef={activeRef} setIsInViewport={setIsInViewport} />);
 
     const phraseElements = screen.getAllByTestId(/^phrase:/);
     const phraseTextContext = phraseElements.map((element) => element.textContent);

web/libs/editor/src/tags/object/Paragraphs/__tests__/model.test.ts

@@ -1,12 +1,8 @@
 import { types } from "mobx-state-tree";
-import { mockFF } from "../../../../../__mocks__/global";
-import { FF_LSDV_E_278 } from "../../../../utils/feature-flags";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { ParagraphsModel } from "../model";
 
-const ff = mockFF();
-
 jest.mock("../../../../regions/ParagraphsRegion", () => ({}));
 
 const MockStore = types
@@ -43,11 +39,6 @@ const phrases = [
   },
 ];
 
-ff.setup();
-ff.set({
-  [FF_LSDV_E_278]: true,
-});
-
 describe("Paragraphs phrases", () => {
   // creating models can be a long one, so all tests will share one model
   const model = ParagraphsModel.create({ name: "phrases", value: "$phrases", contextscroll: true });
@@ -100,5 +91,4 @@ describe("Paragraphs phrases", () => {
       phrases[3].author,
     ]);
   });
-  ff.reset();
 });

web/libs/editor/src/tags/object/Paragraphs/model.js

@@ -9,7 +9,7 @@ import { SyncableMixin } from "../../../mixins/Syncable";
 import { ParagraphsRegionModel } from "../../../regions/ParagraphsRegion";
 import Utils from "../../../utils";
 import { parseValue } from "../../../utils/data";
-import { FF_DEV_2669, FF_DEV_2918, FF_LSDV_E_278, isFF } from "../../../utils/feature-flags";
+import { FF_DEV_2669, FF_DEV_2918, isFF } from "../../../utils/feature-flags";
 import messages from "../../../utils/messages";
 import { clamp, isDefined, isValidObjectURL } from "../../../utils/utilities";
 import ObjectBase from "../Base";
@@ -122,24 +122,19 @@ const Model = types
         const seed = data[self.namekey];
         const color = ColorScheme.make_color({ seed })[0];
 
-        if (isFF(FF_LSDV_E_278)) {
-          return {
+        return {
+          phrase: {
+            "--highlight-color": color,
+            "--background-color": "#FFF",
+          },
+          name: { color },
+          inactive: {
             phrase: {
-              "--highlight-color": color,
-              "--background-color": "#FFF",
-            },
-            name: { color },
-            inactive: {
-              phrase: {
-                "--highlight-color": Utils.Colors.convertToRGBA(color, 0.4),
-                "--background-color": "#FAFAFA",
-              },
-              name: { color: Utils.Colors.convertToRGBA(color, 0.9) },
+              "--highlight-color": Utils.Colors.convertToRGBA(color, 0.4),
+              "--background-color": "#FAFAFA",
             },
-          };
-        }
-        return {
-          phrase: { backgroundColor: Utils.Colors.convertToRGBA(color, 0.25) },
+            name: { color: Utils.Colors.convertToRGBA(color, 0.9) },
+          },
         };
       }
 
@@ -482,7 +477,7 @@ const ParagraphsLoadingModel = types.model().actions((self) => ({
       ]);
       return;
     }
-    const contextScroll = isFF(FF_LSDV_E_278) && self.contextscroll;
+    const contextScroll = self.contextscroll;
 
     const value = contextScroll
       ? val.sort((a, b) => {

web/libs/editor/src/utils/feature-flags.ts

@@ -57,12 +57,6 @@ export const FF_DEV_3793 = "fflag_fix_front_dev_3793_relative_coords_short";
  */
 export const FF_DEV_4174 = "fflag_fix_back_dev_4174_overlap_issue_experiments_10012023_short";
 
-/**
- * Contextual scrolling of Paragraph segments with Audio V0
- * @link https://app.launchdarkly.com/default/production/features/fflag_feat_front_lsdv_e_278_contextual_scrolling_short/targeting
- */
-export const FF_LSDV_E_278 = "fflag_feat_front_lsdv_e_278_contextual_scrolling_short";
-
 /**
  * Annotations with LLM assistance
  * @link https://app.launchdarkly.com/default/production/features/fflag_feat_all_lsdv_e_294_llm_annotations_180723_long