From 88aba0cda9d53ecc46ab69c3057581de67a1b03c Mon Sep 17 00:00:00 2001
From: hlomzik <hlomzik@gmail.com>
Date: Mon, 21 Oct 2024 10:29:35 +0100
Subject: [PATCH] fix: LEAP-1449: Don't highlight instructions button (#6522)

---
 .../src/components/Label/LabelButtons.js      |  83 ---------
 .../src/components/Label/Toolbar/Toolbar.jsx  | 172 ------------------
 .../src/components/Label/Toolbar/Toolbar.scss |  30 ---
 .../src/components/BottomBar/Actions.jsx      |   1 -
 4 files changed, 286 deletions(-)
 delete mode 100644 web/libs/datamanager/src/components/Label/LabelButtons.js
 delete mode 100644 web/libs/datamanager/src/components/Label/Toolbar/Toolbar.jsx
 delete mode 100644 web/libs/datamanager/src/components/Label/Toolbar/Toolbar.scss

diff --git a/web/libs/datamanager/src/components/Label/LabelButtons.js b/web/libs/datamanager/src/components/Label/LabelButtons.js
deleted file mode 100644
index 28d95b55723..00000000000
--- a/web/libs/datamanager/src/components/Label/LabelButtons.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Component } from "react";
-import ReactDOM from "react-dom";
-
-export class LabelButtons extends Component {
-  state = {
-    element: null,
-  };
-
-  /** @type {MutationObserver} */
-  observer = null;
-
-  componentDidMount() {
-    const target = this.target;
-
-    if (target) {
-      this.updateElement(target);
-    }
-  }
-
-  componentDidUpdate() {
-    if (!this.observer && this.target) {
-      const target = this.target;
-
-      this.observer = new MutationObserver(() => {
-        this.updateElement(target);
-      });
-
-      this.observer.observe(target, {
-        childList: true,
-        subtree: true,
-      });
-
-      this.updateElement(target);
-    }
-  }
-
-  componentWillUnmount() {
-    this.setState({ element: null });
-    this.observer.disconnect();
-  }
-
-  render() {
-    const { children } = this.props;
-    const { element } = this.state;
-
-    return element ? ReactDOM.createPortal(children, element) : null;
-  }
-
-  updateElement(target) {
-    const panel = target.querySelector(".ls-panel");
-
-    if (panel && !this.isConnected) {
-      this.createButtonsWrapper(panel);
-    } else if (panel === undefined) {
-      this.setState({ element: null });
-    }
-  }
-
-  /**
-   * Create a wrapper for the portal
-   * @param {HTMLElement} root
-   */
-  createButtonsWrapper(root) {
-    /** @type {HTMLElement} */
-    const child = root.childNodes[0];
-    const className = child.getAttribute("class");
-
-    const wrapper = document.createElement("div");
-
-    wrapper.setAttribute("class", className);
-
-    child.after(wrapper);
-    this.setState({ element: wrapper });
-  }
-
-  get target() {
-    return this.props.root.current;
-  }
-
-  get isConnected() {
-    return this.state.element?.isConnected === true;
-  }
-}
diff --git a/web/libs/datamanager/src/components/Label/Toolbar/Toolbar.jsx b/web/libs/datamanager/src/components/Label/Toolbar/Toolbar.jsx
deleted file mode 100644
index 73e505cd642..00000000000
--- a/web/libs/datamanager/src/components/Label/Toolbar/Toolbar.jsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import { observer } from "mobx-react";
-import React from "react";
-import {
-  FaArrowLeft,
-  FaArrowRight,
-  FaBan,
-  FaCheck,
-  FaCheckCircle,
-  FaCog,
-  FaInfoCircle,
-  FaRedo,
-  FaTrashAlt,
-  FaUndo,
-} from "react-icons/fa";
-import { useShortcut } from "../../../sdk/hotkeys";
-import { Block, Elem } from "../../../utils/bem";
-import { Button } from "../../Common/Button/Button";
-import { Icon } from "../../Common/Icon/Icon";
-import { Space } from "../../Common/Space/Space";
-import { Tooltip } from "../../Common/Tooltip/Tooltip";
-import "./Toolbar.scss";
-
-const TOOLTIP_DELAY = 0.8;
-
-export const Toolbar = observer(({ view, history, lsf, isLabelStream, hasInstruction }) => {
-  const annotation = lsf?.annotationStore?.selected;
-
-  const task = view.dataStore.selected;
-
-  const { viewingAll: viewAll } = lsf?.annotationStore ?? {};
-
-  return lsf?.noTask === false && task ? (
-    <Block name="label-toolbar" mod={{ labelStream: isLabelStream }}>
-      <Elem name="task">
-        <Space size="large">
-          <div style={{ display: "flex", alignItems: "center" }}>
-            <History history={history}>
-              <div style={{ margin: history ? "0 10px" : 0 }}>Task #{task.id}</div>
-            </History>
-          </div>
-
-          {!viewAll && <LSFOperations history={annotation?.history} />}
-        </Space>
-      </Elem>
-
-      {!!lsf && !!annotation && annotation.type === "annotation" && (
-        <Elem name="actions">
-          {!viewAll && (
-            <SubmissionButtons
-              lsf={lsf}
-              annotation={annotation}
-              isLabelStream={isLabelStream}
-              disabled={lsf.isLoading}
-            />
-          )}
-
-          <Elem name="tools">
-            <Space>
-              {hasInstruction && (
-                <Tooltip title="Labeling Instructions">
-                  <Button
-                    look={lsf.showingDescription ? "primary" : "dashed"}
-                    icon={<Icon icon={FaInfoCircle} />}
-                    onClick={() => lsf.toggleDescription()}
-                  />
-                </Tooltip>
-              )}
-
-              <Tooltip title="Settings">
-                <Button look="dashed" icon={<Icon icon={FaCog} />} onClick={() => lsf.toggleSettings()} />
-              </Tooltip>
-            </Space>
-          </Elem>
-        </Elem>
-      )}
-    </Block>
-  ) : null;
-});
-
-const LSFOperations = observer(({ history }) => {
-  useShortcut("lsf.undo", () => history?.undo(), {}, [history]);
-  useShortcut("lsf.redo", () => history?.redo(), {}, [history]);
-
-  return history ? (
-    <Button.Group>
-      <Button icon={<Icon icon={FaUndo} />} disabled={!history.canUndo} onClick={() => history.undo()} />
-      <Button icon={<Icon icon={FaRedo} />} disabled={!history.canRedo} onClick={() => history.redo()} />
-      <Button icon={<Icon icon={FaTrashAlt} />} disabled={!history.canUndo} onClick={() => history.reset()} />
-    </Button.Group>
-  ) : null;
-});
-
-const SubmissionButtons = observer(({ lsf, annotation, isLabelStream, disabled }) => {
-  const { userGenerate, sentUserGenerate } = annotation;
-  const isNewTask = userGenerate && !sentUserGenerate;
-
-  const saveAnnotation = React.useCallback(() => {
-    if (!disabled) {
-      isNewTask ? lsf.submitAnnotation() : lsf.updateAnnotation();
-    }
-  }, [disabled, isNewTask, lsf]);
-
-  const skipTask = React.useCallback(() => {
-    if (!disabled) {
-      lsf.skipTask();
-    }
-  }, [disabled, lsf]);
-
-  const buttons = [];
-
-  const submitShortcut = useShortcut("lsf.save-annotation", saveAnnotation, { showShortcut: true }, [disabled]);
-  const rejectShortcut = useShortcut("lsf.reject-task", skipTask, { showShortcut: true }, [disabled]);
-
-  buttons.push(
-    <Tooltip key="skip" title={rejectShortcut} mouseEnterDelay={TOOLTIP_DELAY}>
-      <Button look="danger" onClick={skipTask} disabled={disabled} icon={<Icon icon={FaBan} />}>
-        Skip
-      </Button>
-    </Tooltip>,
-  );
-
-  buttons.push(
-    <Tooltip key="submit" title={submitShortcut} mouseEnterDelay={TOOLTIP_DELAY}>
-      <Button
-        look="primary"
-        disabled={disabled}
-        icon={<Icon icon={isNewTask ? FaCheck : FaCheckCircle} />}
-        onClick={saveAnnotation}
-      >
-        {isNewTask || isLabelStream ? "Submit" : "Update"}
-      </Button>
-    </Tooltip>,
-  );
-
-  return <Space>{buttons}</Space>;
-});
-
-const HistoryButton = ({ children, ...rest }) => (
-  <Button {...rest} shape="circle">
-    {children}
-  </Button>
-);
-
-/**
- *
- * @param {{root: HTMLElement, history: import("../../../sdk/lsf-history").LSFHistory}} param0
- */
-const History = observer(({ history, children }) => {
-  const [canGoBack, setGoBack] = React.useState(false);
-  const [canGoForward, setGoForward] = React.useState(false);
-  const [renderable, setRenderable] = React.useState(false);
-
-  React.useEffect(() => {
-    if (history) {
-      history.onChange(() => {
-        setGoBack(history.canGoBack);
-        setGoForward(history.canGoForward);
-      });
-      setRenderable(true);
-    }
-  }, [history]);
-
-  return renderable ? (
-    <React.Fragment>
-      <HistoryButton disabled={!canGoBack} onClick={() => history.goBackward()} icon={<Icon icon={FaArrowLeft} />} />
-      {children}
-      <HistoryButton disabled={!canGoForward} onClick={() => history.goForward()} icon={<Icon icon={FaArrowRight} />} />
-    </React.Fragment>
-  ) : (
-    children
-  );
-});
diff --git a/web/libs/datamanager/src/components/Label/Toolbar/Toolbar.scss b/web/libs/datamanager/src/components/Label/Toolbar/Toolbar.scss
deleted file mode 100644
index 752d1b3131b..00000000000
--- a/web/libs/datamanager/src/components/Label/Toolbar/Toolbar.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.label-toolbar {
-  flex-shrink: 0;
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-  padding: 13px 1em;
-  justify-content: space-between;
-  background-color: #f0f0f0;
-
-  &_labelStream {
-    padding: 0;
-    flex: 1;
-  }
-
-  &__actions,
-  &__tools {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  &__actions {
-    padding-left: 10px;
-  }
-
-  &__tools {
-    max-width: 320px;
-    margin-left: 20px;
-  }
-}
diff --git a/web/libs/editor/src/components/BottomBar/Actions.jsx b/web/libs/editor/src/components/BottomBar/Actions.jsx
index 9dca8cedee8..abe8ccf4cc4 100644
--- a/web/libs/editor/src/components/BottomBar/Actions.jsx
+++ b/web/libs/editor/src/components/BottomBar/Actions.jsx
@@ -21,7 +21,6 @@ export const Actions = ({ store }) => {
         <Tooltip placement="topLeft" title="Show instructions">
           <Button
             icon={<IconInfoOutline style={{ width: 20, height: 20 }} />}
-            primary={store.showingDescription}
             type="text"
             aria-label="Instructions"
             onClick={() => store.toggleDescription()}