Update Environment instructions (#860)

digma-ai · May 25, 2024 · fab8441 · fab8441
1 parent 927a9b2
commit fab8441
Show file tree

Hide file tree

Showing 28 changed files with 835 additions and 356 deletions.
diff --git a/src/actions.ts b/src/actions.ts
@@ -52,5 +52,6 @@ export const actions = addPrefix(ACTION_PREFIX, {
   SET_PRODUCT_KEY: "SET_PRODUCT_KEY",
   SET_USER_ID: "SET_USER_ID",
   SET_IS_DIGMATHON_GAME_FINISHED: "SET_IS_DIGMATHON_GAME_FINISHED",
-  FINISH_DIGMATHON_GAME: "FINISH_DIGMATHON_GAME"
+  FINISH_DIGMATHON_GAME: "FINISH_DIGMATHON_GAME",
+  SET_RUN_CONFIGURATION: "SET_RUN_CONFIGURATION"
 });
diff --git a/...nsightCards/SpanDurationBreakdownInsightCard/SpanDurationBreakdownInsightCard.stories.tsx b/...nsightCards/SpanDurationBreakdownInsightCard/SpanDurationBreakdownInsightCard.stories.tsx
@@ -24,7 +24,9 @@ const mockedConfig = {
   ...initialState,
   backendInfo: {
     applicationVersion:
-      featureFlagMinBackendVersions[FeatureFlag.QUANTITY_DURATION_BREAKDOWN],
+      featureFlagMinBackendVersions[
+        FeatureFlag.IS_DURATION_BREAKDOWN_QUANTITY_ENABLED
+      ],
     deploymentType: DeploymentType.HELM,
     centralize: true
   }

diff --git a/...ghts/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx b/...ghts/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx
@@ -75,7 +75,7 @@ export const SpanDurationBreakdownInsightCard = ({
   const config = useContext(ConfigContext);
   const isQuantitySupported = getFeatureFlagValue(
     config,
-    FeatureFlag.QUANTITY_DURATION_BREAKDOWN
+    FeatureFlag.IS_DURATION_BREAKDOWN_QUANTITY_ENABLED
   );
 
   const columnHelper = createColumnHelper<SpanDurationBreakdownEntry>();

diff --git a/src/components/Navigation/ScopeNavigation/index.tsx b/src/components/Navigation/ScopeNavigation/index.tsx
@@ -91,7 +91,7 @@ export const ScopeNavigation = (props: ScopeNavigationProps) => {
       }
     };
 
-    const handleViewChange = (data: unknown) => {
+    const handleSetViews = (data: unknown) => {
       const payload = data as SetViewsPayload;
       const view = payload.views.find((x) => x.isSelected);
       const viewId = [view?.id, view?.path].filter((x) => Boolean(x)).join("/");
@@ -112,11 +112,11 @@ export const ScopeNavigation = (props: ScopeNavigationProps) => {
     };
 
     dispatcher.addActionListener(globalActions.SET_SCOPE, handleSetScope);
-    dispatcher.addActionListener(actions.SET_VIEWS, handleViewChange);
+    dispatcher.addActionListener(actions.SET_VIEWS, handleSetViews);
 
     return () => {
       dispatcher.removeActionListener(globalActions.SET_SCOPE, handleSetScope);
-      dispatcher.removeActionListener(actions.SET_VIEWS, handleViewChange);
+      dispatcher.removeActionListener(actions.SET_VIEWS, handleSetViews);
     };
   }, [environment, props.currentTabId, historyManager]);
 

diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/index.tsx
@@ -1,4 +1,4 @@
-import { CheckIcon } from "../../../../common/icons/12px/CheckIcon";
+import { CheckmarkIcon } from "../../../../common/icons/12px/CheckmarkIcon";
 import { ErrorIcon } from "../../../../common/icons/16px/ErrorIcon";
 import { StepStatus } from "../../types";
 import * as s from "./styles";
@@ -8,9 +8,9 @@ const getState = (index: number, state: StepStatus) => {
   switch (state) {
     case "completed":
       return (
-        <s.CheckIconContainer>
-          <CheckIcon color={"currentColor"} />
-        </s.CheckIconContainer>
+        <s.CheckMarkIconContainer>
+          <CheckmarkIcon color={"currentColor"} />
+        </s.CheckMarkIconContainer>
       );
     case "error":
       return (

diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts b/src/components/RecentActivity/CreateEnvironmentWizard/CreateEnvironmentPanel/Tab/styles.ts
@@ -40,7 +40,7 @@ export const Name = styled.div<NameProps>`
   opacity: ${({ $isActive }) => (!$isActive ? 0.5 : 1)};
 `;
 
-export const CheckIconContainer = styled.div`
+export const CheckMarkIconContainer = styled.div`
   display: flex;
   color: ${({ theme }) => theme.colors.v3.status.success};
 `;

diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentCreated/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentCreated/index.tsx
@@ -1,4 +1,4 @@
-import { CheckCircleIcon } from "../../../common/icons/20px/CheckCircleIcon";
+import { CheckmarkCircleIcon } from "../../../common/icons/20px/CheckmarkCircleIcon";
 import { Button } from "../../../common/v3/Button";
 import * as s from "./styles";
 import { EnvironmentCreatedProps } from "./types";
@@ -8,9 +8,9 @@ export const EnvironmentCreated = ({
 }: EnvironmentCreatedProps) => {
   return (
     <s.Container>
-      <s.CheckIconContainer>
-        <CheckCircleIcon size={20} color={"currentColor"} />
-      </s.CheckIconContainer>
+      <s.CheckMarkIconContainer>
+        <CheckmarkCircleIcon size={20} color={"currentColor"} />
+      </s.CheckMarkIconContainer>
       <s.Info>
         <s.Title>Environment Created</s.Title>
         <s.Description>

diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentCreated/styles.ts b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentCreated/styles.ts
@@ -28,7 +28,7 @@ export const Description = styled.div`
   color: ${({ theme }) => theme.colors.v3.text.secondary};
 `;
 
-export const CheckIconContainer = styled.div`
+export const CheckMarkIconContainer = styled.div`
   display: flex;
   color: ${({ theme }) => theme.colors.v3.status.success};
 `;
diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/index.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, useEffect, useState } from "react";
 import { isNull } from "../../../../typeGuards/isNull";
-import { CheckCircleIcon } from "../../../common/icons/12px/CheckCircleIcon";
+import { CheckmarkCircleIcon } from "../../../common/icons/12px/CheckmarkCircleIcon";
 import { ErrorIcon } from "../../../common/icons/12px/ErrorIcon";
 import { Button } from "../../../common/v3/Button";
 import * as s from "./styles";
@@ -42,9 +42,9 @@ export const EnvironmentNameStep = ({
     }
 
     return isValid ? (
-      <s.CheckIconContainer>
-        <CheckCircleIcon color={"currentColor"} />
-      </s.CheckIconContainer>
+      <s.CheckMarkIconContainer>
+        <CheckmarkCircleIcon color={"currentColor"} />
+      </s.CheckMarkIconContainer>
     ) : (
       <s.ErrorIconContainer>
         <ErrorIcon color={"currentColor"} />

diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/styles.ts b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentNameStep/styles.ts
@@ -39,7 +39,7 @@ export const NameInput = styled(TextField)`
   width: 220px;
 `;
 
-export const CheckIconContainer = styled.div`
+export const CheckMarkIconContainer = styled.div`
   display: flex;
   color: ${({ theme }) => theme.colors.v3.status.success};
 `;

diff --git a/...ents/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx b/...ents/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx
@@ -1,5 +1,12 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { EnvironmentInstructionsPanel } from ".";
+import { ConfigContext, initialState } from "../../common/App/ConfigContext";
+import {
+  ConfigContextData,
+  DeploymentType,
+  RunConfiguration
+} from "../../common/App/types";
+import { ExtendedEnvironment } from "../types";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof EnvironmentInstructionsPanel> = {
@@ -15,33 +22,111 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const mockedConfig: ConfigContextData = {
+  ...initialState,
+  backendInfo: {
+    applicationVersion: "0.3.15",
+    deploymentType: DeploymentType.DOCKER_COMPOSE,
+    centralize: false
+  },
+  runConfig: {
+    environmentId: null,
+    environmentName: null,
+    environmentType: "Private",
+    userId: "123",
+    observabilityMode: "OtelAgent",
+    isRunConfigurationSupported: true,
+    javaToolOptions: "javaToolOptions"
+  },
+  environment: {
+    name: "Development",
+    id: "123",
+    type: "Private"
+  },
+  userInfo: {
+    id: "123"
+  }
+};
+
+const mockedEnvironment: ExtendedEnvironment = {
+  name: "Development",
+  id: "123",
+  isPending: false,
+  hasRecentActivity: false,
+  type: "Private",
+  token: null,
+  serverApiUrl: null,
+  isOrgDigmaSetupFinished: false
+};
+
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Private: Story = {
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider value={mockedConfig}>
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
   args: {
-    environment: {
-      name: "MY_ENV",
-      id: "MY_ENV#ID#1",
-      isPending: true,
-      hasRecentActivity: false,
-      type: "Private",
-      token: null,
-      serverApiUrl: null,
-      isOrgDigmaSetupFinished: false
-    }
+    environment: mockedEnvironment
+  }
+};
+
+export const PrivateRunConfigSet: Story = {
+  name: "Private with run config set",
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider
+        value={{
+          ...mockedConfig,
+          runConfig: {
+            ...(mockedConfig.runConfig as RunConfiguration),
+            environmentName: "Development",
+            environmentId: "123"
+          }
+        }}
+      >
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
+  args: {
+    environment: mockedEnvironment
   }
 };
 
 export const Public: Story = {
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider value={mockedConfig}>
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
+  args: {
+    environment: { ...mockedEnvironment, type: "Public" }
+  }
+};
+
+export const NotSupportedConfiguration: Story = {
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider
+        value={{
+          ...mockedConfig,
+          runConfig: {
+            ...(mockedConfig.runConfig as RunConfiguration),
+            isRunConfigurationSupported: false,
+            javaToolOptions: "javaToolOptions"
+          }
+        }}
+      >
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
   args: {
-    environment: {
-      name: "MY_ENV",
-      id: "MY_ENV#ID#1",
-      isPending: true,
-      hasRecentActivity: false,
-      type: "Public",
-      token: "token_string",
-      serverApiUrl: "https://example.com:80",
-      isOrgDigmaSetupFinished: false
-    }
+    environment: mockedEnvironment
   }
 };