feat: FIT-658: Refactor Data Manager and Labeling/Review Stream Empty states to use new Empty State component (#9519)

Author: ricardoantoniocm

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

@@ -25,7 +25,7 @@ import "../../tags/Custom";
  * Utils and common components
  */
 import { Space } from "../../common/Space/Space";
-import { Button } from "@humansignal/ui";
+import { Button, EmptyState, IconCheck } from "@humansignal/ui";
 import { isStarterCloudPlan } from "@humansignal/core";
 import { cn } from "../../utils/bem";
 import { FF_BULK_ANNOTATION, FF_LSDV_4620_3_ML, FF_SIMPLE_INIT, isFF } from "../../utils/feature-flags";
@@ -81,22 +81,35 @@ class App extends Component {
   }
 
   renderSuccess() {
+    const messages = getEnv(this.props.store).messages;
     return (
       <div className={cn("editor").toClassName()}>
-        <Result status="success" title={getEnv(this.props.store).messages.DONE} />
+        <EmptyState
+          variant="positive"
+          icon={<IconCheck />}
+          title={messages.DONE}
+          description="Your annotation has been submitted."
+        />
       </div>
     );
   }
 
   renderNoAnnotation() {
+    const messages = getEnv(this.props.store).messages;
     return (
       <div className={cn("editor").toClassName()}>
-        <Result status="success" title={getEnv(this.props.store).messages.NO_COMP_LEFT} />
+        <EmptyState
+          variant="positive"
+          icon={<IconCheck />}
+          title={messages.NO_COMP_LEFT}
+          description="You've viewed all annotations for this task."
+        />
       </div>
     );
   }
 
   renderNothingToLabel(store) {
+    const messages = getEnv(this.props.store).messages;
     return (
       <div
         className={cn("editor").toClassName()}
@@ -108,18 +121,25 @@ class App extends Component {
           paddingBottom: "30vh",
         }}
       >
-        <Result status="success" title={getEnv(this.props.store).messages.NO_NEXT_TASK} />
-        <div className={cn("sub__result").toClassName()}>All tasks in the queue have been completed</div>
-        {store.taskHistory.length > 0 && (
-          <Button
-            onClick={(e) => store.prevTask(e, true)}
-            variant="neutral"
-            className="mx-0 my-4"
-            aria-label="Previous task"
-          >
-            Go to Previous Task
-          </Button>
-        )}
+        <EmptyState
+          variant="positive"
+          icon={<IconCheck />}
+          title={messages.NO_NEXT_TASK}
+          description="All tasks in the queue have been completed"
+          actions={
+            store.taskHistory.length > 0 ? (
+              <Button
+                onClick={(e) => store.prevTask(e, true)}
+                variant="primary"
+                aria-label="Previous task"
+                data-testid="editor-empty-queue-previous-task"
+              >
+                Go to Previous Task
+              </Button>
+            ) : undefined
+          }
+          data-testid="editor-empty-queue"
+        />
       </div>
     );
   }
@@ -132,7 +152,7 @@ class App extends Component {
     );
   }
 
-  renderConfigValidationException(store) {
+  renderConfigValidationException(_store) {
     return (
       <div className={cn("main-view").toClassName()}>
         <div className={cn("main-view").elem("annotation").toClassName()}>

web/libs/editor/src/utils/messages.jsx

@@ -6,7 +6,7 @@ const URL_TAGS_DOCS = "https://labelstud.io/tags";
 export default {
   DONE: "Done!",
   NO_COMP_LEFT: "No more annotations",
-  NO_NEXT_TASK: "No More Tasks Left in Queue",
+  NO_NEXT_TASK: "You're all caught up!",
   NO_ACCESS: "You don't have access to this task",
 
   CONFIRM_TO_DELETE_ALL_REGIONS: "Please confirm you want to delete all labeled regions",