Add environment management (#1350)

* Add environment management

Author: kshmidt-digma

src/components/Admin/Environments/ActionsMenuButton/index.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { useAdminDispatch } from "../../../../containers/Admin/hooks";
+import { setEnvironmentToDelete } from "../../../../redux/slices/environmentsSlice";
+import { TrashBinIcon } from "../../../common/icons/16px/TrashBinIcon";
+import { ThreeDotsVerticalIcon } from "../../../common/icons/ThreeDotsVerticalIcon";
+import { NewPopover } from "../../../common/NewPopover";
+import { NewIconButton } from "../../../common/v3/NewIconButton";
+import { MenuList } from "../../../Navigation/common/MenuList";
+import * as s from "./styles";
+import type { ActionMenuButtonProps } from "./types";
+
+export const ActionsMenuButton = ({ environment }: ActionMenuButtonProps) => {
+  const [isKebabButtonMenuOpen, setIsKebabButtonMenuOpen] = useState(false);
+  const dispatch = useAdminDispatch();
+
+  const handleDeleteMenuItemClick = () => {
+    dispatch(setEnvironmentToDelete(environment.id));
+  };
+
+  const handleKebabMenuOpenChange = (isOpen: boolean) => {
+    setIsKebabButtonMenuOpen(isOpen);
+  };
+
+  return (
+    <NewPopover
+      content={
+        <s.Popup>
+          <MenuList
+            items={[
+              {
+                id: "delete",
+                icon: <TrashBinIcon />,
+                label: "Delete",
+                onClick: handleDeleteMenuItemClick
+              }
+            ]}
+          />
+        </s.Popup>
+      }
+      onOpenChange={handleKebabMenuOpenChange}
+      isOpen={isKebabButtonMenuOpen}
+      placement={"bottom-end"}
+    >
+      <NewIconButton
+        icon={ThreeDotsVerticalIcon}
+        buttonType={"secondaryBorderless"}
+      />
+    </NewPopover>
+  );
+};

src/components/Admin/Environments/ActionsMenuButton/styles.ts

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import { Popup as CommonPopup } from "../../../Navigation/common/Popup";
+import { ContentContainer } from "../../../Navigation/common/Popup/styles";
+
+export const Popup = styled(CommonPopup)`
+  & > ${ContentContainer} {
+    padding: 3px 8px;
+  }
+`;

src/components/Admin/Environments/ActionsMenuButton/types.ts

@@ -0,0 +1,5 @@
+import type { Environment } from "../../../../redux/services/types";
+
+export interface ActionMenuButtonProps {
+  environment: Environment;
+}

src/components/Admin/Environments/CreateEnvironmentSidebarOverlay/FinishScreenContent/index.tsx

@@ -0,0 +1,29 @@
+import { NewButton } from "../../../../common/v3/NewButton";
+import * as s from "../../../../RecentActivity/CreateEnvironmentWizard/FinishStep/styles";
+import type { FinishScreenContentProps } from "./types";
+
+export const FinishScreenContent = ({
+  onGoToDashboard,
+  environment
+}: FinishScreenContentProps) => {
+  const handleBackToDashboardButtonClick = () => {
+    onGoToDashboard(environment?.id ?? null);
+  };
+
+  return (
+    <>
+      <s.Info>
+        <s.Title>Environment Created</s.Title>
+        <s.Description>
+          Your {(environment?.type ?? "").toLocaleLowerCase()} environment is
+          successfully created.
+        </s.Description>
+      </s.Info>
+      <NewButton
+        buttonType={"primary"}
+        label={"Back to dashboard"}
+        onClick={handleBackToDashboardButtonClick}
+      />
+    </>
+  );
+};

src/components/Admin/Environments/CreateEnvironmentSidebarOverlay/FinishScreenContent/types.ts

@@ -0,0 +1,6 @@
+import type { Environment } from "../../../../../redux/services/types";
+
+export interface FinishScreenContentProps {
+  onGoToDashboard: (id: string | null) => void;
+  environment?: Environment;
+}

src/components/Admin/Environments/CreateEnvironmentSidebarOverlay/index.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useState } from "react";
+import { useGetAboutQuery } from "../../../../redux/services/digma";
+import type { Environment } from "../../../../redux/services/types";
+import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
+import { addPrefix } from "../../../../utils/addPrefix";
+import { CreateEnvironmentWizard } from "../../../RecentActivity/CreateEnvironmentWizard";
+import { CancelConfirmationDialog } from "../../../RecentActivity/CreateEnvironmentWizard/CancelConfirmationDialog";
+import { SidebarOverlay } from "../../common/SidebarOverlay";
+import type { SidebarProps } from "../../common/SidebarOverlay/Sidebar/types";
+import { trackingEvents } from "../../tracking";
+import { FinishScreenContent } from "./FinishScreenContent";
+import * as s from "./styles";
+import type { CreateEnvironmentSidebarOverlayProps } from "./types";
+
+const TRACKING_PREFIX = "create environment";
+const prefixedTrackingEvents = addPrefix(TRACKING_PREFIX, trackingEvents, " ");
+
+export const CreateEnvironmentSidebarOverlay = ({
+  isSidebarOpen,
+  onSidebarClose
+}: CreateEnvironmentSidebarOverlayProps) => {
+  const { data: about } = useGetAboutQuery();
+  const [createdEnvironment, setCreatedEnvironment] = useState<Environment>();
+  const [
+    isCancelConfirmationDialogVisible,
+    setIsCancelConfirmationDialogVisible
+  ] = useState(false);
+
+  const handleCreateEnvironment = (environment: Environment) => {
+    setCreatedEnvironment(environment);
+  };
+
+  const handleCreateEnvironmentWizardClose = (id: string | null) => {
+    if (id) {
+      onSidebarClose();
+    } else {
+      setIsCancelConfirmationDialogVisible(true);
+    }
+  };
+
+  const handleCancelConfirmationDialogClose = () => {
+    setIsCancelConfirmationDialogVisible(false);
+  };
+
+  const handleCancelConfirmationDialogConfirm = useCallback(() => {
+    setIsCancelConfirmationDialogVisible(false);
+    onSidebarClose();
+  }, [onSidebarClose]);
+
+  const handleSidebarClose = () => {
+    if (createdEnvironment) {
+      onSidebarClose();
+    } else {
+      setIsCancelConfirmationDialogVisible(true);
+    }
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case "Escape":
+          sendUserActionTrackingEvent(
+            prefixedTrackingEvents.SIDEBAR_ESCAPE_KEY_PRESSED
+          );
+          if (isSidebarOpen) {
+            if (createdEnvironment) {
+              onSidebarClose();
+            } else {
+              setIsCancelConfirmationDialogVisible(
+                !isCancelConfirmationDialogVisible
+              );
+            }
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (isCancelConfirmationDialogVisible) {
+            handleCancelConfirmationDialogConfirm();
+          }
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [
+    isCancelConfirmationDialogVisible,
+    createdEnvironment,
+    onSidebarClose,
+    isSidebarOpen,
+    handleCancelConfirmationDialogConfirm
+  ]);
+
+  const sidebarProps: SidebarProps = {
+    title: "Create new environment",
+    content: {
+      header: <s.HeaderPlaceholder />,
+      body: (
+        <CreateEnvironmentWizard
+          onClose={handleCreateEnvironmentWizardClose}
+          isPanelTitleVisible={false}
+          isCentralizedDeployment={Boolean(about?.isCentralize)}
+          onCreate={handleCreateEnvironment}
+          finishScreenContent={
+            <FinishScreenContent
+              onGoToDashboard={handleCreateEnvironmentWizardClose}
+              environment={createdEnvironment}
+            />
+          }
+          isCancelConfirmationEnabled={false}
+        />
+      )
+    },
+    onClose: handleSidebarClose
+  };
+
+  return (
+    <SidebarOverlay
+      isSidebarOpen={isSidebarOpen}
+      onSidebarClose={handleSidebarClose}
+      sidebar={sidebarProps}
+    >
+      {isCancelConfirmationDialogVisible && (
+        <s.Overlay>
+          <CancelConfirmationDialog
+            onClose={handleCancelConfirmationDialogClose}
+            onConfirm={handleCancelConfirmationDialogConfirm}
+          />
+        </s.Overlay>
+      )}
+    </SidebarOverlay>
+  );
+};

src/components/Admin/Environments/CreateEnvironmentSidebarOverlay/styles.ts

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import { Overlay as CommonOverlay } from "../../../common/Overlay";
+
+export const HeaderPlaceholder = styled.div`
+  height: 8px;
+`;
+
+export const Overlay = styled(CommonOverlay)`
+  align-items: center;
+`;

src/components/Admin/Environments/CreateEnvironmentSidebarOverlay/types.ts

@@ -0,0 +1,4 @@
+export interface CreateEnvironmentSidebarOverlayProps {
+  isSidebarOpen: boolean;
+  onSidebarClose: () => void;
+}

…ntCreated/EnvironmentCreated.stories.tsx …in/Environments/Environments.stories.tsxsrc/components/RecentActivity/CreateEnvironmentWizard/EnvironmentCreated/EnvironmentCreated.stories.tsx renamed to src/components/Admin/Environments/Environments.stories.tsx src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentCreated/EnvironmentCreated.stories.tsx renamed to src/components/Admin/Environments/Environments.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { EnvironmentCreated } from ".";
+import { Environments } from ".";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-const meta: Meta<typeof EnvironmentCreated> = {
-  title: "Recent Activity/CreateEnvironmentWizard/EnvironmentCreated",
-  component: EnvironmentCreated,
+const meta: Meta<typeof Environments> = {
+  title: "Admin/Admin/Environments",
+  component: Environments,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
     layout: "fullscreen"
@@ -13,7 +13,7 @@ const meta: Meta<typeof EnvironmentCreated> = {
 
 export default meta;
 
-type Story = StoryObj<typeof EnvironmentCreated>;
+type Story = StoryObj<typeof Environments>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {};