Fix: integrations UI fixes

src/components/Chat/Chat.stories.tsx

@@ -129,7 +129,7 @@ const Template: React.FC<{
   );
 };
 
-const meta = {
+const meta: Meta<typeof Template> = {
   title: "Chat",
   component: Template,
   parameters: {
@@ -145,7 +145,7 @@ const meta = {
     },
   },
   argTypes: {},
-} satisfies Meta<typeof Template>;
+};
 
 export default meta;
 

src/components/ChatForm/ToolConfirmation.module.css

@@ -1,7 +1,7 @@
 .ToolConfirmationCard {
   position: absolute;
-  width: calc(100% - 80px);
-  bottom: 40px;
+  width: calc(100% - 100px);
+  bottom: 50px;
   left: 50%;
   transform: translateX(-50%);
 
@@ -10,7 +10,7 @@
   flex-direction: column;
   gap: 8px;
   border-radius: 8px;
-  background-color: var(--color-surface);
+  background-color: var(--gray-1);
   min-height: fit-content;
   & pre {
     margin: 0;

src/components/ChatForm/ToolConfirmation.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import type { PauseReason } from "../../features/ToolConfirmation/confirmationSlice";
-import { useEventsBusForIDE } from "../../hooks";
+import {
+  useAppDispatch,
+  // useEventsBusForIDE
+} from "../../hooks";
 import { Card, Button, Text, Flex } from "@radix-ui/themes";
 import { Markdown } from "../Markdown";
 import { Link } from "../Link";
 import styles from "./ToolConfirmation.module.css";
+import { push } from "../../features/Pages/pagesSlice";
 
 type ToolConfirmationProps = {
   pauseReasons: PauseReason[];
@@ -18,29 +22,39 @@ const getConfirmationalMessage = (
   confirmationalCommands: string[],
   denialCommands: string[],
 ) => {
-  const ruleText = `${rules.join(", ")} ${rules.length > 1 ? "rules" : "rule"}`;
+  const ruleText = `${rules.join(", ")}`;
   if (types.every((type) => type === "confirmation")) {
-    return `Following ${
-      commands.length > 1 ? "commands need" : "command needs"
-    } confirmation due to ${ruleText}.`;
+    return `${
+      commands.length > 1 ? "Commands need" : "Command needs"
+    } confirmation due to \`\`\`${ruleText}\`\`\` ${
+      rules.length > 1 ? "rules" : "rule"
+    }.`;
   } else if (types.every((type) => type === "denial")) {
-    return `Following ${
-      commands.length > 1 ? "commands were" : "command was"
-    } denied due to ${ruleText}.`;
+    return `${
+      commands.length > 1 ? "Commands were" : "Command was"
+    } denied due to \`\`\`${ruleText}\`\`\` ${
+      rules.length > 1 ? "rules" : "rule"
+    }.`;
   } else {
-    return `Following ${
-      confirmationalCommands.length > 1 ? "commands need" : "command needs"
+    return `${
+      confirmationalCommands.length > 1 ? "Commands need" : "Command needs"
     } confirmation: ${confirmationalCommands.join(", ")}.\n\nFollowing ${
       denialCommands.length > 1 ? "commands were" : "command was"
-    } denied: ${denialCommands.join(", ")}.\n\nAll due to ${ruleText}.`;
+    } denied: ${denialCommands.join(
+      ", ",
+    )}.\n\nAll due to \`\`\`${ruleText}\`\`\` ${
+      rules.length > 1 ? "rules" : "rule"
+    }.`;
   }
 };
 
 export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({
   pauseReasons,
   onConfirm,
 }) => {
-  const { openIntegrationsFile } = useEventsBusForIDE();
+  const dispatch = useAppDispatch();
+
+  // const { openIntegrationsFile } = useEventsBusForIDE();
 
   const commands = pauseReasons.map((reason) => reason.command);
   const rules = pauseReasons.map((reason) => reason.rule);
@@ -80,15 +94,15 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({
             >{`${"```bash\n"}${command}${"\n```"}`}</Markdown>
           ))}
           <Text className={styles.ToolConfirmationText}>
-            {message.concat("\n\n")}
-            <Text className={styles.ToolConfirmationText}>
-              You can modify the ruleset in{" "}
+            <Markdown>{message.concat("\n\n")}</Markdown>
+            <Text className={styles.ToolConfirmationText} mt="3">
+              You can modify the ruleset on{" "}
               <Link
                 onClick={() => {
-                  void openIntegrationsFile();
+                  dispatch(push({ name: "integrations page" }));
                 }}
               >
-                integrations.yaml
+                Configuration Page
               </Link>
             </Text>
           </Text>

src/components/IntegrationsView/IntegrationForm/IntegrationForm.tsx

@@ -20,18 +20,6 @@ import { toPascalCase } from "../../../utils/toPascalCase";
 import { debugIntegrations } from "../../../debugConfig";
 import { iconMap } from "../icons/iconMap";
 
-// TODO: should be extracted in the future
-function jsonHasWhenIsolated(
-  json: unknown,
-): json is Record<string, boolean> & { when_isolated: boolean } {
-  return (
-    typeof json === "object" &&
-    json !== null &&
-    "when_isolated" in json &&
-    typeof json.when_isolated === "boolean"
-  );
-}
-
 function areAllFieldsBoolean(json: unknown): json is Record<string, boolean> {
   return (
     typeof json === "object" &&
@@ -257,29 +245,27 @@ export const IntegrationForm: FC<IntegrationFormProps> = ({
             </Flex>
           </Flex>
         )}
-      {integration.data.integr_schema.docker &&
-        jsonHasWhenIsolated(integration.data.integr_values.available) &&
-        integration.data.integr_values.available.when_isolated && (
-          <Flex mt="6" direction="column" align="start" gap="5">
-            <Flex gap="2" align="center" justify="center" width="100%">
-              <img
-                src={iconMap.docker}
-                className={styles.DockerIcon}
-                alt={integration.data.integr_name}
-              />
-              <Heading as="h3" align="left">
-                {toPascalCase(integration.data.integr_name)} Containers
-              </Heading>
-            </Flex>
-            <IntegrationDocker
-              dockerData={integration.data.integr_schema.docker}
-              integrationName={integration.data.integr_name}
-              integrationProject={integration.data.project_path}
-              integrationPath={integration.data.integr_config_path}
-              handleSwitchIntegration={handleSwitchIntegration}
+      {integration.data.integr_schema.docker && (
+        <Flex mt="6" direction="column" align="start" gap="5">
+          <Flex gap="2" align="center" justify="center" width="100%">
+            <img
+              src={iconMap.docker}
+              className={styles.DockerIcon}
+              alt={integration.data.integr_name}
             />
+            <Heading as="h3" align="left">
+              {toPascalCase(integration.data.integr_name)} Containers
+            </Heading>
           </Flex>
-        )}
+          <IntegrationDocker
+            dockerData={integration.data.integr_schema.docker}
+            integrationName={integration.data.integr_name}
+            integrationProject={integration.data.project_path}
+            integrationPath={integration.data.integr_config_path}
+            handleSwitchIntegration={handleSwitchIntegration}
+          />
+        </Flex>
+      )}
     </Flex>
   );
 };

src/components/IntegrationsView/IntegrationsView.tsx

@@ -28,6 +28,7 @@ import {
   Integration,
   integrationsApi,
   IntegrationWithIconRecord,
+  IntegrationWithIconRecordAndAddress,
   IntegrationWithIconResponse,
   isDetailMessage,
   isNotConfiguredIntegrationWithIconRecord,
@@ -80,42 +81,78 @@ export const IntegrationsView: FC<IntegrationViewProps> = ({
   const maybeIntegration = useMemo(() => {
     if (!currentThreadIntegration) return null;
     if (!integrationsMap) return null;
+    debugIntegrations(
+      `[DEBUG]: currentThreadIntegration: `,
+      currentThreadIntegration,
+    );
     // TODO: check for extra flag in currentThreadIntegration to return different find() call from notConfiguredGrouped integrations if it's set to true
-    return (
+    const integration =
       integrationsMap.integrations.find(
         (integration) =>
-          integration.integr_config_path ===
-          currentThreadIntegration.integrationPath,
-      ) ?? null
-    );
+          currentThreadIntegration.integrationName?.startsWith("cmdline")
+            ? integration.integr_name === "cmdline_TEMPLATE"
+            : integration.integr_name ===
+              currentThreadIntegration.integrationName,
+        // integration.integr_name === currentThreadIntegration.integrationName,
+      ) ?? null;
+    if (!integration) return null;
+
+    const integrationWithFlag = {
+      ...integration,
+      shouldIntermediatePageShowUp:
+        currentThreadIntegration.shouldIntermediatePageShowUp ?? false,
+    } as IntegrationWithIconRecordAndAddress;
+    return integrationWithFlag;
   }, [currentThreadIntegration, integrationsMap]);
 
   // TBD: what if they went home then came back to integrations?
 
   const [currentIntegration, setCurrentIntegration] =
-    useState<IntegrationWithIconRecord | null>(maybeIntegration);
+    useState<IntegrationWithIconRecord | null>(
+      maybeIntegration?.shouldIntermediatePageShowUp ? null : maybeIntegration,
+    );
 
   const [currentNotConfiguredIntegration, setCurrentNotConfiguredIntegration] =
     useState<NotConfiguredIntegrationWithIconRecord | null>(null);
 
   // TODO: uncomment when ready
-  // useEffect(() => {
-  //   if (maybeIntegration) {
-  //     if (maybeIntegration.shouldBeOpenedOnIntermediatePage) {
-  //       setNotConfiguredIntegration(maybeIntegration);
-  //       setCurrentIntegration(null);
-  //     } else {
-  //       setCurrentIntegration(maybeIntegration);
-  //       setNotConfiguredIntegration(null);
-  //     }
-  //   }
-  // }, [maybeIntegration]);
-
   useEffect(() => {
     if (maybeIntegration) {
-      setCurrentIntegration(maybeIntegration);
+      if (maybeIntegration.shouldIntermediatePageShowUp) {
+        setCurrentNotConfiguredIntegration(() => {
+          const similarIntegrations = integrationsMap?.integrations.filter(
+            (integr) => integr.integr_name === maybeIntegration.integr_name,
+          );
+          if (!similarIntegrations) return null;
+          const uniqueConfigPaths = Array.from(
+            new Set(
+              similarIntegrations.map((integr) => integr.integr_config_path),
+            ),
+          );
+          const uniqueProjectPaths = Array.from(
+            new Set(similarIntegrations.map((integr) => integr.project_path)),
+          );
+
+          uniqueProjectPaths.sort((a, _b) => (a === "" ? -1 : 1));
+          uniqueConfigPaths.sort((a, _b) => (a.includes(".config") ? -1 : 1));
+
+          const integrationToConfigure: NotConfiguredIntegrationWithIconRecord =
+            {
+              ...maybeIntegration,
+              integr_config_path: uniqueConfigPaths,
+              project_path: uniqueProjectPaths,
+              integr_config_exists: false,
+            };
+
+          return integrationToConfigure;
+        });
+        setCurrentIntegration(null);
+      } else {
+        setCurrentIntegration(maybeIntegration);
+        setCurrentNotConfiguredIntegration(null);
+      }
     }
-  }, [maybeIntegration]);
+  }, [maybeIntegration, integrationsMap?.integrations]);
 
   const [currentIntegrationSchema, setCurrentIntegrationSchema] = useState<
     Integration["integr_schema"] | null

src/components/SmartLink/SmartLink.tsx

@@ -26,7 +26,7 @@ export const SmartLink: FC<{
 
   const handleClick = useCallback(() => {
     if (sl_goto) {
-      handleGoTo(sl_goto);
+      handleGoTo({ goto: sl_goto });
       return;
     }
     if (sl_chat) {

src/features/Chat/Thread/types.ts

@@ -6,6 +6,7 @@ export type IntegrationMeta = {
   name?: string;
   path?: string;
   project?: string;
+  shouldIntermediatePageShowUp?: boolean;
 };
 export type ChatThread = {
   id: string;

src/features/History/historySlice.ts

@@ -77,6 +77,7 @@ export const historySlice = createSlice({
           : getFirstUserContentFromChat(action.payload.messages),
         createdAt: action.payload.createdAt ?? now,
         updatedAt: now,
+        integration: null,
         isTitleGenerated: action.payload.isTitleGenerated,
       };
 

src/features/Pages/pagesSlice.ts

@@ -59,6 +59,7 @@ export interface IntegrationsSetupPage {
   projectPath?: string;
   integrationName?: string;
   integrationPath?: string;
+  shouldIntermediatePageShowUp?: boolean;
 }
 
 export type Page =

src/hooks/useGoToLink.ts

@@ -5,14 +5,15 @@ import { useAppDispatch } from "./useAppDispatch";
 import { popBackTo } from "../features/Pages/pagesSlice";
 import { useAppSelector } from "./useAppSelector";
 import { selectIntegration } from "../features/Chat/Thread/selectors";
+import { debugIntegrations } from "../debugConfig";
 
 export function useGoToLink() {
   const dispatch = useAppDispatch();
   const { queryPathThenOpenFile } = useEventsBusForIDE();
   const maybeIntegration = useAppSelector(selectIntegration);
 
   const handleGoTo = useCallback(
-    (goto?: string) => {
+    ({ goto }: { goto?: string }) => {
       if (!goto) return;
       // TODO:  duplicated in smart links.
       const [action, payload] = goto.split(":");
@@ -24,16 +25,25 @@ export function useGoToLink() {
         }
         case "settings": {
           const isFile = isAbsolutePath(payload);
+          debugIntegrations(`[DEBUG]: maybeIntegration: `, maybeIntegration);
+          if (!maybeIntegration) {
+            debugIntegrations(`[DEBUG]: integration data is not available.`);
+            return;
+          }
           dispatch(
             popBackTo({
               name: "integrations page",
               // projectPath: isFile ? payload : "",
               integrationName:
                 !isFile && payload !== "DEFAULT"
                   ? payload
-                  : maybeIntegration?.name,
-              integrationPath: isFile ? payload : maybeIntegration?.path,
-              projectPath: maybeIntegration?.project,
+                  : maybeIntegration.name,
+              integrationPath: isFile ? payload : maybeIntegration.path,
+              projectPath: maybeIntegration.project,
+              shouldIntermediatePageShowUp:
+                payload !== "DEFAULT"
+                  ? maybeIntegration.shouldIntermediatePageShowUp
+                  : false,
             }),
           );
           // TODO: open in the integrations
@@ -48,9 +58,11 @@ export function useGoToLink() {
     },
     [
       dispatch,
-      maybeIntegration?.name,
-      maybeIntegration?.path,
-      maybeIntegration?.project,
+      // maybeIntegration?.name,
+      // maybeIntegration?.path,
+      // maybeIntegration?.project,
+      // maybeIntegration?.shouldIntermediatePageShowUp,
+      maybeIntegration,
       queryPathThenOpenFile,
     ],
   );