fix: LEAP-409: Update files to match with monorepo monorepo

label_studio/frontend/dist/dm/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "ci: CI TEST",
-  "commit": "5d5a9bd1212a7825fb406f43842f19961bb13cda",
-  "branch": "fb-ci-test-1",
-  "date": "2023-11-21T22:30:53Z"
+  "message": "fix: LEAP-409: Update files to match with monorepo",
+  "commit": "d13d06ccbd934b640413b54c4b135e288376f3da",
+  "branch": "fb-leap-409",
+  "date": "2023-11-22T17:34:43Z"
 }

web/apps/labelstudio/.env.example

@@ -0,0 +1,2 @@
+CSS_PREFIX=[prefix for your css classes with trailing dash]
+APP_FOLDER=apps/labelstudio/

web/apps/labelstudio/project.json

@@ -36,7 +36,6 @@
             }
           ],
           "optimization": true,
-          "outputHashing": "all",
           "sourceMap": false,
           "namedChunks": false,
           "extractLicenses": true,

web/libs/datamanager/.env.example

@@ -1,4 +1,4 @@
-API_GATEWAY=http://[ls-hostname]/api/dm
-LS_ACCESS_TOKEN=[your LS token here]
+NX_API_GATEWAY=http://[ls-hostname]/api/dm
+NX_LS_ACCESS_TOKEN=[your LS token here]
 CSS_PREFIX=[prefix for your css classes with trailing dash]
 APP_FOLDER=libs/datamanager/

web/libs/datamanager/project.json

@@ -11,7 +11,7 @@
         "compiler": "babel",
         "webpackConfig": "webpack.config.js",
         "tsConfig": "libs/datamanager/tsconfig.lib.json",
-        "main": "libs/datamanager/src/index.ts",
+        "main": "libs/datamanager/src/index.js",
         "outputPath": "dist/libs/datamanager",
         "isolatedConfig": true
 

web/libs/datamanager/src/assets/icons/index.js

@@ -1,17 +1,17 @@
-export { default as LsAnnotation } from './annotation.svg';
-export { default as LsBanSquare } from './ban.svg';
-export { default as LsCheckAlt } from "./check_alt.svg";
-export { default as LsCrossAlt } from "./cross_alt.svg";
-export { default as LsSparkSquare } from './spark.svg';
-export { default as LsThumbsDown } from './thumbs_down.svg';
-export { default as LsThumbsUp } from './thumbs_up.svg';
-export { default as LsStarSquare } from  './star_square.svg';
-export { default as LSPlus } from './plus.svg';
-export { default as LsRefresh } from "./refresh.svg";
-export { default as LsGear } from "./gear.svg";
-export { default as LsGearNewUI } from "./gear_new_menu.svg";
-export { default as CommentCheck } from "./comment_check.svg";
-export { default as CommentRed } from "./comment_red.svg";
-export { default as LsGrid } from "./grid.svg";
-export { default as LsList } from "./list.svg";
-export { default as LsRefresh2 } from "./refresh2.svg";
+export { ReactComponent as LsAnnotation } from './annotation.svg';
+export { ReactComponent as LsBanSquare } from './ban.svg';
+export { ReactComponent as LsCheckAlt } from "./check_alt.svg";
+export { ReactComponent as LsCrossAlt } from "./cross_alt.svg";
+export { ReactComponent as LsSparkSquare } from './spark.svg';
+export { ReactComponent as LsThumbsDown } from './thumbs_down.svg';
+export { ReactComponent as LsThumbsUp } from './thumbs_up.svg';
+export { ReactComponent as LsStarSquare } from  './star_square.svg';
+export { ReactComponent as LSPlus } from './plus.svg';
+export { ReactComponent as LsRefresh } from "./refresh.svg";
+export { ReactComponent as LsGear } from "./gear.svg";
+export { ReactComponent as LsGearNewUI } from "./gear_new_menu.svg";
+export { ReactComponent as CommentCheck } from "./comment_check.svg";
+export { ReactComponent as CommentRed } from "./comment_red.svg";
+export { ReactComponent as LsGrid } from "./grid.svg";
+export { ReactComponent as LsList } from "./list.svg";
+export { ReactComponent as LsRefresh2 } from "./refresh2.svg";

web/libs/datamanager/src/dev.js

@@ -1,7 +1,7 @@
 import { Button } from "./components/Common/Button/Button";
 
-const API_GATEWAY = process.env.API_GATEWAY;
-const LS_ACCESS_TOKEN = process.env.LS_ACCESS_TOKEN;
+const API_GATEWAY = process.env.API_GATEWAY || process.env.NX_API_GATEWAY;
+const LS_ACCESS_TOKEN = process.env.LS_ACCESS_TOKEN || process.env.NX_LS_ACCESS_TOKEN;
 
 /**
  * @param {import("../src/sdk/dm-sdk").DataManager} DataManager

web/libs/datamanager/src/sdk/dm-sdk.js

@@ -1,4 +1,4 @@
-/** @global LSF */
+/** @global LSF * /
 
 /**
  * @typedef {{
@@ -191,14 +191,7 @@ export class DataManager {
 
     Object.assign(this.tabControls, config.tabControls ?? {});
 
-    if (config.actions) {
-      config.actions.forEach(([action, callback]) => {
-        if (!isDefined(action.id)) {
-          throw new Error("Every action must provide a unique ID");
-        }
-        this.actions.set(action.id, { action, callback });
-      });
-    }
+    this.updateActions(config.actions);
 
     this.type = config.type ?? "dm";
 
@@ -262,7 +255,10 @@ export class DataManager {
     if (!id) throw new Error("Action must provide a unique ID");
 
     this.actions.set(id, { action, callback });
-    this.store.addActions(action);
+
+    const actions = Array.from(this.actions.values()).map(({ action }) => action);
+
+    this.store?.setActions(actions);
   }
 
   removeAction(id) {
@@ -280,6 +276,17 @@ export class DataManager {
     });
   }
 
+  updateActions(actions) {
+    if (!Array.isArray(actions)) return;
+
+    actions.forEach(([action, callback]) => {
+      if (!isDefined(action.id)) {
+        throw new Error("Every action must provide a unique ID");
+      }
+      this.addAction(action, callback);
+    });
+  }
+
   registerInstrument(name, initializer) {
     if (instruments[name]) {
       return console.warn(`Can't override native instrument ${name}`);

web/libs/datamanager/src/sdk/lsf-sdk.js

@@ -332,6 +332,8 @@ export class LSFWrapper {
   }
 
   setLSFTask(task, annotationID, fromHistory) {
+    if (!this.lsf) return;
+
     const hasChangedTasks = this.lsf?.task?.id !== task?.id && task?.id;
 
     this.setLoading(true, hasChangedTasks);
@@ -488,7 +490,7 @@ export class LSFWrapper {
     if (!body.length) return;
 
     await this.datamanager.apiCall("saveUserLabels", {}, { body });
-  }
+  };
 
   async loadUserLabels() {
     if (!this.lsf?.userLabels) return;
@@ -570,7 +572,7 @@ export class LSFWrapper {
 
       this.setAnnotation(annotationID);
     }
-  }
+  };
 
   /** @private */
   onSubmitAnnotation = async () => {
@@ -639,7 +641,7 @@ export class LSFWrapper {
 
     this.task.deleteDraft(id);
     return response;
-  }
+  };
 
   /**@private */
   onDeleteAnnotation = async (ls, annotation) => {
@@ -679,7 +681,7 @@ export class LSFWrapper {
     if (status === 200 || status === 201) this.datamanager.invoke("toast", { message: "Draft saved successfully", type: "info" });
     else if (status !== undefined) this.datamanager.invoke("toast", { message: "There was an error saving your draft", type: "error" });
 
-  }
+  };
 
   saveDraft = async (target = null) => {
     const selected = target || this.lsf?.annotationStore?.selected;
@@ -805,7 +807,7 @@ export class LSFWrapper {
     const urlParam = new URLSearchParams(location.search).get('interaction');
 
     return urlParam !== 'notifications';
-  }
+  };
 
   shouldExitStream = () => {
     const paramName = "exitStream";
@@ -818,7 +820,7 @@ export class LSFWrapper {
     if (searchParams.toString()) newRelativePathQuery += '?' + searchParams.toString();
     window.history.pushState(null, '', newRelativePathQuery);
     return !!urlParam;
-  }
+  };
 
 
   // Proxy events that are unused by DM integration
@@ -832,16 +834,16 @@ export class LSFWrapper {
     } else {
       this.datamanager.invoke("onSelectAnnotation", prevAnnotation, nextAnnotation, options, this);
     }
-  }
+  };
 
   onNextTask = async (nextTaskId, nextAnnotationId) => {
     if (isFF(FF_OPTIC_2)) this.saveDraft();
     this.loadTask(nextTaskId, nextAnnotationId, true);
-  }
+  };
   onPrevTask = async (prevTaskId, prevAnnotationId) => {
     if (isFF(FF_OPTIC_2)) this.saveDraft();
     this.loadTask(prevTaskId, prevAnnotationId, true);
-  }
+  };
   async submitCurrentAnnotation(eventName, submit, includeId = false, loadNext = true, exitStream) {
     const { taskID, currentAnnotation } = this;
     const unique_id = this.task.unique_lock_id;

web/libs/datamanager/src/stores/AppStore.js

@@ -164,8 +164,9 @@ export const AppStore = types
       self.mode = mode;
     },
 
-    addActions(...actions) {
-      self.availableActions.push(...actions);
+    setActions(actions) {
+      if (!Array.isArray(actions)) throw new Error("Actions must be an array");
+      self.availableActions = actions;
     },
 
     removeAction(id) {
@@ -454,7 +455,7 @@ export const AppStore = types
         } else if (JSON.stringify(newProject ?? {}) !== JSON.stringify(self.project ?? {})) {
           self.project = newProject;
         }
-        if ( isFF(FF_LOPS_E_3) ) {
+        if (isFF(FF_LOPS_E_3)) {
           const itemType = self.SDK.type === 'DE' ? 'dataset' : 'project';
 
           self.SDK.invoke(`${itemType}Updated`, self.project);
@@ -470,7 +471,11 @@ export const AppStore = types
     fetchActions: flow(function* () {
       const serverActions = yield self.apiCall("actions");
 
-      self.addActions(...(serverActions ?? []));
+      const actions = (serverActions ?? []).map((action) => {
+        return [action, undefined];
+      });
+
+      self.SDK.updateActions(actions);
     }),
 
     fetchUsers: flow(function* () {
@@ -492,8 +497,8 @@ export const AppStore = types
       ];
 
       if (!isLabelStream || (self.project?.show_annotation_history && task)) {
-        if(self.SDK.type === 'dm') {
-          requests.push(self.fetchActions()); 
+        if (self.SDK.type === 'dm') {
+          requests.push(self.fetchActions());
         }
 
         if (self.SDK.settings?.onlyVirtualTabs && self.project?.show_annotation_history && !task) {

web/libs/editor/project.json

@@ -12,7 +12,7 @@
         "webpackConfig": "webpack.config.js",
         "index": "libs/editor/public/index.html",
         "tsConfig": "libs/editor/tsconfig.lib.json",
-        "main": "libs/editor/src/index.ts",
+        "main": "libs/editor/src/index.js",
         "outputPath": "dist/libs/editor",
         "isolatedConfig": true,
         "assets": [

web/libs/editor/src/common/Dropdown/DropdownComponent.tsx

@@ -2,7 +2,7 @@ import { cloneElement, CSSProperties, forwardRef, MouseEvent, useCallback, useCo
 import { createPortal } from 'react-dom';
 import { useFullscreen } from '../../hooks/useFullscreen';
 import { Block, cn } from '../../utils/bem';
-import { alignElements } from '../../utils/dom';
+import { alignElements, ElementAlignment } from '../../utils/dom';
 import { aroundTransition } from '../../utils/transition';
 import './Dropdown.styl';
 import { DropdownContext } from './DropdownContext';
@@ -21,6 +21,7 @@ export interface DropdownRef {
 export interface DropdownProps {
   animated?: boolean;
   visible?: boolean;
+  alignment?: ElementAlignment;
   enabled?: boolean;
   inline?: boolean;
   className?: string;
@@ -51,7 +52,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(({
   const calculatePosition = useCallback(() => {
     const dropdownEl = dropdown.current!;
     const parent = (triggerRef?.current ?? dropdownEl.parentNode) as HTMLElement;
-    const { left, top } = alignElements(parent!, dropdownEl, 'bottom-left');
+    const { left, top } = alignElements(parent!, dropdownEl, props.alignment || 'bottom-left');
 
     setOffset({ left, top });
   }, [triggerRef, minIndex]);

web/libs/editor/src/components/AnnotationsCarousel/__tests__/AnnotationButton.test.tsx

@@ -18,12 +18,12 @@ describe('AnnotationsButton', () => {
     const entity = annotationStore.annotations[0];
     const view = mount(<AnnotationButton entity={entity} capabilities={{}} annotationStore={annotationStore} />);
 
-    expect(view.find('.lsf-annotation-button__entity-id').text()).toBe(`#${entity.pk}`);
+    expect(view.find('.dm-annotation-button__entity-id').text()).toBe(`#${entity.pk}`);
   });
   test('Prediction', () => {
     const entity = annotationStore.predictions[0];
     const view = mount(<AnnotationButton entity={entity} capabilities={{}} annotationStore={annotationStore} />);
-
-    expect(view.find('.lsf-annotation-button__entity-id').text()).toBe(`#${entity.pk}`);
+    
+    expect(view.find('.dm-annotation-button__entity-id').text()).toBe(`#${entity.pk}`);
   });
 });

web/libs/editor/src/components/AnnotationsCarousel/__tests__/AnnotationsCarousel.test.tsx

@@ -16,6 +16,6 @@ jest.mock('react', () => ({
 
 test('AnnotationsCarousel', async () => {
   const view = mount(<AnnotationsCarousel annotationStore={annotationStore} store={store} />);
-
-  expect(view.find('.lsf-annotations-carousel__carosel').children().length).toBe(9);
+  
+  expect(view.find('.dm-annotations-carousel__carosel').children().length).toBe(9);
 });

web/libs/editor/src/components/App/App.js

@@ -143,7 +143,7 @@ class App extends Component {
               {this.renderRelations(as.selected)}
             </Elem>
             {(!isFF(FF_DEV_3873)) && getRoot(as).hasInterface('infobar') && this._renderInfobar(as)}
-            {as.selected.onlyTextObjects === false && (
+            {as.selected.hasSuggestionsSupport && (
               <DynamicPreannotationsControl />
             )}
           </Block>

web/libs/editor/src/components/BottomBar/Controls.js

@@ -153,11 +153,10 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
       const isDisabled = disabled || submitDisabled;
       const useExitOption = !isDisabled && isNotQuickView;
 
-
       const SubmitOption = ({ isUpdate, onClickMethod }) => {
         return (
           <Button
-            name="list-button"
+            name="submit-option"
             look="secondary"
             onClick={async (event) => {
               event.preventDefault();
@@ -208,6 +207,7 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
                 }}
                 icon={useExitOption && (
                   <Dropdown.Trigger
+                    alignment="top-right"
                     content={<SubmitOption onClickMethod={store.submitAnnotation} isUpdate={false} />}
                   >
                     <div>
@@ -243,6 +243,7 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
               }}
               icon={useExitOption && (
                 <Dropdown.Trigger
+                  alignment="top-right" 
                   content={<SubmitOption onClickMethod={store.updateAnnotation} isUpdate={isUpdate} />}
                 >
                   <div>