Add Environment types documentation page

src/components/Documentation/Documentation.stories.tsx

@@ -34,3 +34,9 @@ export const RunDigmaWithGradleTasks: Story = {
     page: "run-digma-with-gradle-tasks"
   }
 };
+
+export const EnvironmentTypes: Story = {
+  args: {
+    page: "environment-types"
+  }
+};

src/components/Documentation/index.tsx

@@ -1,12 +1,11 @@
 import { useEffect } from "react";
 import { isString } from "../../typeGuards/isString";
 import { addPrefix } from "../../utils/addPrefix";
-import { Page } from "./Page";
-import { runDigmaWithCommandLine } from "./pages/runDigmaWithCommandLine";
-import { runDigmaWithDocker } from "./pages/runDigmaWithDocker";
-import { runDigmaWithGradleTasks } from "./pages/runDigmaWithGradleTasks";
-import { PageContent } from "./pages/types";
-import * as s from "./styles";
+import { EnvironmentTypes } from "./pages/EnvironmentTypes";
+import { Page } from "./pages/RunDigma/Page";
+import { runDigmaWithCommandLine } from "./pages/RunDigma/runDigmaWithCommandLine";
+import { runDigmaWithDocker } from "./pages/RunDigma/runDigmaWithDocker";
+import { runDigmaWithGradleTasks } from "./pages/RunDigma/runDigmaWithGradleTasks";
 import { DocumentationProps } from "./types";
 
 const ACTION_PREFIX = "DOCUMENTATION";
@@ -15,10 +14,11 @@ const actions = addPrefix(ACTION_PREFIX, {
   INITIALIZE: "INITIALIZE"
 });
 
-const pages: Record<string, PageContent> = {
-  "run-digma-with-terminal": runDigmaWithCommandLine,
-  "run-digma-with-docker": runDigmaWithDocker,
-  "run-digma-with-gradle-tasks": runDigmaWithGradleTasks
+const pages: Record<string, JSX.Element> = {
+  "run-digma-with-terminal": <Page {...runDigmaWithCommandLine} />,
+  "run-digma-with-docker": <Page {...runDigmaWithDocker} />,
+  "run-digma-with-gradle-tasks": <Page {...runDigmaWithGradleTasks} />,
+  "environment-types": <EnvironmentTypes />
 };
 
 const initialPage = isString(window.documentationPage)
@@ -35,5 +35,5 @@ export const Documentation = (props: DocumentationProps) => {
     });
   }, []);
 
-  return <s.Container>{pageContent && <Page {...pageContent} />}</s.Container>;
+  return <>{pageContent}</>;
 };

src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/index.tsx

@@ -0,0 +1,39 @@
+import { Badge } from "../../../../../common/Badge";
+import { EnvironmentStatus } from "../types";
+import * as s from "./styles";
+import { StatusChipProps } from "./types";
+
+const getBadgeStyles = (status: EnvironmentStatus) => {
+  switch (status) {
+    case "waiting-for-data":
+      return {
+        main: {
+          background: "#fff"
+        },
+        outline: {
+          background: "rgb(147 149 228 / 40%)"
+        }
+      };
+    case "active":
+    default:
+      return undefined;
+  }
+};
+
+const getLabel = (status: EnvironmentStatus): string => {
+  switch (status) {
+    case "active":
+      return "Active";
+    case "waiting-for-data":
+      return "Waiting for data";
+  }
+};
+
+export const StatusChip = (props: StatusChipProps) => {
+  return (
+    <s.Container $status={props.status}>
+      <Badge customStyles={getBadgeStyles(props.status)} />
+      {getLabel(props.status)}
+    </s.Container>
+  );
+};

src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/styles.ts

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { ContainerProps } from "./types";
+
+export const Container = styled.div<ContainerProps>`
+  display: flex;
+  min-width: 99px;
+  max-width: fit-content;
+  height: 22px;
+  padding: 2px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border-radius: 21px;
+  font-size: 14px;
+  font-weight: 500;
+  box-sizing: border-box;
+  color: #fff;
+  background: ${({ theme, $status }) => {
+    if ($status === "waiting-for-data") {
+      return "#6b6dda";
+    }
+    switch (theme.mode) {
+      case "light":
+        return "rgba(103 210 139 / 64%)";
+      case "dark":
+      case "dark-jetbrains":
+        return "rgba(103 210 139 / 24%)";
+    }
+  }};
+`;

src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/StatusChip/types.ts

@@ -0,0 +1,9 @@
+import { EnvironmentStatus } from "../types";
+
+export interface StatusChipProps {
+  status: EnvironmentStatus;
+}
+
+export interface ContainerProps {
+  $status: EnvironmentStatus;
+}

src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/index.tsx

@@ -0,0 +1,38 @@
+import { useTheme } from "styled-components";
+import { getThemeKind } from "../../../../common/App/styles";
+import * as s from "./styles";
+import { EnvironmentTypeCardProps } from "./types";
+
+export const EnvironmentTypeCard = (props: EnvironmentTypeCardProps) => {
+  const theme = useTheme();
+  const themeKind = getThemeKind(theme);
+
+  return (
+    <s.Container>
+      <s.Title>
+        <props.icon height={24} themeKind={themeKind} />
+        <span>{props.name}</span>
+      </s.Title>
+      <span>{props.description}</span>
+      {/* <s.StatusContainer>
+        {props.status === "active" && <StatusChip status={props.status} />}
+        {props.status === "waiting-for-data" && (
+          <>
+            <StatusChip status={props.status} />
+            <s.NoDataContainer>
+              <InfoCircleIcon size={14} color={"currentColor"} />
+              <s.Link>What is this?</s.Link>
+            </s.NoDataContainer>
+          </>
+        )}
+        {!props.status && (
+          <s.AddEnvironmentButton
+            icon={{ component: PlusIcon, color: "#b9c2eb" }}
+          >
+            Add Environment
+          </s.AddEnvironmentButton>
+        )}
+      </s.StatusContainer> */}
+    </s.Container>
+  );
+};

src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+import { Button } from "../../../../common/Button";
+import { Link as CommonLink } from "../../../../common/Link";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 8px 12px 12px;
+  gap: 4px;
+  font-size: 14px;
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#828797";
+      case "dark":
+      case "dark-jetbrains":
+        return "#9b9b9b";
+    }
+  }};
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#fff";
+      case "dark":
+      case "dark-jetbrains":
+        return "#393b40";
+    }
+  }};
+`;
+
+export const Title = styled.div`
+  display: flex;
+  gap: 8px;
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#4d668a";
+      case "dark":
+      case "dark-jetbrains":
+        return "#fff";
+    }
+  }};
+  font-size: 18px;
+  font-weight: 500;
+  text-transform: capitalize;
+  align-items: center;
+`;
+
+export const StatusContainer = styled.div`
+  padding-top: 8px;
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const NoDataContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #9b9b9b;
+  font-weight: 500;
+  font-size: 14px;
+`;
+
+export const Link = styled(CommonLink)`
+  color: inherit;
+`;
+
+export const InsightContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+export const AddEnvironmentButton = styled(Button)`
+  width: 100%;
+`;

src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts

@@ -0,0 +1,14 @@
+import { ThemeableIconProps } from "../../../../common/icons/types";
+import { InsightCardType } from "../InsightCard/types";
+
+export type EnvironmentStatus = "active" | "waiting-for-data";
+
+export interface EnvironmentTypeCardProps {
+  name: string;
+  icon: React.MemoExoticComponent<
+    (props: ThemeableIconProps & { height: number }) => JSX.Element
+  >;
+  description?: string;
+  status?: EnvironmentStatus;
+  insights: { type: InsightCardType; count?: number; isDisabled?: boolean }[];
+}