feat: add CTA into WIP <Board/> (#174)

Co-authored-by: Luca Tagliabue <[email protected]>
radicalbit · Oct 7, 2024 · 9580203 · 9580203
1 parent a5c93b8
commit 9580203
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git a/ui/src/container/launchpad/right/alerts.jsx b/ui/src/container/launchpad/right/alerts.jsx
@@ -1,4 +1,4 @@
-import { Board, Skeleton } from '@radicalbit/radicalbit-design-system';
+import { Board, SectionTitle, Skeleton } from '@radicalbit/radicalbit-design-system';
 import SomethingWentWrong from '@Components/ErrorPage/something-went-wrong';
 import { alertsApiSlice } from '@State/alerts/api';
 
@@ -11,7 +11,7 @@ function Alerts() {
   if (isLoading) {
     return (
       <Board
-        header="Alerts"
+        header={<SectionTitle size="small" title="Alerts" />}
         main={(
           <div className="flex flex-col gap-2">
             <Skeleton.Input active block />
@@ -28,7 +28,7 @@ function Alerts() {
   if (isError) {
     return (
       <Board
-        header="Alerts"
+        header={<SectionTitle size="small" title="Alerts" />}
         main={<SomethingWentWrong size="small" />}
         size="small"
       />
@@ -37,7 +37,7 @@ function Alerts() {
 
   return (
     <Board
-      header="Alerts"
+      header={<SectionTitle size="small" title="Alerts" />}
       main={(
         <div className="flex flex-col gap-2">
           {data.map((alert) => (

diff --git a/ui/src/container/launchpad/right/work-in-progress/index.jsx b/ui/src/container/launchpad/right/work-in-progress/index.jsx
@@ -1,6 +1,10 @@
 import SomethingWentWrong from '@Components/ErrorPage/something-went-wrong';
+import useModals from '@Hooks/use-modals';
+import { ModalsEnum } from '@Src/constants';
 import { useGetModelQueryWithPolling } from '@State/models/polling-hook';
-import { Board, DataTable, Skeleton } from '@radicalbit/radicalbit-design-system';
+import {
+  Board, Button, DataTable, SectionTitle, Skeleton, Void,
+} from '@radicalbit/radicalbit-design-system';
 import { useLocation, useNavigate } from 'react-router-dom';
 import columns from './columns';
 
@@ -15,7 +19,7 @@ function WorkInProgress() {
   if (isLoading) {
     return (
       <Board
-        header="Work in progress"
+        header={<SectionTitle size="small" title="Work in progress" />}
         main={(
           <div className="flex flex-col gap-2">
             <Skeleton.Input active block />
@@ -32,16 +36,27 @@ function WorkInProgress() {
   if (isError) {
     return (
       <Board
-        header="Work in progress"
+        header={<SectionTitle size="small" title="Work in progress" />}
         main={<SomethingWentWrong size="small" />}
         size="small"
       />
     );
   }
 
+  if (wipModels.length === 0) {
+    return (
+      <Board
+        header={<SectionTitle size="small" title="Work in progress" />}
+        height="250px"
+        main={(<AddNewModelVoid />)}
+        size="small"
+      />
+    );
+  }
+
   return (
     <Board
-      header="Work in progress"
+      header={<SectionTitle size="small" title="Work in progress" />}
       height="300px"
       main={(
         <DataTable
@@ -62,4 +77,25 @@ function WorkInProgress() {
   );
 }
 
+function AddNewModelVoid() {
+  const { showModal } = useModals();
+
+  const handleOnAddModel = () => {
+    showModal(ModalsEnum.ADD_NEW_MODEL);
+  };
+
+  return (
+    <Void
+      actions={<Button onClick={handleOnAddModel} type="default">New Model</Button>}
+      description={(
+        <>
+          Define and configure a new model
+          <br />
+          to begin monitoring its performance and gain insights.
+        </>
+      )}
+    />
+  );
+}
+
 export default WorkInProgress;