feat: add view mode (stacked / code)

webui/graphql.schema.json

@@ -912,6 +912,55 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "exportActions",
+            "description": null,
+            "args": [
+              {
+                "name": "plateform",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "projectId",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "ID",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "getRun",
             "description": null,

webui/package.json

@@ -42,6 +42,7 @@
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",
     "graphql": "15.7.2",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",
@@ -69,6 +70,7 @@
     "@storybook/react": "^7.6.13",
     "@storybook/react-vite": "^7.6.13",
     "@storybook/test": "^7.6.13",
+    "@types/prismjs": "^1.26.4",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/wicg-file-system-access": "^2023.10.5",

webui/src/Components/Header/Header.tsx

@@ -24,6 +24,7 @@ const Header: FC<HeaderProps> = (props) => {
               display: "flex",
               flexDirection: "row",
               alignItems: "center",
+              flex: 1,
             },
           },
           ListItem: {

webui/src/Components/Header/styles.tsx

@@ -86,6 +86,10 @@ export default {
           ListItem: {
             style: ({ $theme }: { $theme: { primaryFontFamily: string } }) => ({
               fontFamily: $theme.primaryFontFamily,
+              color: "#fff",
+              ":hover": {
+                color: "rgb(36, 255, 181)",
+              },
             }),
           },
         },

webui/src/Containers/Project/MainContent/Composer/CodePreview/CodePreview.tsx

@@ -0,0 +1,30 @@
+import { FC, useEffect } from "react";
+import Prism from "prismjs";
+import "prismjs/components/prism-yaml";
+import "prismjs/themes/prism-funky.css";
+import PlateformSelect from "./PlateformSelect";
+import Menu from "./Menu";
+
+export type CodePreviewProps = {
+  code: string;
+};
+
+const CodePreview: FC<CodePreviewProps> = ({ code }) => {
+  useEffect(() => {
+    Prism.highlightAll();
+  }, [code]);
+
+  return (
+    <>
+      <PlateformSelect />
+      <div className="Code" style={{ marginTop: 50 }}>
+        <pre style={{ position: "relative" }}>
+          <Menu />
+          <code className="language-yaml">{code}</code>
+        </pre>
+      </div>
+    </>
+  );
+};
+
+export default CodePreview;

webui/src/Containers/Project/MainContent/Composer/CodePreview/CodePreviewState.tsx

@@ -0,0 +1,7 @@
+import { atom } from "recoil";
+import { code } from "./mocks";
+
+export const CodePreviewState = atom<string>({
+  key: "CodePreviewState",
+  default: code,
+});

webui/src/Containers/Project/MainContent/Composer/CodePreview/CodePreviewWithData.tsx

@@ -0,0 +1,35 @@
+import { FC, useEffect } from "react";
+import CodePreview from "./CodePreview";
+import { useRecoilState, useRecoilValue } from "recoil";
+import { CodePreviewState } from "./CodePreviewState";
+import { PlateformSelectState } from "./PlateformSelect/PlateformSelectState";
+import { useParams } from "react-router-dom";
+import { useExportActionsLazyQuery } from "../../../../../Hooks/GraphQL";
+
+const CodePreviewWithData: FC = () => {
+  const { id } = useParams();
+  const plateform = useRecoilValue(PlateformSelectState);
+  const [code, setCode] = useRecoilState(CodePreviewState);
+  const [exportActions] = useExportActionsLazyQuery({
+    variables: {
+      projectId: id!,
+      plateform: plateform[0].id,
+    },
+  });
+
+  useEffect(() => {
+    exportActions({
+      variables: {
+        projectId: id!,
+        plateform: plateform[0].id,
+      },
+    }).then(({ data }) => {
+      setCode(data?.exportActions || "");
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [plateform]);
+
+  return <CodePreview code={code} />;
+};
+
+export default CodePreviewWithData;

webui/src/Containers/Project/MainContent/Composer/CodePreview/Menu/Menu.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react";
+import { Download } from "@styled-icons/bootstrap";
+import { Copy } from "@styled-icons/ionicons-outline";
+import { Button, Container } from "./styles";
+
+export type MenuProps = {
+  onDownload: () => void;
+  onCopy: () => void;
+};
+
+const Menu: FC<MenuProps> = ({ onCopy, onDownload }) => {
+  return (
+    <Container>
+      <Button onClick={onCopy}>
+        <Copy size={18} />
+      </Button>
+      <Button onClick={onDownload}>
+        <Download size={18} />
+      </Button>
+    </Container>
+  );
+};
+
+export default Menu;

webui/src/Containers/Project/MainContent/Composer/CodePreview/Menu/MenuWithData.tsx

@@ -0,0 +1,30 @@
+import Menu from "./Menu";
+import { FC } from "react";
+import copyToClipboard from "copy-to-clipboard";
+import { useRecoilValue } from "recoil";
+import { CodePreviewState } from "../CodePreviewState";
+import { PlateformSelectState } from "../PlateformSelect/PlateformSelectState";
+
+const MenuWithData: FC = () => {
+  const [{ filename }] = useRecoilValue(PlateformSelectState);
+  const code = useRecoilValue(CodePreviewState);
+  const onCopy = () => {
+    copyToClipboard(code);
+  };
+
+  const onDownload = () => {
+    const blob = new Blob([code], { type: "text/yaml" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return <Menu onCopy={onCopy} onDownload={onDownload} />;
+};
+
+export default MenuWithData;

webui/src/Containers/Project/MainContent/Composer/CodePreview/Menu/index.tsx

@@ -0,0 +1,3 @@
+import Menu from "./MenuWithData";
+
+export default Menu;

webui/src/Containers/Project/MainContent/Composer/CodePreview/Menu/styles.tsx

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+
+export const Container = styled.div`
+  position: absolute;
+  right: 20px;
+`;
+
+export const Button = styled.button`
+  background-color: initial;
+  border: none;
+  cursor: pointer;
+  color: #ffffffa3;
+  &:hover {
+    color: #fff;
+  }
+`;

webui/src/Containers/Project/MainContent/Composer/CodePreview/PlateformSelect/PlateformSelect.tsx

@@ -0,0 +1,31 @@
+import { FC } from "react";
+import { PlateformItem } from "./PlateformSelectState";
+import { Select } from "baseui/select";
+import styles, { Container } from "./styles";
+
+export type PlateformSelectProps = {
+  current: PlateformItem[];
+  onSelect: (plateform: PlateformItem[]) => void;
+  plateforms: PlateformItem[];
+};
+
+const PlateformSelect: FC<PlateformSelectProps> = (props) => {
+  const { current, plateforms, onSelect } = props;
+  return (
+    <Container>
+      <Select
+        overrides={styles.Select}
+        clearable={false}
+        options={plateforms}
+        value={current}
+        placeholder="Select color"
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onChange={(params: { value: any }) => {
+          onSelect(params.value);
+        }}
+      />
+    </Container>
+  );
+};
+
+export default PlateformSelect;

webui/src/Containers/Project/MainContent/Composer/CodePreview/PlateformSelect/PlateformSelectState.tsx

@@ -0,0 +1,15 @@
+import { atom } from "recoil";
+
+export type PlateformItem = { id: Plateform; label: string; filename: string };
+export type Plateform = "github" | "gitlab" | "aws" | "circleci" | "azure";
+
+export const PlateformSelectState = atom<PlateformItem[]>({
+  key: "PlateformSelectState",
+  default: [
+    {
+      id: "github",
+      label: "Github Actions",
+      filename: "ci.yml",
+    },
+  ],
+});

webui/src/Containers/Project/MainContent/Composer/CodePreview/PlateformSelect/PlateformSelectWithData.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+import PlateformSelect from "./PlateformSelect";
+import { plateforms } from "./consts";
+import { useRecoilState } from "recoil";
+import { PlateformSelectState } from "./PlateformSelectState";
+
+const PlateformSelectWithData: FC = () => {
+  const [currentPlateform, setCurrentPlateform] =
+    useRecoilState(PlateformSelectState);
+
+  return (
+    <PlateformSelect
+      current={currentPlateform}
+      plateforms={plateforms}
+      onSelect={setCurrentPlateform}
+    />
+  );
+};
+
+export default PlateformSelectWithData;

webui/src/Containers/Project/MainContent/Composer/CodePreview/PlateformSelect/consts.tsx

@@ -0,0 +1,29 @@
+import { PlateformItem } from "./PlateformSelectState";
+
+export const plateforms: PlateformItem[] = [
+  {
+    label: "Azure Pipelines",
+    id: "azure",
+    filename: "azure-pipelines.yml",
+  },
+  {
+    label: "AWS CodePipeline",
+    id: "aws",
+    filename: "buildspec.yml",
+  },
+  {
+    label: "Circle CI",
+    id: "circleci",
+    filename: "config.yml",
+  },
+  {
+    label: "Github Actions",
+    id: "github",
+    filename: "ci.yml",
+  },
+  {
+    label: "GitLab CI",
+    id: "gitlab",
+    filename: ".gitlab-ci.yml",
+  },
+];

webui/src/Containers/Project/MainContent/Composer/CodePreview/PlateformSelect/index.tsx

@@ -0,0 +1,3 @@
+import PlateformSelect from "./PlateformSelectWithData";
+
+export default PlateformSelect;

webui/src/Containers/Project/MainContent/Composer/CodePreview/PlateformSelect/styles.tsx

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+
+export const Container = styled.div`
+  width: 250px;
+  margin-top: 20px;
+`;
+
+export default {
+  Select: {
+    Root: {
+      style: {
+        fontFamily: "Lexend",
+      },
+    },
+    DropdownListItem: {
+      style: {
+        fontFamily: "Lexend",
+      },
+    },
+    ControlContainer: {
+      style: {
+        border: "1px solid #ffffff45",
+      },
+    },
+  },
+};

webui/src/Containers/Project/MainContent/Composer/CodePreview/index.tsx

@@ -0,0 +1,3 @@
+import CodePreview from "./CodePreviewWithData";
+
+export default CodePreview;