✨ Add initial walkthrough card

shared/src/types/actions.ts

@@ -9,6 +9,8 @@ export const VIEW_FIX = "VIEW_FIX";
 export const APPLY_FILE = "APPLY_FILE";
 export const DISCARD_FILE = "DISCARD_FILE";
 export const WEBVIEW_READY = "WEBVIEW_READY";
+export const OPEN_EXTENSION_WALKTHROUGH = "OPEN_EXTENSION_WALKTHROUGH";
+export const OPEN_EXTERNAL_LINK = "OPEN_EXTERNAL_LINK";
 
 export type WebviewActionType =
   | typeof SET_STATE
@@ -21,7 +23,9 @@ export type WebviewActionType =
   | typeof VIEW_FIX
   | typeof APPLY_FILE
   | typeof DISCARD_FILE
-  | typeof WEBVIEW_READY;
+  | typeof WEBVIEW_READY
+  | typeof OPEN_EXTENSION_WALKTHROUGH
+  | typeof OPEN_EXTERNAL_LINK;
 
 export interface WebviewAction<S, T> {
   type: S;

vscode/src/commands.ts

@@ -1,6 +1,6 @@
 import { ExtensionState } from "./extensionState";
 import { sourceOptions, targetOptions } from "./config/labels";
-import { window, commands, Uri, OpenDialogOptions, workspace } from "vscode";
+import { window, commands, Uri, OpenDialogOptions, workspace, extensions } from "vscode";
 import {
   cleanRuleSets,
   loadResultsFromDataFolder,
@@ -48,6 +48,17 @@ const commandsMap: (state: ExtensionState) => {
   [command: string]: (...args: any) => any;
 } = (state) => {
   return {
+    "konveyor.openExtensionWalkthrough": async () => {
+      const contributions =
+        extensions.getExtension("konveyor.konveyor-ai")?.packageJSON.contributes ?? "";
+      console.log(contributions.walkthroughs);
+      const walkthroughId = "konveyor.konveyor-ai#konveyor-setup";
+      try {
+        await commands.executeCommand("workbench.action.openWalkthrough", walkthroughId, "", true);
+      } catch (e) {
+        console.error("Failed to open walkthrough:", e);
+      }
+    },
     "konveyor.startServer": async () => {
       const analyzerClient = state.analyzerClient;
       if (!(await analyzerClient.canAnalyzeInteractive())) {

vscode/src/webviewMessageHandler.ts

@@ -5,6 +5,8 @@ import {
   DISCARD_FILE,
   GET_SOLUTION,
   LocalChange,
+  OPEN_EXTENSION_WALKTHROUGH,
+  OPEN_EXTERNAL_LINK,
   OPEN_FILE,
   RUN_ANALYSIS,
   Scope,
@@ -65,6 +67,12 @@ const actions: {
     console.log("Running analysis...");
     vscode.commands.executeCommand("konveyor.runAnalysis");
   },
+  async [OPEN_EXTERNAL_LINK]({ url }) {
+    vscode.env.openExternal(vscode.Uri.parse(url));
+  },
+  async [OPEN_EXTENSION_WALKTHROUGH]() {
+    vscode.commands.executeCommand("konveyor.openExtensionWalkthrough");
+  },
   async [OPEN_FILE]({ file, line }) {
     const fileUri = vscode.Uri.parse(file);
     try {

webview-ui/package.json

@@ -22,7 +22,7 @@
     "@patternfly/patternfly": "6.0.0-prerelease.15",
     "@patternfly/react-code-editor": "^6.0.0",
     "@patternfly/react-core": "6.0.0-prerelease.15",
-    "@patternfly/react-icons": "^5.4.0",
+    "@patternfly/react-icons": "^6.1.0",
     "@patternfly/react-table": "^5.4.1",
     "github-markdown-css": "^5.8.1",
     "path-browserify": "^1.0.1",

webview-ui/src/components/AnalysisPage/AnalysisPage.tsx

@@ -41,9 +41,12 @@
 import { ViolationsCount } from "../ViolationsCount/ViolationsCount";
 import { useViolations } from "../..//hooks/useViolations";
 import { useExtensionStateContext } from "../../context/ExtensionStateContext";
+import { useWalkthroughCard } from "../../hooks/useWalkthroughCard";
+import { WalkthroughCard } from "../WalkthroughCard/WalkthroughCard";
 
 const AnalysisPage: React.FC = () => {
   const { state, dispatch } = useExtensionStateContext();
+  const { showWalkthroughCard, closeWalkthroughCard, openWalkthroughCard } = useWalkthroughCard();
 
   const {
     isAnalyzing,
@@ -137,6 +140,9 @@
 
       <PageSection>
         <Stack hasGutter>
+          <StackItem>
+            {showWalkthroughCard !== false && <WalkthroughCard onClose={closeWalkthroughCard} />}
+          </StackItem>
           <StackItem>
             <Card>
               <CardHeader>

webview-ui/src/components/WalkthroughCard/WalkthroughCard.tsx

@@ -0,0 +1,202 @@
+import React from "react";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Button,
+  Flex,
+  FlexItem,
+  Title,
+  TitleSizes,
+  Divider,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  List,
+  ListItem,
+  Stack,
+  StackItem,
+  Label,
+  ContentVariants,
+  Content,
+} from "@patternfly/react-core";
+// import {
+//   TimesIcon,
+//   ArrowRightIcon,
+//   InfoCircleIcon,
+//   RocketIcon,
+//   ExternalLinkAltIcon,
+//   BookOpenIcon,
+//   CogIcon,
+// } from "@patternfly/react-icons";
+
+import TimesIcon from "@patternfly/react-icons/dist/esm/icons/times-icon";
+import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon";
+import InfoCircleIcon from "@patternfly/react-icons/dist/esm/icons/info-circle-icon";
+import RocketIcon from "@patternfly/react-icons/dist/esm/icons/rocket-icon";
+import ExternalLinkAltIcon from "@patternfly/react-icons/dist/esm/icons/external-link-alt-icon";
+import BookOpenIcon from "@patternfly/react-icons/dist/esm/icons/book-open-icon";
+import CogIcon from "@patternfly/react-icons/dist/esm/icons/cog-icon";
+import { useExtensionStateContext } from "../../context/ExtensionStateContext";
+
+interface WalkthroughCardProps {
+  onClose: () => void;
+}
+
+export const WalkthroughCard: React.FC<WalkthroughCardProps> = ({ onClose }) => {
+  const { state, dispatch } = useExtensionStateContext();
+
+  const handleExternalLink = (url: string) => {
+    dispatch({ type: "OPEN_EXTERNAL_LINK", payload: { url } });
+  };
+
+  return (
+    <Card
+      style={{
+        alignContent: "center",
+        alignSelf: "center",
+        margin: "auto",
+      }}
+    >
+      <CardHeader
+        actions={{
+          actions: (
+            <Button variant="plain" aria-label="Close" onClick={onClose}>
+              <TimesIcon />
+            </Button>
+          ),
+          hasNoOffset: false,
+        }}
+        style={{ padding: "16px" }}
+      >
+        <Flex alignItems={{ default: "alignItemsCenter" }}>
+          <FlexItem>
+            <RocketIcon color="#0066CC" />
+          </FlexItem>
+          <FlexItem>
+            <Title headingLevel="h3" size={TitleSizes.lg}>
+              Welcome to Konveyor AI (KAI)
+            </Title>
+          </FlexItem>
+        </Flex>
+      </CardHeader>
+      <Divider />
+      <CardBody>
+        <Stack hasGutter>
+          <StackItem>
+            <Flex>
+              <FlexItem spacer={{ default: "spacerSm" }}>
+                <InfoCircleIcon color="#0066CC" />
+              </FlexItem>
+              <FlexItem>
+                <Content component={ContentVariants.h4}>Get Started with KAI</Content>
+                <Content component={ContentVariants.p}>
+                  This extension helps you set up Konveyor AI to analyze and migrate your
+                  applications.
+                </Content>
+              </FlexItem>
+            </Flex>
+          </StackItem>
+
+          <StackItem>
+            <Panel variant="raised">
+              <PanelMain>
+                <PanelMainBody>
+                  <Stack hasGutter>
+                    <StackItem>
+                      <Content component={ContentVariants.h4}>
+                        <Flex
+                          alignItems={{ default: "alignItemsCenter" }}
+                          spaceItems={{ default: "spaceItemsSm" }}
+                        >
+                          <FlexItem>
+                            <BookOpenIcon />
+                          </FlexItem>
+                          <FlexItem>Documentation & Resources</FlexItem>
+                        </Flex>
+                      </Content>
+                    </StackItem>
+                    <StackItem>
+                      <List>
+                        <ListItem>
+                          <Button
+                            variant="link"
+                            isInline
+                            icon={<ExternalLinkAltIcon />}
+                            iconPosition="right"
+                            onClick={() =>
+                              handleExternalLink(
+                                "https://github.com/konveyor/kai/blob/main/docs/scenarios/demo.md",
+                              )
+                            }
+                          >
+                            Demo Walkthrough
+                          </Button>
+                          <Label color="blue" isCompact style={{ marginLeft: "8px" }}>
+                            Recommended
+                          </Label>
+                        </ListItem>
+                        <ListItem>
+                          <Button
+                            variant="link"
+                            isInline
+                            icon={<ExternalLinkAltIcon />}
+                            iconPosition="right"
+                            onClick={() =>
+                              handleExternalLink(
+                                "https://github.com/konveyor/kai/blob/main/docs/configuration.md",
+                              )
+                            }
+                          >
+                            IDE Configuration Guide
+                          </Button>
+                        </ListItem>
+                      </List>
+                    </StackItem>
+                  </Stack>
+                </PanelMainBody>
+              </PanelMain>
+            </Panel>
+          </StackItem>
+
+          <StackItem>
+            <Panel variant="raised">
+              <PanelMain>
+                <PanelMainBody>
+                  <Flex
+                    alignItems={{ default: "alignItemsCenter" }}
+                    spaceItems={{ default: "spaceItemsSm" }}
+                  >
+                    <FlexItem>
+                      <CogIcon color="#0066CC" />
+                    </FlexItem>
+                    <FlexItem>
+                      <Content component={ContentVariants.p}>
+                        <strong>Note:</strong> This walkthrough will guide you through setting up
+                        the extension to use KAI with your preferred LLM provider.
+                      </Content>
+                    </FlexItem>
+                  </Flex>
+                </PanelMainBody>
+              </PanelMain>
+            </Panel>
+          </StackItem>
+        </Stack>
+      </CardBody>
+      <CardFooter>
+        <Button
+          variant="plain"
+          isBlock
+          onClick={() => dispatch({ type: "OPEN_EXTENSION_WALKTHROUGH", payload: {} })}
+          icon={<ArrowRightIcon />}
+          iconPosition="right"
+        >
+          Start Walkthrough
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default WalkthroughCard;

webview-ui/src/components/WalkthroughCard/walkthroughCard.css

@@ -0,0 +1,16 @@
+.close-button {
+  display: flex;
+  grid-area: close;
+  align-items: flex-end;
+  justify-content: flex-end;
+  position: sticky;
+}
+.close-button > button {
+  padding-block-start: 0.5rem;
+  padding-block-end: 0.5rem;
+  /* background-color: transparent;
+    border: none; */
+  /* cursor: pointer; */
+  /* font-size: 1.5rem; */
+  /* color: var(--color-text); */
+}

webview-ui/src/hooks/actions.ts

@@ -67,3 +67,8 @@ export const discardFile = (
   type: "DISCARD_FILE",
   payload: change,
 });
+
+export const openExtensionWalkthrough = (): WebviewAction<WebviewActionType, unknown> => ({
+  type: "OPEN_EXTENSION_WALKTHROUGH",
+  payload: {},
+});

webview-ui/src/hooks/useWalkthroughCard.ts

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { getLocalStorage, setLocalStorage } from "../utils/localStorage";
+
+export type UseWalkthroughCard = {
+  showWalkthroughCard: boolean;
+  closeWalkthroughCard: () => void;
+  openWalkthroughCard: () => void;
+};
+
+export function useWalkthroughCard(): UseWalkthroughCard {
+  const [showWalkthroughCard, setShowWalkthroughCard] = useState<boolean>(
+    getLocalStorage("showWalkthroughCard") ?? true,
+  );
+
+  function closeWalkthroughCard() {
+    setLocalStorage("showWalkthroughCard", false);
+    setShowWalkthroughCard(false);
+  }
+
+  function openWalkthroughCard() {
+    setLocalStorage("showWalkthroughCard", true);
+    setShowWalkthroughCard(true);
+  }
+
+  return { showWalkthroughCard, closeWalkthroughCard, openWalkthroughCard };
+}
+
+export default UseWalkthroughCard;