Merge pull request #445 from DrDroidLab/@hotfix/teething-ui-issues

@hotfix/teething UI issues

web/src/App.tsx

@@ -4,11 +4,7 @@ import RequireAuth from "./components/RequireAuth";
 import "nprogress/nprogress.css";
 import { useGetUserQuery } from "./store/features/auth/api";
 import Loading from "./components/common/Loading";
-import {
-  generateNoLayoutRoutes,
-  generateOtherRoutes,
-  generateUnauthRoutes,
-} from "./generateRoutes";
+import { generateOtherRoutes, generateUnauthRoutes } from "./generateRoutes";
 import useDefaultPage from "./hooks/useDefaultPage";
 
 const App = () => {
@@ -24,7 +20,7 @@ const App = () => {
     <Routes key={location.pathname} location={location}>
       {generateUnauthRoutes()}
 
-      <Route element={<RequireAuth />}>{generateNoLayoutRoutes()}</Route>
+      {/* <Route element={<RequireAuth />}>{generateNoLayoutRoutes()}</Route> */}
 
       <Route element={<RequireAuth />}>
         <Route element={<Layout />}>{generateOtherRoutes()}</Route>

web/src/components/Heading.tsx

@@ -20,13 +20,13 @@ const Heading = ({ subHeading = "", heading }) => {
         style={{ zIndex: "90" }}
         className="w-full h-[80px] top-0 py-3 flex justify-between bg-white border-b border-gray-300 px-4 items-center sticky">
         <div className="flex gap-2 items-center">
-          {isOnPlaybookPage && (
+          {/* {isOnPlaybookPage && (
             <div
               className="cursor-pointer text-xl font-bold hover:text-violet-500 transition-all"
               onClick={goBack}>
               <HomeRounded />
             </div>
-          )}
+          )} */}
           <div className="flex-col justify-items-center">
             <div>
               <div className="text-xs sm:text-lg font-semibold text-gray-800">

web/src/components/Playbooks/create/Builder.tsx

@@ -2,21 +2,11 @@ import CreateFlow from "./CreateFlow.js";
 import GlobalVariables from "../../common/GlobalVariable/index.js";
 import AddDataDrawer from "../../common/Drawers/AddDataDrawer.js";
 import TemplatesDrawer from "../../common/Drawers/TemplatesDrawer.js";
-import useDrawerState from "../../../hooks/common/useDrawerState.ts";
-import { DrawerTypes } from "../../../store/features/drawers/drawerTypes.ts";
-import CustomButton from "../../common/CustomButton/index.tsx";
-
-function Builder({ isLog = false }) {
-  const { toggle: toggleAddData } = useDrawerState(DrawerTypes.ADD_DATA);
 
+function Builder() {
   return (
     <div className="h-full w-full">
       <div className="absolute top-2 left-2 flex flex-col items-start gap-4 z-10">
-        {!isLog && (
-          <>
-            <CustomButton onClick={toggleAddData}>Add Data</CustomButton>
-          </>
-        )}
         <GlobalVariables />
       </div>
       <AddDataDrawer />

web/src/components/Playbooks/task/TaskBlock.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { fetchData } from "../../../utils/fetchAssetModelOptions.ts";
-import CustomButton from "../../common/CustomButton/index.tsx";
 import Details from "./Details.tsx";
 import HandleOutput from "./HandleOutput.tsx";
 import useIsPrefetched from "../../../hooks/playbooks/useIsPrefetched.ts";
@@ -10,17 +9,8 @@ import TaskConfiguration from "./taskConfiguration";
 const TaskBlock = ({ id }) => {
   const [task, currentStepId] = useCurrentTask(id);
   const showOutput = task?.ui_requirement?.showOutput;
-  const [showConfig, setShowConfig] = useState(!showOutput);
   const isPrefetched = useIsPrefetched();
 
-  const toggleConfig = () => {
-    setShowConfig(!showConfig);
-  };
-
-  useEffect(() => {
-    setShowConfig(!showOutput);
-  }, [showOutput]);
-
   useEffect(() => {
     if (
       currentStepId !== null &&
@@ -41,12 +31,7 @@ const TaskBlock = ({ id }) => {
 
   return (
     <div className="flex flex-col gap-2 mt-2">
-      {showOutput && (
-        <CustomButton className="w-fit" onClick={toggleConfig}>
-          {showConfig ? "Hide" : "Show"} Config
-        </CustomButton>
-      )}
-      {showConfig && task && <Details id={id} />}
+      {task && <Details id={id} />}
 
       <TaskConfiguration id={id} />
       <HandleOutput id={id} />

web/src/components/RequireAuth.tsx

@@ -14,6 +14,11 @@ const RequireAuth = () => {
   const location = useLocation();
   const { isOpen, toggle } = useToggle(true);
 
+  const handleClose = () => {
+    window.location.reload();
+    toggle();
+  };
+
   return (
     <>
       <FakeLoading />
@@ -23,7 +28,9 @@ const RequireAuth = () => {
         <Navigate to="/signup" state={{ from: location }} replace />
       )}
 
-      {!lastLogin && <RecieveUpdatesModal close={toggle} isOpen={isOpen} />}
+      {/* {!lastLogin && (
+        <RecieveUpdatesModal close={handleClose} isOpen={isOpen} />
+      )} */}
     </>
   );
 };

web/src/generateRoutes.tsx

@@ -36,23 +36,23 @@ export const generateUnauthRoutes = () => {
     ));
 };
 
-export const generateNoLayoutRoutes = () => {
-  return Object.entries(components)
-    .filter(([pageKey]) => noLayoutPages.includes(pageKey as PageKeys))
-    .map(([pageKey, importFn]) => (
-      <Route
-        key={pageKey}
-        path={routes[pageKey]}
-        element={<LazyComponent importFn={importFn} />}
-      />
-    ));
-};
+// export const generateNoLayoutRoutes = () => {
+//   return Object.entries(components)
+//     .filter(([pageKey]) => noLayoutPages.includes(pageKey as PageKeys))
+//     .map(([pageKey, importFn]) => (
+//       <Route
+//         key={pageKey}
+//         path={routes[pageKey]}
+//         element={<LazyComponent importFn={importFn} />}
+//       />
+//     ));
+// };
 
 export const generateOtherRoutes = () => {
   return Object.entries(components)
     .filter(
       ([pageKey]) =>
-        !noLayoutPages.includes(pageKey as PageKeys) &&
+        // !noLayoutPages.includes(pageKey as PageKeys) &&
         !unAuthPages.includes(pageKey as PageKeys),
     )
     .map(([pageKey, importFn]) => (

web/src/pages/playbooks/Playbook.tsx

@@ -77,7 +77,7 @@ function Playbook() {
       <Heading heading={"Untitled Playbook"} />
       <div className="flex h-[calc(100%-80px)]">
         <main className="relative flex flex-1">
-          <Builder isLog={!!isPrefetched} />
+          <Builder />
           {!isEditing && (
             <div
               className={`${

web/src/pages/playbooks/PlaybookLog.tsx

@@ -60,7 +60,7 @@ function PlaybookLog() {
       <Heading heading={playbook.name} />
       <div className="flex flex-col h-[calc(100%-80px)]">
         <main className="relative flex flex-1">
-          <Builder isLog={true} />
+          <Builder />
         </main>
       </div>
     </div>

web/src/utils/execution/executeStep.ts

@@ -13,6 +13,21 @@ import checkId from "../common/checkId.ts";
 import { Task } from "../../types/index.ts";
 import { updateCardById } from "./updateCardById.ts";
 import { extractTimeFromHours } from "../../components/Playbooks/task/taskConfiguration/comparison/utils/extractTimeFromHours.ts";
+import { setCurrentVisibleStepFunction } from "../playbook/step/setCurrentVisibleStepFunction.ts";
+
+const handleOutput = (output: any, list: any[], id: string | undefined) => {
+  const outputError = output?.result?.error;
+  list.push({
+    data: { ...output?.result, timestamp: output?.timestamp },
+    interpretation: output?.interpretation,
+    execution_global_variable_set: output?.execution_global_variable_set,
+    error: outputError ? outputError : undefined,
+  });
+  if (outputError) {
+    updateCardById("ui_requirement.showError", true, id);
+    updateCardById("ui_requirement.outputError", true, id);
+  }
+};
 
 export async function executeStep(id?: string) {
   const { executionId, currentPlaybook } = playbookSelector(store.getState());
@@ -101,20 +116,13 @@ export async function executeStep(id?: string) {
       const list: any = [];
       const taskId: Task | string | undefined = step?.tasks[index];
       const id = typeof taskId === "string" ? taskId : taskId?.id;
-
-      outputs.forEach((output) => {
-        const outputError = output?.result?.error;
-        list.push({
-          data: { ...output?.result, timestamp: output?.timestamp },
-          interpretation: output?.interpretation,
-          execution_global_variable_set: output?.execution_global_variable_set,
-          error: outputError ? outputError : undefined,
+      if (Array.isArray(outputs)) {
+        outputs.forEach((output) => {
+          handleOutput(output, list, id);
         });
-        if (outputError) {
-          updateCardById("ui_requirement.showError", true, id);
-          updateCardById("ui_requirement.outputError", true, id);
-        }
-      });
+      } else {
+        handleOutput(outputs, list, id);
+      }
 
       updateCardById("ui_requirement.outputs", list, id);
     });
@@ -154,5 +162,7 @@ export async function executeStep(id?: string) {
       updateCardById("ui_requirement.outputLoading", false, task?.id);
       updateCardById("ui_requirement.showOutput", true, task?.id);
     });
+
+    if (!executionId) setCurrentVisibleStepFunction(currentStepId);
   }
 }

web/src/utils/execution/executeTask.ts

@@ -10,6 +10,7 @@ import checkId from "../common/checkId.ts";
 import updateStepById from "../playbook/step/updateStepById.ts";
 import { executionBulkTaskExecute } from "../../store/features/playbook/api/executions/executionBulkTaskExecuteApi.ts";
 import { extractTimeFromHours } from "../../components/Playbooks/task/taskConfiguration/comparison/utils/extractTimeFromHours.ts";
+import { setCurrentVisibleTaskFunction } from "../playbook/task/setCurrentVisibleTaskFunction.ts";
 
 export async function executeTask(id?: string) {
   const [task] = getCurrentTask(id);
@@ -111,5 +112,6 @@ export async function executeTask(id?: string) {
 
     updateStepById("ui_requirement.showOutput", true, stepId);
     updateStepById("ui_requirement.outputLoading", false, stepId);
+    setCurrentVisibleTaskFunction(id ?? "");
   }
 }

web/src/utils/pages/noLayoutPages.ts

@@ -1,8 +1,8 @@
 import { PageKeys } from "../../pageKeys";
 
 export const noLayoutPages = [
-  PageKeys.PLAYBOOKS_CREATE,
-  PageKeys.PLAYBOOK_VIEW,
-  PageKeys.PLAYBOOK_LOGS,
-  PageKeys.PLAYBOOK_EDIT,
+  // PageKeys.PLAYBOOKS_CREATE,
+  // PageKeys.PLAYBOOK_VIEW,
+  // PageKeys.PLAYBOOK_LOGS,
+  // PageKeys.PLAYBOOK_EDIT,
 ];

web/src/utils/playbook/handleToolLogos.ts

@@ -10,9 +10,12 @@ const handleImageSrc = (
     case SOURCES.TEXT:
       if (task_type === SOURCES.IFRAME) {
         return cardsData.find((e) => e.enum === SOURCES.IFRAME)?.url;
+      } else {
+        return (
+          cardsData.find((e) => e.enum === source?.replace("_VPC", ""))?.url ??
+          cardsData.find((e) => model_type?.includes(e.enum))?.url
+        );
       }
-      break;
-    // eslint-disable-next-line no-fallthrough
     default:
       return (
         cardsData.find((e) => e.enum === source?.replace("_VPC", ""))?.url ??

web/src/utils/playbook/step/setCurrentVisibleStepFunction.ts

@@ -0,0 +1,11 @@
+import { store } from "../../../store";
+import { setPermanentView } from "../../../store/features/drawers/drawersSlice";
+import { PermanentDrawerTypes } from "../../../store/features/drawers/permanentDrawerTypes";
+import { setCurrentVisibleStep } from "../../../store/features/playbook/playbookSlice";
+
+const stepDetailsId = PermanentDrawerTypes.STEP_DETAILS;
+
+export const setCurrentVisibleStepFunction = (id: string) => {
+  store.dispatch(setCurrentVisibleStep(id));
+  store.dispatch(setPermanentView(stepDetailsId));
+};

web/src/utils/playbook/task/setCurrentVisibleTaskFunction.ts

@@ -0,0 +1,11 @@
+import { store } from "../../../store";
+import { setPermanentView } from "../../../store/features/drawers/drawersSlice";
+import { PermanentDrawerTypes } from "../../../store/features/drawers/permanentDrawerTypes";
+import { setCurrentVisibleTask } from "../../../store/features/playbook/playbookSlice";
+
+const taskDetailsId = PermanentDrawerTypes.TASK_DETAILS;
+
+export const setCurrentVisibleTaskFunction = (id: string) => {
+  store.dispatch(setCurrentVisibleTask(id));
+  store.dispatch(setPermanentView(taskDetailsId));
+};