From d9eef2d92b44f33b75fa5cc3ee55a47735f32af0 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Wed, 17 Apr 2024 16:30:49 +0200 Subject: [PATCH 01/10] Fix documentation and environment instructions --- public/images/environmentId_dark.svg | 129 ++++++++ public/images/environmentId_light.svg | 119 ++++++++ .../howToSetupEnvironmentMenuItem_dark.svg | 275 ++++++++++++++++++ .../howToSetupEnvironmentMenuItem_light.svg | 263 +++++++++++++++++ public/images/longArrow.svg | 3 + .../GetEnvironmentIdInstruction.stories.tsx | 20 ++ .../GetEnvironmentIdInstruction.tsx/index.tsx | 38 +++ .../GetEnvironmentIdInstruction.tsx/styles.ts | 52 ++++ .../RunDigma/runDigmaWithCommandLine.tsx | 6 +- .../pages/RunDigma/runDigmaWithDocker.tsx | 6 +- .../EnvironmentInstructionsPanel.stories.tsx | 4 +- .../EnvironmentInstructionsPanel/index.tsx | 51 +++- .../EnvironmentInstructionsPanel/styles.ts | 55 +++- .../EnvironmentInstructionsPanel/types.ts | 1 + .../RecentActivity/EnvironmentMenu/index.tsx | 6 +- .../RecentActivity/EnvironmentMenu/styles.ts | 50 ++-- .../EnvironmentPanel/EnvironmentTab/index.tsx | 52 ++-- .../EnvironmentPanel/EnvironmentTab/types.ts | 3 +- .../RecentActivity/EnvironmentPanel/index.tsx | 11 +- .../RecentActivity/EnvironmentPanel/types.ts | 3 +- .../RecentActivity/RecentActivity.stories.tsx | 21 +- src/components/RecentActivity/index.tsx | 45 ++- .../common/icons/16px/TrashBinIcon.tsx | 33 +++ .../common/icons/16px/WrenchIcon.tsx | 33 +++ 24 files changed, 1197 insertions(+), 82 deletions(-) create mode 100644 public/images/environmentId_dark.svg create mode 100644 public/images/environmentId_light.svg create mode 100644 public/images/howToSetupEnvironmentMenuItem_dark.svg create mode 100644 public/images/howToSetupEnvironmentMenuItem_light.svg create mode 100644 public/images/longArrow.svg create mode 100644 src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/GetEnvironmentIdInstruction.stories.tsx create mode 100644 src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx create mode 100644 src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts create mode 100644 src/components/common/icons/16px/TrashBinIcon.tsx create mode 100644 src/components/common/icons/16px/WrenchIcon.tsx diff --git a/public/images/environmentId_dark.svg b/public/images/environmentId_dark.svg new file mode 100644 index 000000000..5fc0ea654 --- /dev/null +++ b/public/images/environmentId_dark.svg @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/environmentId_light.svg b/public/images/environmentId_light.svg new file mode 100644 index 000000000..3cdd50ec0 --- /dev/null +++ b/public/images/environmentId_light.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/howToSetupEnvironmentMenuItem_dark.svg b/public/images/howToSetupEnvironmentMenuItem_dark.svg new file mode 100644 index 000000000..4e2874e3f --- /dev/null +++ b/public/images/howToSetupEnvironmentMenuItem_dark.svg @@ -0,0 +1,275 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/howToSetupEnvironmentMenuItem_light.svg b/public/images/howToSetupEnvironmentMenuItem_light.svg new file mode 100644 index 000000000..a514637a8 --- /dev/null +++ b/public/images/howToSetupEnvironmentMenuItem_light.svg @@ -0,0 +1,263 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/longArrow.svg b/public/images/longArrow.svg new file mode 100644 index 000000000..c9c01de66 --- /dev/null +++ b/public/images/longArrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/GetEnvironmentIdInstruction.stories.tsx b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/GetEnvironmentIdInstruction.stories.tsx new file mode 100644 index 000000000..83f7e058a --- /dev/null +++ b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/GetEnvironmentIdInstruction.stories.tsx @@ -0,0 +1,20 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { GetEnvironmentIdInstruction } from "."; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "Documentation/GetEnvironmentIdInstruction", + component: GetEnvironmentIdInstruction, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout + layout: "fullscreen" + } +}; + +export default meta; + +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Default: Story = {}; diff --git a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx new file mode 100644 index 000000000..6d4afee76 --- /dev/null +++ b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx @@ -0,0 +1,38 @@ +import { useTheme } from "styled-components"; +import { getThemeKind } from "../../../../common/App/styles"; +import { SectionNumber } from "../Page/styles"; +import * as s from "./styles"; + +export const GetEnvironmentIdInstruction = () => { + const theme = useTheme(); + const themeKind = getThemeKind(theme); + + return ( + + + Follow the steps to get your Environment ID + + + + + 1 + + Click on hamburger menu next to your Environment in the + Observability panel, and choose How to setup + + + + + + + 2 + + On the How to setup your Digma Environment screen + you can find your Environment ID + + + + + + ); +}; diff --git a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts new file mode 100644 index 000000000..149acca26 --- /dev/null +++ b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts @@ -0,0 +1,52 @@ +import styled from "styled-components"; +import { footnoteRegularTypography } from "../../../../common/App/typographies"; + +export const Container = styled.div` + display: flex; + gap: 16px; + padding: 16px; + border-radius: 4px; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f7f8fa"; + case "dark": + case "dark-jetbrains": + return "#2b2d30"; + } + }}; + + & > * { + flex: 1 1 0; + } +`; + +export const Column = styled.div` + display: flex; + flex-direction: column; +`; + +export const TitleColumn = styled(Column)` + padding: 16px 0 24px; + font-size: 16px; + font-weight: 700; +`; + +export const Step = styled.div` + ${footnoteRegularTypography} + + display: flex; + flex-direction: column; + gap: 8px; +`; + +export const Term = styled.span` + font-weight: 700; +`; + +export const Arrow = styled.img` + display: block; + margin-top: auto; + width: 25%; + min-width: 33px; +`; diff --git a/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx b/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx index 6bd1f2840..79273c0de 100644 --- a/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx +++ b/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx @@ -1,4 +1,5 @@ import { CodeSnippet } from "../../../common/CodeSnippet"; +import { GetEnvironmentIdInstruction } from "./GetEnvironmentIdInstruction.tsx"; import { PageContent } from "./Page/types"; export const runDigmaWithCommandLine: PageContent = { @@ -114,13 +115,16 @@ curl --create-dirs -O -L --output-dir ./otel https://github.com/digma-ai/otel-ja export JAVA_TOOL_OPTIONS="-javaagent:/otel/opentelemetry-javaagent.jar -Dotel.exporter.otlp.endpoint=http://localhost:5050 -Dotel.javaagent.extensions=/otel/digma-otel-agent-extension.jar -Dotel.metrics.exporter=none -Dotel.logs.exporter=none -Dotel.exporter.otlp.protocol=grpc" export OTEL_SERVICE_NAME={--ENTER YOUR SERVICE NAME HERE--} -export OTEL_RESOURCE_ATTRIBUTES=digma.environment=LOCAL +export OTEL_RESOURCE_ATTRIBUTES=digma.environment.id={--ENTER YOUR ENVIRONMENT ID HERE--} java app.jar`} language={"bash"} /> ) + }, + { + content: } ] }; diff --git a/src/components/Documentation/pages/RunDigma/runDigmaWithDocker.tsx b/src/components/Documentation/pages/RunDigma/runDigmaWithDocker.tsx index 92ac1e3b4..adfbb376e 100644 --- a/src/components/Documentation/pages/RunDigma/runDigmaWithDocker.tsx +++ b/src/components/Documentation/pages/RunDigma/runDigmaWithDocker.tsx @@ -1,4 +1,5 @@ import { CodeSnippet } from "../../../common/CodeSnippet"; +import { GetEnvironmentIdInstruction } from "./GetEnvironmentIdInstruction.tsx"; import { PageContent } from "./Page/types"; export const runDigmaWithDocker: PageContent = { @@ -58,7 +59,7 @@ curl --create-dirs -O -L --output-dir ./otel https://github.com/digma-ai/otel-ja environment: - JAVA_TOOL_OPTIONS=-javaagent:/otel/opentelemetry-javaagent.jar -Dotel.exporter.otlp.endpoint=http://host.docker.internal:5050 -Dotel.javaagent.extensions=/otel/digma-otel-agent-extension.jar -Dotel.metrics.exporter=none -Dotel.logs.exporter=none -Dotel.exporter.otlp.protocol=grpc - OTEL_SERVICE_NAME=#[your-service] - - OTEL_RESOURCE_ATTRIBUTES=digma.environment=DOCKER_LOCAL + - OTEL_RESOURCE_ATTRIBUTES=digma.environment.id=[ENVIRONMENT_ID] - OTEL_METRICS_EXPORTER=none extra_hosts: - "host.docker.internal:host-gateway"`} @@ -79,6 +80,9 @@ curl --create-dirs -O -L --output-dir ./otel https://github.com/digma-ai/otel-ja language={"bash"} /> ) + }, + { + content: } ] }; diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx index 0b2ba4f34..4884a8871 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx @@ -20,7 +20,7 @@ export const Local: Story = { args: { environment: { name: "MY_ENV", - id: "MY_ENV", + id: "MY_ENV#ID#1", isPending: true, hasRecentActivity: false, type: "Private", @@ -35,7 +35,7 @@ export const Shared: Story = { args: { environment: { name: "MY_ENV", - id: "MY_ENV", + id: "MY_ENV#ID#1", isPending: true, hasRecentActivity: false, type: "Public", diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx index 42609e39f..8fbc65939 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx @@ -1,3 +1,4 @@ +import copy from "copy-to-clipboard"; import { useContext, useState } from "react"; import { useTheme } from "styled-components"; import { actions as globalActions } from "../../../actions"; @@ -9,9 +10,11 @@ import { ConfigContext } from "../../common/App/ConfigContext"; import { getThemeKind } from "../../common/App/styles"; import { EnvironmentType } from "../../common/App/types"; import { Link } from "../../common/Link"; +import { CopyIcon } from "../../common/icons/12px/CopyIcon"; import { DesktopIcon } from "../../common/icons/DesktopIcon"; import { InfinityIcon } from "../../common/icons/InfinityIcon"; import { PlayButtonWithCursorIcon } from "../../common/icons/PlayButtonWithCursorIcon"; +import { Tooltip } from "../../common/v3/Tooltip"; import { SetupOrgDigmaPanel } from "../SetupOrgDigmaPanel"; import { Overlay } from "../common/Overlay"; import { trackingEvents } from "../tracking"; @@ -69,6 +72,16 @@ export const EnvironmentInstructionsPanel = ( setIsOrgDigmaSetupGuideVisible(false); }; + const close = () => { + if (props.onClose) { + props.onClose(); + } + }; + + const handleCloseButtonClick = () => { + close(); + }; + if (isOrgDigmaSetupGuideVisible) { return ( @@ -81,6 +94,38 @@ export const EnvironmentInstructionsPanel = ( ); } + const renderHeaderContent = (title: string) => { + const environmentId = props.environment.id; + + const handleCopyButtonClick = () => { + copy(environmentId); + }; + + return ( + <> + + {title} + + Environment ID + + + {environmentId} + + + + + + + + + + + ); + }; const environmentTypesContent: Record< EnvironmentType, EnvironmentInstructionsPanelContent @@ -102,7 +147,6 @@ export const EnvironmentInstructionsPanel = ( Add to the active run config - {state === AddToRunConfigState.success && ( Successfully added @@ -155,8 +199,7 @@ curl --create-dirs -O -L --output-dir ./otel https://github.com/digma-ai/otel-ja export JAVA_TOOL_OPTIONS="-javaagent:/otel/opentelemetry-javaagent.jar -Dotel.exporter.otlp.endpoint=http://${hostname}:5050 -Dotel.javaagent.extensions=/otel/digma-otel-agent-extension.jar -Dotel.metrics.exporter=none -Dotel.logs.exporter=none -Dotel.exporter.otlp.protocol=grpc" export OTEL_SERVICE_NAME={--ENTER YOUR SERVICE NAME HERE--} -export OTEL_RESOURCE_ATTRIBUTES=digma.environment.id=${props.environment.id} -export OTEL_RESOURCE_ATTRIBUTES=digma.user.id=${config.userInfo?.id || ""}`} +export OTEL_RESOURCE_ATTRIBUTES=digma.environment.id="${props.environment.id}"`} language={"bash"} /> @@ -189,7 +232,7 @@ export OTEL_RESOURCE_ATTRIBUTES=digma.user.id=${config.userInfo?.id || ""}`} return ( - {content.title} + {renderHeaderContent(content.title)} {props.environment.type === "Public" && ( CI/Prod environments require Digma to be installed in your diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts index 3ec2c520f..2772a83f8 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts @@ -1,10 +1,12 @@ import styled from "styled-components"; import { bodyMediumTypography, + footnoteRegularTypography, subscriptRegularTypography } from "../../common/App/typographies"; import { CodeSnippet } from "../../common/CodeSnippet"; import { Link as CommonLink } from "../../common/Link"; +import { Button } from "../../common/v3/Button"; export const Container = styled.div` margin-top: 12px; @@ -17,7 +19,7 @@ export const Header = styled.div` display: flex; gap: 8px; align-items: center; - justify-content: center; + justify-content: space-between; color: ${({ theme }) => theme.colors.v3.text.primary}; ${bodyMediumTypography} `; @@ -123,3 +125,54 @@ export const CodeSection = styled(CodeSnippet)` background: none; border: 1px solid ${({ theme }) => theme.colors.v3.surface.gray}; `; + +export const HeaderContentContainer = styled.div` + display: flex; + gap: 12px; + align-items: center; +`; + +export const Divider = styled.div` + border-radius: 1px; + width: 1px; + height: 13px; + background: ${({ theme }) => theme.colors.v3.stroke.primary}; +`; + +export const EnvironmentIdLabel = styled.span` + ${subscriptRegularTypography} + + color: ${({ theme }) => theme.colors.v3.text.tertiary}; +`; + +export const EnvironmentIdContainer = styled.div` + display: flex; + gap: 8px; + align-items: center; + padding: 6px 8px; + border-radius: 4px; + border: 1px solid ${({ theme }) => theme.colors.v3.surface.gray}; + max-width: 299px; +`; + +export const EnvironmentId = styled.span` + ${footnoteRegularTypography} + + color: ${({ theme }) => theme.colors.v3.text.link}; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +`; + +export const CopyButton = styled.button` + color: ${({ theme }) => theme.colors.v3.icon.secondary}; + border: none; + background: none; + padding: 0; + display: flex; + cursor: pointer; +`; + +export const CloseButton = styled(Button)` + margin-left: auto; +`; diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/types.ts b/src/components/RecentActivity/EnvironmentInstructionsPanel/types.ts index 6f72c6860..12c6fe0e2 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/types.ts +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/types.ts @@ -5,6 +5,7 @@ import { ExtendedEnvironment } from "../types"; export interface EnvironmentInstructionsPanelProps { environment: ExtendedEnvironment; onAddEnvironmentToRunConfig?: (environment: string) => void; + onClose?: () => void; } export interface EnvironmentInstructionsPanelContent { diff --git a/src/components/RecentActivity/EnvironmentMenu/index.tsx b/src/components/RecentActivity/EnvironmentMenu/index.tsx index 9af3be863..b4ea8e11a 100644 --- a/src/components/RecentActivity/EnvironmentMenu/index.tsx +++ b/src/components/RecentActivity/EnvironmentMenu/index.tsx @@ -14,7 +14,11 @@ export const EnvironmentMenu = (props: EnvironmentMenuProps) => { key={item.value} onClick={() => handleMenuItemClick(item.value)} > - {item.icon && } + {item.icon && ( + + + + )} {item.label} ))} diff --git a/src/components/RecentActivity/EnvironmentMenu/styles.ts b/src/components/RecentActivity/EnvironmentMenu/styles.ts index 8cd053a5d..72ed0c166 100644 --- a/src/components/RecentActivity/EnvironmentMenu/styles.ts +++ b/src/components/RecentActivity/EnvironmentMenu/styles.ts @@ -1,19 +1,14 @@ import styled from "styled-components"; +import { subscriptRegularTypography } from "../../common/App/typographies"; export const Container = styled.div` display: flex; flex-direction: column; - box-shadow: 0 2px 16px 0 rgb(0 0 0 / 16%); - width: 160px; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f7f8fa"; - case "dark": - case "dark-jetbrains": - return "#2b2d30"; - } - }}; + width: fit-content; + border-radius: 4px; + padding: 4px; + background: ${({ theme }) => theme.colors.v3.surface.primary}; + box-shadow: 0 2px 4px 0 rgb(0 0 0 / 29%); `; export const List = styled.ul` @@ -23,38 +18,27 @@ export const List = styled.ul` padding: 0; `; +export const IconContainer = styled.div` + display: flex; + color: ${({ theme }) => theme.colors.v3.icon.tertiary}; +`; + export const ListItem = styled.li` + ${subscriptRegularTypography} + display: flex; - flex-direction: row; - gap: 4px; + gap: 8px; align-items: center; width: 100%; box-sizing: border-box; list-style-type: none; - padding: 6px 8px; - font-size: 14px; + padding: 4px 8px; cursor: pointer; - color: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#818594"; - case "dark": - case "dark-jetbrains": - return "#b4b8bf"; - } - }}; + color: ${({ theme }) => theme.colors.v3.text.primary}; &:hover, &:active { - color: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#494b57"; - case "dark": - case "dark-jetbrains": - return "#dfe1e5"; - } - }}; + border-radius: 2px; background: ${({ theme }) => { switch (theme.mode) { case "light": diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx index 87728193d..addc23263 100644 --- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx +++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx @@ -1,11 +1,11 @@ -import { useCallback, useContext, useRef, useState } from "react"; -import { ConfigContext } from "../../../common/App/ConfigContext"; +import { useCallback, useRef, useState } from "react"; import { greenScale } from "../../../common/App/v2colors"; import { EnvironmentIcon } from "../../../common/EnvironmentIcon"; import { KebabMenuButton } from "../../../common/KebabMenuButton"; import { NewPopover } from "../../../common/NewPopover"; import { Tooltip } from "../../../common/Tooltip"; -import { TrashBinIcon } from "../../../common/icons/TrashBinIcon"; +import { TrashBinIcon } from "../../../common/icons/16px/TrashBinIcon"; +import { WrenchIcon } from "../../../common/icons/16px/WrenchIcon"; import { Badge } from "../../Badge"; import { EnvironmentMenu } from "../../EnvironmentMenu"; import * as s from "./styles"; @@ -15,8 +15,6 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => { const [isHovered, setIsHovered] = useState(false); const [isFocused, setIsFocused] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); - const config = useContext(ConfigContext); - const isMenuVisible = config.digmaStatus?.connection.status; const containerRef = useRef(null); @@ -45,6 +43,9 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => { const handleMenuItemSelect = (value: string) => { switch (value) { + case "setup-instructions": + props.onEnvironmentSetupInstructionsShow(props.environment.id); + break; case "delete": props.onEnvironmentDelete(props.environment.id); break; @@ -53,7 +54,10 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => { setIsMenuOpen(false); }; - const menuItems = [{ label: "Delete", value: "delete", icon: TrashBinIcon }]; + const menuItems = [ + { label: "How to setup", value: "setup-instructions", icon: WrenchIcon }, + { label: "Delete", value: "delete", icon: TrashBinIcon } + ]; return ( { )} - {isMenuVisible && - menuItems.length > 0 && - (isHovered || isFocused || isMenuOpen) && ( - - } - onOpenChange={setIsMenuOpen} - isOpen={isMenuOpen} - placement={"bottom-start"} - > - - - - - )} + {menuItems.length > 0 && (isHovered || isFocused || isMenuOpen) && ( + + } + onOpenChange={setIsMenuOpen} + isOpen={isMenuOpen} + placement={"bottom-start"} + > + + + + + )} ); }; diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts index 17dcad6c5..12533ff92 100644 --- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts +++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts @@ -23,7 +23,8 @@ export interface EnvironmentTabProps { environment: ExtendedEnvironment; isSelected: boolean; onClick: (environment: ExtendedEnvironment) => void; - onEnvironmentDelete: (environment: string) => void; + onEnvironmentSetupInstructionsShow: (environmentId: string) => void; + onEnvironmentDelete: (environmentId: string) => void; } export interface ContainerProps { diff --git a/src/components/RecentActivity/EnvironmentPanel/index.tsx b/src/components/RecentActivity/EnvironmentPanel/index.tsx index 71696ab5f..f7fa6662e 100644 --- a/src/components/RecentActivity/EnvironmentPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentPanel/index.tsx @@ -51,8 +51,12 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => { props.onEnvironmentSelect(environment); }; - const handleEnvironmentDelete = (environment: string) => { - props.onEnvironmentDelete(environment); + const handleEnvironmentDelete = (environmentId: string) => { + props.onEnvironmentDelete(environmentId); + }; + + const handleEnvironmentSetupInstructionsShow = (environmentId: string) => { + props.onEnvironmentSetupInstructionsShow(environmentId); }; const handleCarouselButtonClick = (direction: ScrollDirection) => { @@ -259,6 +263,9 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => { isSelected={props.selectedEnvironment?.id === environment.id} onClick={handleEnvironmentTabClick} onEnvironmentDelete={handleEnvironmentDelete} + onEnvironmentSetupInstructionsShow={ + handleEnvironmentSetupInstructionsShow + } /> ))} diff --git a/src/components/RecentActivity/EnvironmentPanel/types.ts b/src/components/RecentActivity/EnvironmentPanel/types.ts index a3c4d80b3..12c1b6db1 100644 --- a/src/components/RecentActivity/EnvironmentPanel/types.ts +++ b/src/components/RecentActivity/EnvironmentPanel/types.ts @@ -5,7 +5,8 @@ export interface EnvironmentPanelProps { selectedEnvironment?: ExtendedEnvironment; onEnvironmentSelect: (environment: ExtendedEnvironment) => void; onEnvironmentAdd: () => void; - onEnvironmentDelete: (environment: string) => void; + onEnvironmentSetupInstructionsShow: (environmentId: string) => void; + onEnvironmentDelete: (environmentId: string) => void; onDigmathonModeButtonClick: () => void; } diff --git a/src/components/RecentActivity/RecentActivity.stories.tsx b/src/components/RecentActivity/RecentActivity.stories.tsx index 9d28f478b..bbe21d27c 100644 --- a/src/components/RecentActivity/RecentActivity.stories.tsx +++ b/src/components/RecentActivity/RecentActivity.stories.tsx @@ -1,6 +1,7 @@ import { Meta, StoryObj } from "@storybook/react"; import { RecentActivity } from "."; import { actions as globalActions } from "../../actions"; +import { ConfigContext, initialState } from "../common/App/ConfigContext"; import { mockedDigmathonProgressData } from "./Digmathon/mockData"; import { mockData as liveData } from "./LiveView/mockData"; import { actions } from "./actions"; @@ -637,7 +638,25 @@ const data: RecentActivityData = { export const WithData: Story = { args: { data - } + }, + decorators: [ + (Story) => ( + + + + ) + ] }; export const WithEmptyEnv: Story = { diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index efee677db..1d65f9246 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -70,6 +70,10 @@ export const RecentActivity = (props: RecentActivityProps) => { isDigmathonCompleted } = useDigmathonProgressData(); const previousIsDigmathonCompleted = usePrevious(isDigmathonCompleted); + const [ + areEnvironmentInstructionsVisible, + setAreEnvironmentInstructionsVisible + ] = useState(false); const environmentActivities = useMemo( () => (data ? groupBy(data.entries, (x) => x.environment) : {}), @@ -105,6 +109,10 @@ export const RecentActivity = (props: RecentActivityProps) => { }); }, [environments]); + useEffect(() => { + setAreEnvironmentInstructionsVisible(false); + }, [selectedEnvironment]); + useEffect(() => { window.sendMessageToDigma({ action: actions.INITIALIZE @@ -189,6 +197,14 @@ export const RecentActivity = (props: RecentActivityProps) => { setEnvironmentToDelete(undefined); }; + const handleEnvironmentSetupInstructionsShow = () => { + setAreEnvironmentInstructionsVisible(true); + }; + + const handleEnvironmentSetupInstructionsClose = () => { + setAreEnvironmentInstructionsVisible(false); + }; + const handleDigmathonModeButtonClick = () => { setIsDigmathonMode(true); }; @@ -199,22 +215,30 @@ export const RecentActivity = (props: RecentActivityProps) => { const renderContent = () => { if ( - (!selectedEnvironment || - !environmentActivities[selectedEnvironment.id]) && - !selectedEnvironment?.isNew + selectedEnvironment && + (selectedEnvironment.isNew || areEnvironmentInstructionsVisible) ) { return ( - - - + ); } if ( - !environmentActivities[selectedEnvironment.id]?.length || - selectedEnvironment.isNew + !selectedEnvironment || + !environmentActivities[selectedEnvironment.id] ) { - return ; + return ( + + + + ); } const headerHeight = entry?.target.clientHeight || 0; @@ -287,6 +311,9 @@ export const RecentActivity = (props: RecentActivityProps) => { onEnvironmentAdd={handleEnvironmentAdd} onEnvironmentDelete={handleEnvironmentDelete} onDigmathonModeButtonClick={handleDigmathonModeButtonClick} + onEnvironmentSetupInstructionsShow={ + handleEnvironmentSetupInstructionsShow + } /> diff --git a/src/components/common/icons/16px/TrashBinIcon.tsx b/src/components/common/icons/16px/TrashBinIcon.tsx new file mode 100644 index 000000000..69dc3ded4 --- /dev/null +++ b/src/components/common/icons/16px/TrashBinIcon.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { useIconProps } from "../hooks"; +import { IconProps } from "../types"; + +const TrashBinIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + + + + + + + + ); +}; + +export const TrashBinIcon = React.memo(TrashBinIconComponent); diff --git a/src/components/common/icons/16px/WrenchIcon.tsx b/src/components/common/icons/16px/WrenchIcon.tsx new file mode 100644 index 000000000..819e88952 --- /dev/null +++ b/src/components/common/icons/16px/WrenchIcon.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { useIconProps } from "../hooks"; +import { IconProps } from "../types"; + +const WrenchIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + + + + + + + + ); +}; + +export const WrenchIcon = React.memo(WrenchIconComponent); From bddfd8f259b5a5e94739c2b96f41ca088ba0988e Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Wed, 17 Apr 2024 16:45:20 +0200 Subject: [PATCH 02/10] Optimize images --- public/images/environmentId_dark.svg | 257 +++++---- public/images/environmentId_light.svg | 235 ++++---- .../howToSetupEnvironmentMenuItem_dark.svg | 534 +++++++++--------- .../howToSetupEnvironmentMenuItem_light.svg | 510 ++++++++--------- .../GetEnvironmentIdInstruction.tsx/index.tsx | 22 +- .../GetEnvironmentIdInstruction.tsx/styles.ts | 9 +- 6 files changed, 766 insertions(+), 801 deletions(-) diff --git a/public/images/environmentId_dark.svg b/public/images/environmentId_dark.svg index 5fc0ea654..c8b899086 100644 --- a/public/images/environmentId_dark.svg +++ b/public/images/environmentId_dark.svg @@ -1,129 +1,128 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/environmentId_light.svg b/public/images/environmentId_light.svg index 3cdd50ec0..aca04a1a4 100644 --- a/public/images/environmentId_light.svg +++ b/public/images/environmentId_light.svg @@ -1,119 +1,116 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/howToSetupEnvironmentMenuItem_dark.svg b/public/images/howToSetupEnvironmentMenuItem_dark.svg index 4e2874e3f..8f3a3beb1 100644 --- a/public/images/howToSetupEnvironmentMenuItem_dark.svg +++ b/public/images/howToSetupEnvironmentMenuItem_dark.svg @@ -1,275 +1,259 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/howToSetupEnvironmentMenuItem_light.svg b/public/images/howToSetupEnvironmentMenuItem_light.svg index a514637a8..0a2b7eb77 100644 --- a/public/images/howToSetupEnvironmentMenuItem_light.svg +++ b/public/images/howToSetupEnvironmentMenuItem_light.svg @@ -1,263 +1,247 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx index 6d4afee76..0a1bf0e25 100644 --- a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx +++ b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx @@ -9,30 +9,30 @@ export const GetEnvironmentIdInstruction = () => { return ( - + Follow the steps to get your Environment ID - - - - 1 + + + 1 + Click on hamburger menu next to your Environment in the Observability panel, and choose How to setup - - - - + + + + 2 On the How to setup your Digma Environment screen you can find your Environment ID - - + + ); }; diff --git a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts index 149acca26..dc7efbac5 100644 --- a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts +++ b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts @@ -21,23 +21,24 @@ export const Container = styled.div` } `; -export const Column = styled.div` +export const Section = styled.div` display: flex; flex-direction: column; + gap: 8px; `; -export const TitleColumn = styled(Column)` +export const TitleSection = styled(Section)` padding: 16px 0 24px; font-size: 16px; font-weight: 700; `; -export const Step = styled.div` +export const SectionContent = styled.div` ${footnoteRegularTypography} display: flex; flex-direction: column; - gap: 8px; + gap: 12px; `; export const Term = styled.span` From dd3c7d16f4ed179fcbc350ff7ca0e59d99ff8c4c Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Wed, 17 Apr 2024 17:21:02 +0200 Subject: [PATCH 03/10] Fix environment instructions hiding --- src/components/RecentActivity/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index 1d65f9246..c10241d89 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -111,7 +111,7 @@ export const RecentActivity = (props: RecentActivityProps) => { useEffect(() => { setAreEnvironmentInstructionsVisible(false); - }, [selectedEnvironment]); + }, [selectedEnvironment?.id]); useEffect(() => { window.sendMessageToDigma({ From f508a9cfabd67b7f7eafcb01e1a0ca2f2b3add4f Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 18 Apr 2024 00:44:11 +0200 Subject: [PATCH 04/10] Update styles Redirect to sign in after sign up Hide Close button in Environment instructions after its creation --- .../GetEnvironmentIdInstruction.tsx/index.tsx | 52 ++++++++++------ src/components/Insights/styles.ts | 2 +- .../Authentication/Login/Login.stories.tsx | 6 ++ .../Main/Authentication/Login/index.tsx | 11 +++- .../Main/Authentication/Login/types.ts | 5 ++ .../Authentication/Registration/index.tsx | 15 +++-- .../Main/Authentication/Registration/types.ts | 4 ++ src/components/Main/Authentication/index.tsx | 25 +++++++- src/components/Main/Authentication/styles.ts | 3 +- .../EnvironmentInstructionsPanel.stories.tsx | 4 +- .../EnvironmentInstructionsPanel/index.tsx | 62 ++++++++++--------- .../RecentActivity/EnvironmentMenu/index.tsx | 8 +-- .../RecentActivity/EnvironmentMenu/types.ts | 12 ++-- .../EnvironmentPanel/EnvironmentTab/index.tsx | 3 +- .../RecentActivity/WelcomeScreen/index.tsx | 24 ++++--- .../RecentActivity/WelcomeScreen/styles.ts | 6 +- src/components/RecentActivity/index.tsx | 14 +++++ 17 files changed, 167 insertions(+), 89 deletions(-) diff --git a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx index 0a1bf0e25..4c4b7585c 100644 --- a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx +++ b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx @@ -7,32 +7,44 @@ export const GetEnvironmentIdInstruction = () => { const theme = useTheme(); const themeKind = getThemeKind(theme); + const steps = [ + { + description: ( + + Click on hamburger menu next to your Environment in the Observability + panel, and choose How to setup + + ), + image: ( + + ) + }, + { + description: ( + + On the How to setup your Digma Environment screen you + can find your Environment ID + + ), + image: + } + ]; + return ( Follow the steps to get your Environment ID - - 1 - - - Click on hamburger menu next to your Environment in the - Observability panel, and choose How to setup - - - - - - - 2 - - On the How to setup your Digma Environment screen - you can find your Environment ID - - - - + {steps.map((x, i) => ( + + {i + 1} + + {x.description} + {x.image} + + + ))} ); }; diff --git a/src/components/Insights/styles.ts b/src/components/Insights/styles.ts index 5993699b4..51a4a1279 100644 --- a/src/components/Insights/styles.ts +++ b/src/components/Insights/styles.ts @@ -7,7 +7,7 @@ export const Container = styled.div` flex-direction: column; padding: 8px 0; gap: 8px; - height: 100%; + min-height: 100%; box-sizing: border-box; background: ${({ theme }) => theme.colors.v3.surface.primary}; position: relative; diff --git a/src/components/Main/Authentication/Login/Login.stories.tsx b/src/components/Main/Authentication/Login/Login.stories.tsx index 3479ab983..fcd53ce13 100644 --- a/src/components/Main/Authentication/Login/Login.stories.tsx +++ b/src/components/Main/Authentication/Login/Login.stories.tsx @@ -20,6 +20,12 @@ export const Default: Story = { args: {} }; +export const WithSuccessMessage: Story = { + args: { + successMessage: "Message" + } +}; + export const Failed: Story = { args: {}, play: () => { diff --git a/src/components/Main/Authentication/Login/index.tsx b/src/components/Main/Authentication/Login/index.tsx index 99ca2146a..ad73e9f08 100644 --- a/src/components/Main/Authentication/Login/index.tsx +++ b/src/components/Main/Authentication/Login/index.tsx @@ -14,7 +14,8 @@ import { Loader, SubmitButton } from "../styles"; -import { LoginFormValues } from "./types"; +import * as s from "./../styles"; +import { LoginFormValues, LoginProps } from "./types"; import { useLogin } from "./useLogin"; const formDefaultValues: LoginFormValues = { @@ -22,7 +23,7 @@ const formDefaultValues: LoginFormValues = { email: "" }; -export const Login = () => { +export const Login = ({ successMessage, onLogin }: LoginProps) => { const { handleSubmit, control, @@ -59,6 +60,7 @@ export const Login = () => { }, [clearErrors, watch]); const onSubmit = (data: LoginFormValues) => { + onLogin(); login({ email: data.email, password: data.password }); sendUserActionTrackingEvent("registration dialog form submitted"); }; @@ -119,6 +121,11 @@ export const Login = () => { form={"loginForm"} /> + {successMessage && ( + + Account registered successfully. Please login + + )} Forgot password? Contact the Digma admin {isLoading && ( diff --git a/src/components/Main/Authentication/Login/types.ts b/src/components/Main/Authentication/Login/types.ts index 1b1a0f47b..1a48b6e2b 100644 --- a/src/components/Main/Authentication/Login/types.ts +++ b/src/components/Main/Authentication/Login/types.ts @@ -1,3 +1,8 @@ +export interface LoginProps { + successMessage: string; + onLogin: () => void; +} + export interface LoginFormValues { password: string; email: string; diff --git a/src/components/Main/Authentication/Registration/index.tsx b/src/components/Main/Authentication/Registration/index.tsx index b73bb1d0f..334d8f8d1 100644 --- a/src/components/Main/Authentication/Registration/index.tsx +++ b/src/components/Main/Authentication/Registration/index.tsx @@ -9,7 +9,7 @@ import { EnvelopeIcon } from "../../../common/icons/16px/EnvelopeIcon"; import { Spinner } from "../../../common/v3/Spinner"; import * as s from "./../styles"; import { Loader } from "./../styles"; -import { RegisterFormValues } from "./types"; +import { RegisterFormValues, RegistrationProps } from "./types"; import { useRegistration } from "./useRegistration"; const validateEmail = (email: string): string | boolean => { @@ -44,7 +44,9 @@ const formDefaultValues: RegisterFormValues = { confirmPassword: "" }; -export const Registration = () => { +export const Registration = ({ + onSuccessfulRegistration +}: RegistrationProps) => { const { handleSubmit, control, @@ -85,6 +87,12 @@ export const Registration = () => { }); }, [clearErrors, watch, setResponseStatus]); + useEffect(() => { + if (isSucceed) { + onSuccessfulRegistration(); + } + }, [isSucceed, onSuccessfulRegistration]); + const onSubmit = (data: RegisterFormValues) => { register({ email: data.email, password: data.password }); sendUserActionTrackingEvent("registration dialog form submitted"); @@ -177,9 +185,6 @@ export const Registration = () => { {errorMessage && {errorMessage}} {responseStatus && {responseStatus}} - {isSucceed && ( - User created successfully! - )} void; +} + export interface RegisterFormValues { password: string; email: string; diff --git a/src/components/Main/Authentication/index.tsx b/src/components/Main/Authentication/index.tsx index a244813a0..4131a710e 100644 --- a/src/components/Main/Authentication/index.tsx +++ b/src/components/Main/Authentication/index.tsx @@ -10,11 +10,26 @@ import * as s from "./styles"; const AuthenticationComponent = () => { const [option, setOption] = useState<"login" | "register">("login"); + const [loginSuccessMessage, setLoginSuccessMessage] = useState(""); + + const handleSuccessfulRegistration = () => { + setOption("login"); + setLoginSuccessMessage("Account registered successfully! Please login"); + }; + + const handleLogin = () => { + setLoginSuccessMessage(""); + }; const handleSlackLinkClick = () => { openURLInDefaultBrowser(SLACK_WORKSPACE_URL); }; + const handleToggleValueChange = (option: "login" | "register") => { + setOption(option); + setLoginSuccessMessage(""); + }; + return ( @@ -42,9 +57,15 @@ const AuthenticationComponent = () => { } ]} value={option} - onValueChange={(option) => setOption(option)} + onValueChange={handleToggleValueChange} /> - {option === "login" ? : } + {option === "login" ? ( + + ) : ( + + )} diff --git a/src/components/Main/Authentication/styles.ts b/src/components/Main/Authentication/styles.ts index 7bbf34745..fe1fbfeb1 100644 --- a/src/components/Main/Authentication/styles.ts +++ b/src/components/Main/Authentication/styles.ts @@ -10,7 +10,7 @@ import { Link } from "../../common/v3/Link"; export const Container = styled.div` padding: 10px; - height: 100%; + min-height: 100%; gap: 16px; display: flex; flex-direction: column; @@ -100,6 +100,7 @@ export const ErrorMessage = styled(StatusMessage)` export const SuccessMessage = styled(StatusMessage)` color: ${({ theme }) => theme.colors.v3.status.success}; + text-align: center; `; export const SubmitButton = styled(Button)` diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx index 4884a8871..d0b8bf507 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx @@ -16,7 +16,7 @@ export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Local: Story = { +export const Private: Story = { args: { environment: { name: "MY_ENV", @@ -31,7 +31,7 @@ export const Local: Story = { } }; -export const Shared: Story = { +export const Public: Story = { args: { environment: { name: "MY_ENV", diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx index 8fbc65939..fd980322f 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx @@ -72,16 +72,12 @@ export const EnvironmentInstructionsPanel = ( setIsOrgDigmaSetupGuideVisible(false); }; - const close = () => { + const handleCloseButtonClick = () => { if (props.onClose) { props.onClose(); } }; - const handleCloseButtonClick = () => { - close(); - }; - if (isOrgDigmaSetupGuideVisible) { return ( @@ -118,14 +114,38 @@ export const EnvironmentInstructionsPanel = ( - + {props.onClose && ( + + )} ); }; + + const renderActions = () => ( + + + + Add to the active run config + + {state === AddToRunConfigState.success && ( + + Successfully added + + )} + {state === AddToRunConfigState.failure && ( + + Failed to add + + )} + + Troubleshoot + + ); + const environmentTypesContent: Record< EnvironmentType, EnvironmentInstructionsPanelContent @@ -142,26 +162,7 @@ export const EnvironmentInstructionsPanel = ( to tag the observability data with this run config: - - - - Add to the active run config - - {state === AddToRunConfigState.success && ( - - Successfully added - - )} - {state === AddToRunConfigState.failure && ( - - Failed to add - - )} - - - Troubleshoot - - + {renderActions()} ) }, @@ -202,6 +203,7 @@ export OTEL_SERVICE_NAME={--ENTER YOUR SERVICE NAME HERE--} export OTEL_RESOURCE_ATTRIBUTES=digma.environment.id="${props.environment.id}"`} language={"bash"} /> + {renderActions()} ) }, diff --git a/src/components/RecentActivity/EnvironmentMenu/index.tsx b/src/components/RecentActivity/EnvironmentMenu/index.tsx index b4ea8e11a..5ca95174a 100644 --- a/src/components/RecentActivity/EnvironmentMenu/index.tsx +++ b/src/components/RecentActivity/EnvironmentMenu/index.tsx @@ -14,11 +14,9 @@ export const EnvironmentMenu = (props: EnvironmentMenuProps) => { key={item.value} onClick={() => handleMenuItemClick(item.value)} > - {item.icon && ( - - - - )} + + + {item.label} ))} diff --git a/src/components/RecentActivity/EnvironmentMenu/types.ts b/src/components/RecentActivity/EnvironmentMenu/types.ts index 986f9bf1c..54f828c0b 100644 --- a/src/components/RecentActivity/EnvironmentMenu/types.ts +++ b/src/components/RecentActivity/EnvironmentMenu/types.ts @@ -1,11 +1,13 @@ import { MemoExoticComponent } from "react"; import { IconProps } from "../../common/icons/types"; +export interface EnvironmentMenuItem { + label: string; + value: string; + icon: MemoExoticComponent<(props: IconProps) => JSX.Element>; +} + export interface EnvironmentMenuProps { - items: { - label: string; - value: string; - icon?: MemoExoticComponent<(props: IconProps) => JSX.Element>; - }[]; + items: EnvironmentMenuItem[]; onSelect: (value: string) => void; } diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx index addc23263..537050a4a 100644 --- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx +++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx @@ -8,6 +8,7 @@ import { TrashBinIcon } from "../../../common/icons/16px/TrashBinIcon"; import { WrenchIcon } from "../../../common/icons/16px/WrenchIcon"; import { Badge } from "../../Badge"; import { EnvironmentMenu } from "../../EnvironmentMenu"; +import { EnvironmentMenuItem } from "../../EnvironmentMenu/types"; import * as s from "./styles"; import { EnvironmentTabProps } from "./types"; @@ -54,7 +55,7 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => { setIsMenuOpen(false); }; - const menuItems = [ + const menuItems: EnvironmentMenuItem[] = [ { label: "How to setup", value: "setup-instructions", icon: WrenchIcon }, { label: "Delete", value: "delete", icon: TrashBinIcon } ]; diff --git a/src/components/RecentActivity/WelcomeScreen/index.tsx b/src/components/RecentActivity/WelcomeScreen/index.tsx index f150c3a7a..16ba0de81 100644 --- a/src/components/RecentActivity/WelcomeScreen/index.tsx +++ b/src/components/RecentActivity/WelcomeScreen/index.tsx @@ -2,16 +2,14 @@ import { DigmaLoginLogo } from "../../common/icons/DigmaLoginLogo"; import { RecentActivityContainerBackgroundGradient } from "../styles"; import * as s from "./styles"; -export const WelcomeScreen = () => { - return ( - - - - - - Welcome to Digma - Please sign-in/sign-up first to use Digma - - - ); -}; +export const WelcomeScreen = () => ( + + + + + + Welcome to Digma + Please sign-in/sign-up first to use Digma + + +); diff --git a/src/components/RecentActivity/WelcomeScreen/styles.ts b/src/components/RecentActivity/WelcomeScreen/styles.ts index 2b201b99d..5a4d4f837 100644 --- a/src/components/RecentActivity/WelcomeScreen/styles.ts +++ b/src/components/RecentActivity/WelcomeScreen/styles.ts @@ -4,7 +4,7 @@ import { subscriptRegularTypography } from "../../common/App/typographies"; -export const NoUserContainer = styled.div` +export const Container = styled.div` display: flex; flex-direction: column; align-items: center; @@ -14,9 +14,11 @@ export const NoUserContainer = styled.div` gap: 12px; color: ${({ theme }) => theme.colors.v3.text.primary}; height: 100%; + overflow: hidden; + box-sizing: border-box; `; -export const Container = styled.div` +export const TextContainer = styled.div` display: flex; flex-direction: column; align-items: center; diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index c10241d89..9ca84365d 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -74,6 +74,7 @@ export const RecentActivity = (props: RecentActivityProps) => { areEnvironmentInstructionsVisible, setAreEnvironmentInstructionsVisible ] = useState(false); + const previousEnvironment = usePrevious(config.environment); const environmentActivities = useMemo( () => (data ? groupBy(data.entries, (x) => x.environment) : {}), @@ -129,6 +130,19 @@ export const RecentActivity = (props: RecentActivityProps) => { } }, [previousIsDigmathonCompleted, isDigmathonCompleted]); + useEffect(() => { + const environmentToSelect = environments.find( + (x) => x.id === config.environment?.id + ); + + if ( + environmentToSelect && + previousEnvironment?.id == environmentToSelect.id + ) { + setSelectedEnvironment(environmentToSelect); + } + }, [config.environment?.id, previousEnvironment?.id, environments]); + const handleEnvironmentSelect = (environment: ExtendedEnvironment) => { setSelectedEnvironment(environment); From f6b3e5be180e356b3e27fca1dccb68ccd3972359 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 18 Apr 2024 02:40:52 +0200 Subject: [PATCH 05/10] Fix environment instructions hiding --- .../getEnvironmentTabIdPrefix.ts | 2 + .../EnvironmentPanel/EnvironmentTab/index.tsx | 13 ++- .../RecentActivity/EnvironmentPanel/styles.ts | 7 +- src/components/RecentActivity/index.tsx | 83 ++++++++++++------- src/components/RecentActivity/types.ts | 7 +- 5 files changed, 74 insertions(+), 38 deletions(-) create mode 100644 src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/getEnvironmentTabIdPrefix.ts diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/getEnvironmentTabIdPrefix.ts b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/getEnvironmentTabIdPrefix.ts new file mode 100644 index 000000000..031f040ad --- /dev/null +++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/getEnvironmentTabIdPrefix.ts @@ -0,0 +1,2 @@ +export const getEnvironmentTabId = (environmentId: string) => + `environment-tab-${environmentId}`; diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx index 537050a4a..c62f5aed3 100644 --- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx +++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef, useState } from "react"; +import { useCallback, useState } from "react"; import { greenScale } from "../../../common/App/v2colors"; import { EnvironmentIcon } from "../../../common/EnvironmentIcon"; import { KebabMenuButton } from "../../../common/KebabMenuButton"; @@ -9,6 +9,7 @@ import { WrenchIcon } from "../../../common/icons/16px/WrenchIcon"; import { Badge } from "../../Badge"; import { EnvironmentMenu } from "../../EnvironmentMenu"; import { EnvironmentMenuItem } from "../../EnvironmentMenu/types"; +import { getEnvironmentTabId } from "./getEnvironmentTabIdPrefix"; import * as s from "./styles"; import { EnvironmentTabProps } from "./types"; @@ -17,8 +18,6 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => { const [isFocused, setIsFocused] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); - const containerRef = useRef(null); - const handleMouseEnter = useCallback(() => { setIsHovered(true); }, []); @@ -35,10 +34,6 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => { }, []); const handleClick = () => { - if (containerRef.current) { - containerRef.current.scrollIntoView(false); - } - props.onClick(props.environment); }; @@ -60,9 +55,11 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => { { label: "Delete", value: "delete", icon: TrashBinIcon } ]; + const environmentTabId = getEnvironmentTabId(props.environment.id); + return ( { + const environmentToSelect = environments?.find((x) => x.id === environmentId); + + if (environmentToSelect) { + window.sendMessageToDigma({ + action: globalActions.CHANGE_ENVIRONMENT, + payload: { + environment: environmentToSelect.id + } + }); + } +}; + export const RecentActivity = (props: RecentActivityProps) => { const [selectedEnvironment, setSelectedEnvironment] = useState(); @@ -71,9 +90,12 @@ export const RecentActivity = (props: RecentActivityProps) => { } = useDigmathonProgressData(); const previousIsDigmathonCompleted = usePrevious(isDigmathonCompleted); const [ - areEnvironmentInstructionsVisible, - setAreEnvironmentInstructionsVisible - ] = useState(false); + environmentInstructionsVisibility, + setEnvironmentInstructionsVisibility + ] = useState({ + isOpen: false, + keepOpen: false + }); const previousEnvironment = usePrevious(config.environment); const environmentActivities = useMemo( @@ -100,18 +122,26 @@ export const RecentActivity = (props: RecentActivityProps) => { ); if (environmentToSelect) { - environmentToSelect.isNew = environmentToSelect?.hasRecentActivity - ? false - : selectedEnvironment?.isNew; return environmentToSelect; } return environments[0]; }); - }, [environments]); + }, [environments, environmentActivities]); useEffect(() => { - setAreEnvironmentInstructionsVisible(false); + if (selectedEnvironment?.id) { + setEnvironmentInstructionsVisibility((state) => ({ + isOpen: selectedEnvironment.id === state.newlyCreatedEnvironmentId, + keepOpen: false + })); + + const environmentTabId = getEnvironmentTabId(selectedEnvironment.id); + const environmentTabElement = document.getElementById(environmentTabId); + if (environmentTabElement) { + environmentTabElement.scrollIntoView(false); + } + } }, [selectedEnvironment?.id]); useEffect(() => { @@ -146,18 +176,7 @@ export const RecentActivity = (props: RecentActivityProps) => { const handleEnvironmentSelect = (environment: ExtendedEnvironment) => { setSelectedEnvironment(environment); - const environmentToSelect = config.environments?.find( - (x) => x.id === environment.id - ); - - if (environmentToSelect) { - window.sendMessageToDigma({ - action: globalActions.CHANGE_ENVIRONMENT, - payload: { - environment: environmentToSelect.id - } - }); - } + changeSelectedEnvironment(config.environments, environment.id); }; const handleSpanLinkClick = (span: EntrySpan) => { @@ -212,11 +231,17 @@ export const RecentActivity = (props: RecentActivityProps) => { }; const handleEnvironmentSetupInstructionsShow = () => { - setAreEnvironmentInstructionsVisible(true); + setEnvironmentInstructionsVisibility({ + isOpen: true, + keepOpen: true + }); }; const handleEnvironmentSetupInstructionsClose = () => { - setAreEnvironmentInstructionsVisible(false); + setEnvironmentInstructionsVisibility({ + isOpen: false, + keepOpen: false + }); }; const handleDigmathonModeButtonClick = () => { @@ -228,15 +253,12 @@ export const RecentActivity = (props: RecentActivityProps) => { }; const renderContent = () => { - if ( - selectedEnvironment && - (selectedEnvironment.isNew || areEnvironmentInstructionsVisible) - ) { + if (selectedEnvironment && environmentInstructionsVisibility.isOpen) { return ( { if (newEnvId) { const newEnv = environments.find((x) => x.id == newEnvId); if (newEnv) { - newEnv.isNew = true; setSelectedEnvironment(newEnv); + setEnvironmentInstructionsVisibility({ + isOpen: true, + newlyCreatedEnvironmentId: newEnv.id, + keepOpen: false + }); + changeSelectedEnvironment(config.environments, newEnv.id); } } setShowCreationWizard(false); diff --git a/src/components/RecentActivity/types.ts b/src/components/RecentActivity/types.ts index 541073709..c6ddf76fd 100644 --- a/src/components/RecentActivity/types.ts +++ b/src/components/RecentActivity/types.ts @@ -73,7 +73,6 @@ export interface Environment { export interface ExtendedEnvironment extends Environment { hasRecentActivity: boolean; - isNew?: boolean; } export interface RecentActivityData { @@ -124,3 +123,9 @@ export interface EnvironmentCreatedData { errors?: ErrorResponseData[]; id: string; } + +export interface EnvironmentInstructionsVisibility { + isOpen: boolean; + newlyCreatedEnvironmentId?: string; + keepOpen: boolean; +} From 0ba1499ed61afaeaba61ed3552b37238f38473da Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 18 Apr 2024 13:05:23 +0200 Subject: [PATCH 06/10] Fix environment selection, update styles --- .../EnvironmentPanel/EnvironmentTab/index.tsx | 36 +++------ .../EnvironmentPanel/EnvironmentTab/styles.ts | 78 ++++++++++--------- .../EnvironmentPanel/EnvironmentTab/types.ts | 9 ++- src/components/RecentActivity/index.tsx | 29 ++----- .../common/KebabMenuButton/index.tsx | 7 +- .../common/KebabMenuButton/types.ts | 1 + 6 files changed, 71 insertions(+), 89 deletions(-) diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx index c62f5aed3..30ccee95e 100644 --- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx +++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx @@ -1,7 +1,6 @@ -import { useCallback, useState } from "react"; +import { useState } from "react"; import { greenScale } from "../../../common/App/v2colors"; import { EnvironmentIcon } from "../../../common/EnvironmentIcon"; -import { KebabMenuButton } from "../../../common/KebabMenuButton"; import { NewPopover } from "../../../common/NewPopover"; import { Tooltip } from "../../../common/Tooltip"; import { TrashBinIcon } from "../../../common/icons/16px/TrashBinIcon"; @@ -14,25 +13,8 @@ import * as s from "./styles"; import { EnvironmentTabProps } from "./types"; export const EnvironmentTab = (props: EnvironmentTabProps) => { - const [isHovered, setIsHovered] = useState(false); - const [isFocused, setIsFocused] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); - const handleMouseEnter = useCallback(() => { - setIsHovered(true); - }, []); - const handleMouseLeave = useCallback(() => { - setIsHovered(false); - }, []); - - const handleFocus = useCallback(() => { - setIsFocused(true); - }, []); - - const handleBlur = useCallback(() => { - setIsFocused(false); - }, []); - const handleClick = () => { props.onClick(props.environment); }; @@ -61,17 +43,14 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => { - {props.environment.name} + + {props.environment.name} + {props.environment.hasRecentActivity && ( { )} - {menuItems.length > 0 && (isHovered || isFocused || isMenuOpen) && ( + {menuItems.length > 0 && ( { placement={"bottom-start"} > - + )} diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts index f9344d8ee..67c328f62 100644 --- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts +++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts @@ -1,47 +1,51 @@ -import styled from "styled-components"; -import { ContainerProps } from "./types"; +import styled, { css } from "styled-components"; +import { subscriptRegularTypography } from "../../../common/App/typographies"; +import { KebabMenuButton } from "../../../common/KebabMenuButton"; +import { + ContainerProps, + LabelProps, + StyledKebabMenuButtonProps +} from "./types"; + +export const StyledKebabMenuButton = styled( + KebabMenuButton +)` + color: ${({ theme, $isMenuOpen }) => + $isMenuOpen ? theme.colors.v3.icon.primary : theme.colors.v3.icon.tertiary}; + + &:hover, + &:focus, + &:active { + color: ${({ theme, $isSelected, $isMenuOpen }) => + $isSelected || $isMenuOpen + ? theme.colors.v3.icon.primary + : theme.colors.v3.icon.tertiary}; + } +`; export const Container = styled.li` + ${subscriptRegularTypography} + display: flex; cursor: pointer; - font-size: 13px; padding: 0 4px; user-select: none; align-items: center; gap: 4px; box-sizing: border-box; - color: ${({ theme, $isPending, $isSelected }) => { - if ($isPending) { - return theme.colors.tab.text.disabled; - } + color: ${({ theme, $isSelected }) => + $isSelected + ? theme.colors.v3.icon.primary + : theme.colors.v3.icon.secondary}; - if ($isSelected) { - return theme.colors.tab.text.focus; - } - - return theme.colors.tab.text.default; - }}; - background: ${({ theme }) => theme.colors.tab.background.default}; - border-bottom: ${({ theme, $isSelected }) => - $isSelected ? `1px solid ${theme.colors.tab.borderBottom.focus}` : "none"}; - - &:hover, - &:focus { - color: ${({ theme, $isPending, $isSelected }) => { - if ($isPending) { - return theme.colors.tab.text.disabled; - } - - if ($isSelected) { - return theme.colors.tab.text.focus; - } - - return theme.colors.tab.text.hover; - }}; - background: ${({ theme }) => theme.colors.tab.background.hover}; - border-bottom: ${({ theme }) => - `1px solid ${theme.colors.tab.borderBottom.hover}`}; - } + ${({ $isSelected }) => + $isSelected + ? css` + background: ${({ theme }) => theme.colors.v3.surface.primaryLight}; + border-bottom: 1px solid + ${({ theme }) => theme.colors.v3.stroke.brandPrimary}; + ` + : ""} `; export const LabelContainer = styled.div` @@ -50,9 +54,13 @@ export const LabelContainer = styled.div` gap: 8px; `; -export const Label = styled.span` +export const Label = styled.span` white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 110px; + color: ${({ theme, $isSelected }) => + $isSelected + ? theme.colors.v3.text.primary + : theme.colors.v3.text.secondary}; `; diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts index 12533ff92..2bd47b9e2 100644 --- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts +++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts @@ -1,3 +1,4 @@ +import { KebabMenuButtonProps } from "../../../common/KebabMenuButton/types"; import { ExtendedEnvironment } from "../../types"; export interface TabThemeColors { @@ -29,5 +30,11 @@ export interface EnvironmentTabProps { export interface ContainerProps { $isSelected: boolean; - $isPending?: boolean; } + +export type LabelProps = ContainerProps; + +export type StyledKebabMenuButtonProps = ContainerProps & + KebabMenuButtonProps & { + $isMenuOpen: boolean; + }; diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index e98f5a995..0061708dc 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -96,7 +96,6 @@ export const RecentActivity = (props: RecentActivityProps) => { isOpen: false, keepOpen: false }); - const previousEnvironment = usePrevious(config.environment); const environmentActivities = useMemo( () => (data ? groupBy(data.entries, (x) => x.environment) : {}), @@ -115,20 +114,6 @@ export const RecentActivity = (props: RecentActivityProps) => { [data, environmentActivities] ); - useEffect(() => { - setSelectedEnvironment((selectedEnvironment) => { - const environmentToSelect = environments.find( - (x) => x.id === selectedEnvironment?.id - ); - - if (environmentToSelect) { - return environmentToSelect; - } - - return environments[0]; - }); - }, [environments, environmentActivities]); - useEffect(() => { if (selectedEnvironment?.id) { setEnvironmentInstructionsVisibility((state) => ({ @@ -165,17 +150,14 @@ export const RecentActivity = (props: RecentActivityProps) => { (x) => x.id === config.environment?.id ); - if ( - environmentToSelect && - previousEnvironment?.id == environmentToSelect.id - ) { + if (environmentToSelect) { setSelectedEnvironment(environmentToSelect); + } else { + setSelectedEnvironment(environments[0]); } - }, [config.environment?.id, previousEnvironment?.id, environments]); + }, [config.environment?.id, environments]); const handleEnvironmentSelect = (environment: ExtendedEnvironment) => { - setSelectedEnvironment(environment); - changeSelectedEnvironment(config.environments, environment.id); }; @@ -316,13 +298,12 @@ export const RecentActivity = (props: RecentActivityProps) => { if (newEnvId) { const newEnv = environments.find((x) => x.id == newEnvId); if (newEnv) { - setSelectedEnvironment(newEnv); + changeSelectedEnvironment(config.environments, newEnv.id); setEnvironmentInstructionsVisibility({ isOpen: true, newlyCreatedEnvironmentId: newEnv.id, keepOpen: false }); - changeSelectedEnvironment(config.environments, newEnv.id); } } setShowCreationWizard(false); diff --git a/src/components/common/KebabMenuButton/index.tsx b/src/components/common/KebabMenuButton/index.tsx index 0273804a5..afb1b517b 100644 --- a/src/components/common/KebabMenuButton/index.tsx +++ b/src/components/common/KebabMenuButton/index.tsx @@ -3,8 +3,11 @@ import { ThreeDotsIcon } from "../icons/ThreeDotsIcon"; import * as s from "./styles"; import { KebabMenuButtonProps } from "./types"; -export const KebabMenuButton = (props: KebabMenuButtonProps) => ( - +export const KebabMenuButton = ({ + disabled, + className +}: KebabMenuButtonProps) => ( + ); diff --git a/src/components/common/KebabMenuButton/types.ts b/src/components/common/KebabMenuButton/types.ts index 6fbbb199d..3cd455b8b 100644 --- a/src/components/common/KebabMenuButton/types.ts +++ b/src/components/common/KebabMenuButton/types.ts @@ -1,3 +1,4 @@ export interface KebabMenuButtonProps { disabled?: boolean; + className?: string; } From 1b47a023566681ef67e975e13e5efe40ada09950 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 18 Apr 2024 15:17:25 +0200 Subject: [PATCH 07/10] Update styles --- .../EnvironmentPanel/EnvironmentTab/styles.ts | 2 +- .../RecentActivity/EnvironmentPanel/styles.ts | 1 - src/components/common/CodeSnippet/index.tsx | 18 +-- src/components/common/CodeSnippet/styles.ts | 9 +- .../common/FloatingIconButton/index.tsx | 24 ---- .../common/FloatingIconButton/styles.ts | 110 ------------------ src/components/common/icons/16px/CopyIcon.tsx | 34 ++++++ src/components/common/v3/IconButton/index.tsx | 27 +++++ src/components/common/v3/IconButton/styles.ts | 25 ++++ .../IconButton}/types.ts | 4 +- 10 files changed, 102 insertions(+), 152 deletions(-) delete mode 100644 src/components/common/FloatingIconButton/index.tsx delete mode 100644 src/components/common/FloatingIconButton/styles.ts create mode 100644 src/components/common/icons/16px/CopyIcon.tsx create mode 100644 src/components/common/v3/IconButton/index.tsx create mode 100644 src/components/common/v3/IconButton/styles.ts rename src/components/common/{FloatingIconButton => v3/IconButton}/types.ts (74%) diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts index 67c328f62..d10509bd7 100644 --- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts +++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts @@ -28,7 +28,7 @@ export const Container = styled.li` display: flex; cursor: pointer; - padding: 0 4px; + padding: 0 8px; user-select: none; align-items: center; gap: 4px; diff --git a/src/components/RecentActivity/EnvironmentPanel/styles.ts b/src/components/RecentActivity/EnvironmentPanel/styles.ts index 399f4b709..3392d4ae4 100644 --- a/src/components/RecentActivity/EnvironmentPanel/styles.ts +++ b/src/components/RecentActivity/EnvironmentPanel/styles.ts @@ -36,7 +36,6 @@ export const EnvironmentListContainer = styled.div` export const EnvironmentList = styled.ul` display: flex; - gap: 12px; margin: 0; padding: 0; `; diff --git a/src/components/common/CodeSnippet/index.tsx b/src/components/common/CodeSnippet/index.tsx index 7d4430f91..acd211f3a 100644 --- a/src/components/common/CodeSnippet/index.tsx +++ b/src/components/common/CodeSnippet/index.tsx @@ -6,7 +6,9 @@ import { atomOneLight } from "react-syntax-highlighter/dist/esm/styles/hljs"; import { DefaultTheme, useTheme } from "styled-components"; -import { CopyIcon } from "../icons/CopyIcon"; +import { CopyIcon } from "../icons/12px/CopyIcon"; +import { IconButton } from "../v3/IconButton"; +import { Tooltip } from "../v3/Tooltip"; import * as s from "./styles"; import { CodeSnippetProps, HighlighterTheme } from "./types"; @@ -51,12 +53,14 @@ const CodeSnippetComponent = ( ) : ( {props.text} )} - + + + ); }; diff --git a/src/components/common/CodeSnippet/styles.ts b/src/components/common/CodeSnippet/styles.ts index 43a434252..796b7a21b 100644 --- a/src/components/common/CodeSnippet/styles.ts +++ b/src/components/common/CodeSnippet/styles.ts @@ -1,12 +1,11 @@ import styled from "styled-components"; import { getCodeFont } from "../App/styles"; -import { FloatingIconButton } from "../FloatingIconButton"; export const Container = styled.div` - padding: 4px 4px 4px 8px; + padding: 6px 8px; border-radius: 4px; display: flex; - gap: 27px; + gap: 8px; align-items: flex-start; justify-content: space-between; background: ${({ theme }) => { @@ -39,7 +38,3 @@ export const Code = styled.code` } }}; `; - -export const CopyButton = styled(FloatingIconButton)` - padding: 3px; -`; diff --git a/src/components/common/FloatingIconButton/index.tsx b/src/components/common/FloatingIconButton/index.tsx deleted file mode 100644 index 51deca3d3..000000000 --- a/src/components/common/FloatingIconButton/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import * as s from "./styles"; -import { FloatingIconButtonProps } from "./types"; - -export const FloatingIconButton = (props: FloatingIconButtonProps) => { - const handleClick = (e: React.MouseEvent) => { - if (props.onClick) { - props.onClick(e); - } - }; - - return ( - - - - ); -}; diff --git a/src/components/common/FloatingIconButton/styles.ts b/src/components/common/FloatingIconButton/styles.ts deleted file mode 100644 index 81124a853..000000000 --- a/src/components/common/FloatingIconButton/styles.ts +++ /dev/null @@ -1,110 +0,0 @@ -import styled from "styled-components"; - -export const Button = styled.button` - padding: 6px; - border-radius: 4px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - width: max-content; - user-select: none; - box-shadow: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "1px 1px 3px rgb(0 0 0 / 15%)"; - case "dark": - case "dark-jetbrains": - return "1px 1px 4px rgb(0 0 0 / 25%)"; - } - }}; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f1f5fa"; - case "dark": - case "dark-jetbrains": - return "#2e2e2e"; - } - }}; - border: 1px solid - ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#fbfdff"; - case "dark": - case "dark-jetbrains": - return "#383838"; - } - }}; - color: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#494b57"; - case "dark": - case "dark-jetbrains": - return "#dfe1e5"; - } - }}; - - &:hover, - &:focus { - color: #7891d0; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f1f5fa"; - case "dark": - case "dark-jetbrains": - return "#49494d"; - } - }}; - } - - &:active { - color: #b9c2eb; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f1f5fa"; - case "dark": - case "dark-jetbrains": - return "#2e2e2e"; - } - }}; - border: 1px solid - ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#fbfdff"; - case "dark": - case "dark-jetbrains": - return "#383838"; - } - }}; - } - - &:disabled { - cursor: initial; - color: #49494d; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f1f5fa"; - case "dark": - case "dark-jetbrains": - return "#2e2e2e"; - } - }}; - border: 1px solid - ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#fbfdff"; - case "dark": - case "dark-jetbrains": - return "#383838"; - } - }}; - } -`; diff --git a/src/components/common/icons/16px/CopyIcon.tsx b/src/components/common/icons/16px/CopyIcon.tsx new file mode 100644 index 000000000..7c82cd92b --- /dev/null +++ b/src/components/common/icons/16px/CopyIcon.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { useIconProps } from "../hooks"; +import { IconProps } from "../types"; + +const CopyIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + + + + + + + + + ); +}; + +export const CopyIcon = React.memo(CopyIconComponent); diff --git a/src/components/common/v3/IconButton/index.tsx b/src/components/common/v3/IconButton/index.tsx new file mode 100644 index 000000000..4cc69f56a --- /dev/null +++ b/src/components/common/v3/IconButton/index.tsx @@ -0,0 +1,27 @@ +import React, { ForwardedRef, forwardRef } from "react"; +import * as s from "./styles"; +import { IconButtonProps } from "./types"; + +const IconButtonComponent = ( + { onClick, className, disabled, icon }: IconButtonProps, + ref: ForwardedRef +) => { + const handleClick = (e: React.MouseEvent) => { + if (onClick) { + onClick(e); + } + }; + + return ( + + + + ); +}; + +export const IconButton = forwardRef(IconButtonComponent); diff --git a/src/components/common/v3/IconButton/styles.ts b/src/components/common/v3/IconButton/styles.ts new file mode 100644 index 000000000..330fb7b1b --- /dev/null +++ b/src/components/common/v3/IconButton/styles.ts @@ -0,0 +1,25 @@ +import styled from "styled-components"; + +export const Button = styled.button` + padding: 0; + cursor: pointer; + display: flex; + flex-shrink: 0; + user-select: none; + background: none; + border: none; + color: ${({ theme }) => theme.colors.v3.icon.tertiary}; + + &:hover, + &:focus { + color: ${({ theme }) => theme.colors.v3.icon.primary}; + } + + &:active { + color: ${({ theme }) => theme.colors.v3.icon.brandTertiary}; + } + + &:disabled { + color: ${({ theme }) => theme.colors.v3.icon.disabled}; + } +`; diff --git a/src/components/common/FloatingIconButton/types.ts b/src/components/common/v3/IconButton/types.ts similarity index 74% rename from src/components/common/FloatingIconButton/types.ts rename to src/components/common/v3/IconButton/types.ts index 3c318a52a..42111304d 100644 --- a/src/components/common/FloatingIconButton/types.ts +++ b/src/components/common/v3/IconButton/types.ts @@ -1,7 +1,7 @@ import { ComponentType, MouseEventHandler } from "react"; -import { IconProps } from "../icons/types"; +import { IconProps } from "../../icons/types"; -export interface FloatingIconButtonProps { +export interface IconButtonProps { icon: { component: ComponentType; color?: string; From aeff0f1fbd9492862d91c70f0d821389866f2f8e Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 18 Apr 2024 16:12:26 +0200 Subject: [PATCH 08/10] Fix instructions for Micrometer --- .../RecentActivity/EnvironmentInstructionsPanel/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx index fd980322f..538409aa5 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx @@ -31,7 +31,7 @@ const getEnvironmentVariableString = ( environmentId: string ) => isMicrometerProject - ? `MANAGEMENT_OPENTELEMETRY_RESOURCE-ATTRIBUTES_digma_environment=${environmentId}` + ? `MANAGEMENT_OPENTELEMETRY_RESOURCE-ATTRIBUTES_digma_environment_id=${environmentId}` : `OTEL_RESOURCE_ATTRIBUTES=digma.environment.id=${environmentId}`; export const EnvironmentInstructionsPanel = ( From e2429aa453959d5ac4da471d7ba2f45cc4b75fe0 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Fri, 19 Apr 2024 15:03:37 +0200 Subject: [PATCH 09/10] Update styles --- .../GetEnvironmentIdInstruction.tsx/index.tsx | 14 +++-- .../GetEnvironmentIdInstruction.tsx/styles.ts | 31 +++-------- .../RunDigma/runDigmaWithCommandLine.tsx | 2 +- .../SpanDurationsInsightCard/constants.ts | 2 +- .../Main/Authentication/Login/index.tsx | 6 +-- .../Main/Authentication/Login/types.ts | 2 +- .../Authentication/Registration/index.tsx | 8 ++- .../Main/Authentication/Registration/types.ts | 2 +- src/components/Main/Authentication/index.tsx | 8 ++- .../EnvironmentInstructionsPanel/index.tsx | 54 +++++++------------ .../EnvironmentInstructionsPanel/styles.ts | 15 ++---- src/components/common/App/typographies.ts | 30 +++++++++++ src/components/common/CodeSnippet/index.tsx | 7 +-- src/components/common/CodeSnippet/styles.ts | 30 +++-------- src/components/common/icons/16px/CopyIcon.tsx | 2 +- src/components/common/v3/IconButton/styles.ts | 2 +- src/constants.ts | 3 ++ src/styled.d.ts | 4 +- 18 files changed, 97 insertions(+), 125 deletions(-) diff --git a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx index 4c4b7585c..0d2f2695f 100644 --- a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx +++ b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx @@ -9,10 +9,11 @@ export const GetEnvironmentIdInstruction = () => { const steps = [ { + id: "how-to-setup-menu-item", description: ( - Click on hamburger menu next to your Environment in the Observability - panel, and choose How to setup + Click on the environment options menu in the observability panel and + select How to setup ), image: ( @@ -20,11 +21,9 @@ export const GetEnvironmentIdInstruction = () => { ) }, { + id: "copy-environment-id", description: ( - - On the How to setup your Digma Environment screen you - can find your Environment ID - + Copy the Environment ID value from the instructions page ), image: } @@ -34,10 +33,9 @@ export const GetEnvironmentIdInstruction = () => { Follow the steps to get your Environment ID - {steps.map((x, i) => ( - + {i + 1} {x.description} diff --git a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts index dc7efbac5..6ea99bd34 100644 --- a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts +++ b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts @@ -1,20 +1,15 @@ import styled from "styled-components"; -import { footnoteRegularTypography } from "../../../../common/App/typographies"; +import { + footnoteRegularTypography, + subheadingBoldTypography +} from "../../../../common/App/typographies"; export const Container = styled.div` display: flex; gap: 16px; padding: 16px; border-radius: 4px; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f7f8fa"; - case "dark": - case "dark-jetbrains": - return "#2b2d30"; - } - }}; + background: ${({ theme }) => theme.colors.v3.surface.primary}; & > * { flex: 1 1 0; @@ -28,9 +23,10 @@ export const Section = styled.div` `; export const TitleSection = styled(Section)` + ${subheadingBoldTypography} + + color: ${({ theme }) => theme.colors.v3.text.primary}; padding: 16px 0 24px; - font-size: 16px; - font-weight: 700; `; export const SectionContent = styled.div` @@ -40,14 +36,3 @@ export const SectionContent = styled.div` flex-direction: column; gap: 12px; `; - -export const Term = styled.span` - font-weight: 700; -`; - -export const Arrow = styled.img` - display: block; - margin-top: auto; - width: 25%; - min-width: 33px; -`; diff --git a/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx b/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx index 79273c0de..8c5a1d18f 100644 --- a/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx +++ b/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx @@ -41,7 +41,7 @@ export const runDigmaWithCommandLine: PageContent = { `} language={"xml"} - > + /> To collect data with Digma when you run your application from command line you should now run: diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts index 02cb81b7e..9480c3d7d 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts @@ -1,4 +1,4 @@ import { typographies } from "../../../../../common/App/typographies"; -export const LABEL_HEIGHT = typographies.captionOne.lineHeight; +export const LABEL_HEIGHT = typographies.captionOne.lineHeight || 14; export const DIVIDER = " | "; diff --git a/src/components/Main/Authentication/Login/index.tsx b/src/components/Main/Authentication/Login/index.tsx index ad73e9f08..491864e57 100644 --- a/src/components/Main/Authentication/Login/index.tsx +++ b/src/components/Main/Authentication/Login/index.tsx @@ -121,11 +121,7 @@ export const Login = ({ successMessage, onLogin }: LoginProps) => { form={"loginForm"} /> - {successMessage && ( - - Account registered successfully. Please login - - )} + {successMessage && {successMessage}} Forgot password? Contact the Digma admin {isLoading && ( diff --git a/src/components/Main/Authentication/Login/types.ts b/src/components/Main/Authentication/Login/types.ts index 1a48b6e2b..9108a23b3 100644 --- a/src/components/Main/Authentication/Login/types.ts +++ b/src/components/Main/Authentication/Login/types.ts @@ -1,5 +1,5 @@ export interface LoginProps { - successMessage: string; + successMessage?: string; onLogin: () => void; } diff --git a/src/components/Main/Authentication/Registration/index.tsx b/src/components/Main/Authentication/Registration/index.tsx index 334d8f8d1..4a0ec9e99 100644 --- a/src/components/Main/Authentication/Registration/index.tsx +++ b/src/components/Main/Authentication/Registration/index.tsx @@ -44,9 +44,7 @@ const formDefaultValues: RegisterFormValues = { confirmPassword: "" }; -export const Registration = ({ - onSuccessfulRegistration -}: RegistrationProps) => { +export const Registration = ({ onRegister }: RegistrationProps) => { const { handleSubmit, control, @@ -89,9 +87,9 @@ export const Registration = ({ useEffect(() => { if (isSucceed) { - onSuccessfulRegistration(); + onRegister(); } - }, [isSucceed, onSuccessfulRegistration]); + }, [isSucceed, onRegister]); const onSubmit = (data: RegisterFormValues) => { register({ email: data.email, password: data.password }); diff --git a/src/components/Main/Authentication/Registration/types.ts b/src/components/Main/Authentication/Registration/types.ts index 2cc178217..e59bfc626 100644 --- a/src/components/Main/Authentication/Registration/types.ts +++ b/src/components/Main/Authentication/Registration/types.ts @@ -1,5 +1,5 @@ export interface RegistrationProps { - onSuccessfulRegistration: () => void; + onRegister: () => void; } export interface RegisterFormValues { diff --git a/src/components/Main/Authentication/index.tsx b/src/components/Main/Authentication/index.tsx index 4131a710e..a91f32142 100644 --- a/src/components/Main/Authentication/index.tsx +++ b/src/components/Main/Authentication/index.tsx @@ -10,9 +10,9 @@ import * as s from "./styles"; const AuthenticationComponent = () => { const [option, setOption] = useState<"login" | "register">("login"); - const [loginSuccessMessage, setLoginSuccessMessage] = useState(""); + const [loginSuccessMessage, setLoginSuccessMessage] = useState(); - const handleSuccessfulRegistration = () => { + const handleRegister = () => { setOption("login"); setLoginSuccessMessage("Account registered successfully! Please login"); }; @@ -62,9 +62,7 @@ const AuthenticationComponent = () => { {option === "login" ? ( ) : ( - + )} diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx index 538409aa5..eade37a6d 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx @@ -2,18 +2,19 @@ import copy from "copy-to-clipboard"; import { useContext, useState } from "react"; import { useTheme } from "styled-components"; import { actions as globalActions } from "../../../actions"; -import { CENTRAL_ON_PREM_INSTALLATION_GUIDE_URL } from "../../../constants"; +import { INSTRUMENTATION_DOCUMENTATION_URL } from "../../../constants"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; -import { getHostnameFromURL } from "../../../utils/getHostNameFromURL"; import { ConfigContext } from "../../common/App/ConfigContext"; import { getThemeKind } from "../../common/App/styles"; import { EnvironmentType } from "../../common/App/types"; +import { CodeSnippet } from "../../common/CodeSnippet"; import { Link } from "../../common/Link"; -import { CopyIcon } from "../../common/icons/12px/CopyIcon"; +import { CopyIcon } from "../../common/icons/16px/CopyIcon"; import { DesktopIcon } from "../../common/icons/DesktopIcon"; import { InfinityIcon } from "../../common/icons/InfinityIcon"; import { PlayButtonWithCursorIcon } from "../../common/icons/PlayButtonWithCursorIcon"; +import { IconButton } from "../../common/v3/IconButton"; import { Tooltip } from "../../common/v3/Tooltip"; import { SetupOrgDigmaPanel } from "../SetupOrgDigmaPanel"; import { Overlay } from "../common/Overlay"; @@ -42,8 +43,6 @@ export const EnvironmentInstructionsPanel = ( const theme = useTheme(); const themeKind = getThemeKind(theme); const config = useContext(ConfigContext); - const hostname = - getHostnameFromURL(config.digmaApiUrl) || "[DIGMA_BACKEND_URL]"; const environmentVariableString = getEnvironmentVariableString( config.isMicrometerProject, props.environment.id @@ -51,9 +50,8 @@ export const EnvironmentInstructionsPanel = ( const { addToRunConfig, state } = useAddToRunConfig(props.environment.id); - const handleOrgDigmaSetupGuideLinkClick = () => { - // setIsOrgDigmaSetupGuideVisible(true); - openURLInDefaultBrowser(CENTRAL_ON_PREM_INSTALLATION_GUIDE_URL); + const handleDocumentationLinkClick = () => { + openURLInDefaultBrowser(INSTRUMENTATION_DOCUMENTATION_URL); }; const handleAddToRunConfigLinkClick = () => { @@ -108,9 +106,13 @@ export const EnvironmentInstructionsPanel = ( {environmentId} - - - + @@ -161,7 +163,7 @@ export const EnvironmentInstructionsPanel = ( Set up the following environment variables when running your code to tag the observability data with this run config: - + {renderActions()} ) @@ -189,21 +191,13 @@ export const EnvironmentInstructionsPanel = ( content: ( <> - Add the following to your build/prod deployment scripts, - don't forget to set the SERVICE_NAME variable + Please see our{" "} + + Digma Developer Guide + {" "} + for the best way to instrument your application and send data to + Digma. Use the following environment ID: {props.environment.id} - - {renderActions()} ) }, @@ -235,14 +229,6 @@ export OTEL_RESOURCE_ATTRIBUTES=digma.environment.id="${props.environment.id}"`} return ( {renderHeaderContent(content.title)} - {props.environment.type === "Public" && ( - - CI/Prod environments require Digma to be installed in your - organization. Follow{" "} - these steps{" "} - to set that up. - - )} diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts index 2772a83f8..99faa4132 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts @@ -1,4 +1,5 @@ import styled from "styled-components"; +import { getCodeFont } from "../../common/App/styles"; import { bodyMediumTypography, footnoteRegularTypography, @@ -146,10 +147,11 @@ export const EnvironmentIdLabel = styled.span` `; export const EnvironmentIdContainer = styled.div` + ${({ theme }) => getCodeFont(theme.codeFont)} + display: flex; - gap: 8px; align-items: center; - padding: 6px 8px; + padding-left: 8px; border-radius: 4px; border: 1px solid ${({ theme }) => theme.colors.v3.surface.gray}; max-width: 299px; @@ -164,15 +166,6 @@ export const EnvironmentId = styled.span` overflow: hidden; `; -export const CopyButton = styled.button` - color: ${({ theme }) => theme.colors.v3.icon.secondary}; - border: none; - background: none; - padding: 0; - display: flex; - cursor: pointer; -`; - export const CloseButton = styled(Button)` margin-left: auto; `; diff --git a/src/components/common/App/typographies.ts b/src/components/common/App/typographies.ts index c1472d2d9..8a75b8bb8 100644 --- a/src/components/common/App/typographies.ts +++ b/src/components/common/App/typographies.ts @@ -2,6 +2,26 @@ import { css } from "styled-components"; import { Typographies } from "../../../styled"; export const typographies: Typographies = { + code: { + fontSize: 14, + fontWeight: { + light: 300, + regular: 400, + medium: 500, + semibold: 600, + bold: 700 + } + }, + subheading: { + fontSize: 16, + fontWeight: { + light: 300, + regular: 400, + medium: 500, + semibold: 600, + bold: 700 + } + }, body: { fontSize: 14, fontWeight: { @@ -142,3 +162,13 @@ export const bodySemiboldTypography = css` font-weight: ${typographies.body.fontWeight.semibold}; line-height: ${typographies.body.lineHeight}px; `; + +export const subheadingBoldTypography = css` + font-size: ${typographies.subheading.fontSize}px; + font-weight: ${typographies.subheading.fontWeight.bold}; +`; + +export const codeRegularTypography = css` + font-size: ${typographies.code.fontSize}px; + font-weight: ${typographies.code.fontWeight.regular}; +`; diff --git a/src/components/common/CodeSnippet/index.tsx b/src/components/common/CodeSnippet/index.tsx index acd211f3a..409c9fd84 100644 --- a/src/components/common/CodeSnippet/index.tsx +++ b/src/components/common/CodeSnippet/index.tsx @@ -6,7 +6,7 @@ import { atomOneLight } from "react-syntax-highlighter/dist/esm/styles/hljs"; import { DefaultTheme, useTheme } from "styled-components"; -import { CopyIcon } from "../icons/12px/CopyIcon"; +import { CopyIcon } from "../icons/16px/CopyIcon"; import { IconButton } from "../v3/IconButton"; import { Tooltip } from "../v3/Tooltip"; import * as s from "./styles"; @@ -40,7 +40,7 @@ const CodeSnippetComponent = ( language={props.language} style={highlighterTheme} customStyle={{ - padding: 0, + padding: "6px 0 6px 8px", color: "inherit", background: "none" }} @@ -57,7 +57,8 @@ const CodeSnippetComponent = ( diff --git a/src/components/common/CodeSnippet/styles.ts b/src/components/common/CodeSnippet/styles.ts index 796b7a21b..5be1ad890 100644 --- a/src/components/common/CodeSnippet/styles.ts +++ b/src/components/common/CodeSnippet/styles.ts @@ -1,40 +1,22 @@ import styled from "styled-components"; import { getCodeFont } from "../App/styles"; +import { codeRegularTypography } from "../App/typographies"; export const Container = styled.div` - padding: 6px 8px; border-radius: 4px; display: flex; - gap: 8px; align-items: flex-start; justify-content: space-between; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f7f8fa"; - case "dark": - case "dark-jetbrains": - return "#2b2d30"; - } - }}; + border: 1px solid ${({ theme }) => theme.colors.v3.surface.gray}; `; export const Code = styled.code` + ${codeRegularTypography} + ${({ theme }) => getCodeFont(theme.codeFont)} - font-weight: 500; - font-size: 14px; - line-height: 20px; - letter-spacing: -0.1px; white-space: pre-wrap; word-break: break-word; - color: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#494b57"; - case "dark": - case "dark-jetbrains": - return "#dfe1e5"; - } - }}; + padding: 6px 0 6px 8px; + color: ${({ theme }) => theme.colors.v3.text.primary}; `; diff --git a/src/components/common/icons/16px/CopyIcon.tsx b/src/components/common/icons/16px/CopyIcon.tsx index 7c82cd92b..ae4320d6f 100644 --- a/src/components/common/icons/16px/CopyIcon.tsx +++ b/src/components/common/icons/16px/CopyIcon.tsx @@ -11,7 +11,7 @@ const CopyIconComponent = (props: IconProps) => { width={size} height={size} fill="none" - viewBox="0 0 12 12" + viewBox="0 0 16 16" > Date: Fri, 19 Apr 2024 15:25:54 +0200 Subject: [PATCH 10/10] Remove empty args in stories --- src/components/Assets/Assets.stories.tsx | 4 +--- .../InsightHeader/AsyncTag/AsyncTag.stories.tsx | 4 +--- .../ProductionAffectionBar.stories.tsx | 4 +--- .../InsightCard/RecalculateBar/RecalculateBar.stories.tsx | 4 +--- .../Main/Authentication/Authentication.stories.tsx | 4 +--- .../Main/Authentication/Login/Login.stories.tsx | 5 +---- .../Authentication/Registration/Registration.stories.tsx | 5 +---- .../AnimatedCodeButton/AnimatedCodeButton.stories.tsx | 4 +--- .../Navigation/EnvironmentBar/EnvironmentBar.stories.tsx | 4 +--- src/components/Navigation/KebabMenu/KebabMenu.stories.tsx | 4 +--- src/components/Navigation/ScopeBar/ScopeBar.stories.tsx | 4 +--- .../ScopeNavigation/ScopeNavigation.stories.tsx | 8 ++------ .../EnvironmentTypeStep/EnvironmentTypeStep.stories.tsx | 4 +--- .../RegisterStep/RegisterStep.stories.tsx | 4 +--- .../WelcomeScreen/WelcomeScreen.stories.tsx | 4 +--- src/components/Tests/Tests.stories.tsx | 4 +--- src/components/common/SearchInput/SearchInput.stories.tsx | 4 +--- src/components/common/v3/NewTag/NewTag.stories.tsx | 4 +--- 18 files changed, 19 insertions(+), 59 deletions(-) diff --git a/src/components/Assets/Assets.stories.tsx b/src/components/Assets/Assets.stories.tsx index 460964847..0fe51a129 100644 --- a/src/components/Assets/Assets.stories.tsx +++ b/src/components/Assets/Assets.stories.tsx @@ -17,6 +17,4 @@ export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx index 3837003fc..bead0b053 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx @@ -16,6 +16,4 @@ export default meta; type Story = StoryObj; -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx index 7047c5f62..4340b3aab 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx @@ -16,9 +16,7 @@ export default meta; type Story = StoryObj; -export const WithoutTicket: Story = { - args: {} -}; +export const WithoutTicket: Story = {}; export const WithTicket: Story = { args: { diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx index 0c40dbff7..9b3d22c93 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx @@ -16,6 +16,4 @@ export default meta; type Story = StoryObj; -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; diff --git a/src/components/Main/Authentication/Authentication.stories.tsx b/src/components/Main/Authentication/Authentication.stories.tsx index c4d83af0c..d8e69a2f2 100644 --- a/src/components/Main/Authentication/Authentication.stories.tsx +++ b/src/components/Main/Authentication/Authentication.stories.tsx @@ -15,6 +15,4 @@ export default meta; type Story = StoryObj; -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; diff --git a/src/components/Main/Authentication/Login/Login.stories.tsx b/src/components/Main/Authentication/Login/Login.stories.tsx index fcd53ce13..06942caa0 100644 --- a/src/components/Main/Authentication/Login/Login.stories.tsx +++ b/src/components/Main/Authentication/Login/Login.stories.tsx @@ -16,9 +16,7 @@ export default meta; type Story = StoryObj; -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; export const WithSuccessMessage: Story = { args: { @@ -27,7 +25,6 @@ export const WithSuccessMessage: Story = { }; export const Failed: Story = { - args: {}, play: () => { setTimeout( () => diff --git a/src/components/Main/Authentication/Registration/Registration.stories.tsx b/src/components/Main/Authentication/Registration/Registration.stories.tsx index 6ddabb0ed..fafa3f464 100644 --- a/src/components/Main/Authentication/Registration/Registration.stories.tsx +++ b/src/components/Main/Authentication/Registration/Registration.stories.tsx @@ -16,12 +16,9 @@ export default meta; type Story = StoryObj; -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; export const Failed: Story = { - args: {}, play: () => { setTimeout( () => diff --git a/src/components/Navigation/CodeButton/AnimatedCodeButton/AnimatedCodeButton.stories.tsx b/src/components/Navigation/CodeButton/AnimatedCodeButton/AnimatedCodeButton.stories.tsx index 4dabe329e..4b9da87c3 100644 --- a/src/components/Navigation/CodeButton/AnimatedCodeButton/AnimatedCodeButton.stories.tsx +++ b/src/components/Navigation/CodeButton/AnimatedCodeButton/AnimatedCodeButton.stories.tsx @@ -17,6 +17,4 @@ export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; diff --git a/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx b/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx index ff26ca2d5..ea346d0c8 100644 --- a/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx +++ b/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx @@ -27,6 +27,4 @@ export const Default: Story = { } }; -export const Disabled: Story = { - args: {} -}; +export const Disabled: Story = {}; diff --git a/src/components/Navigation/KebabMenu/KebabMenu.stories.tsx b/src/components/Navigation/KebabMenu/KebabMenu.stories.tsx index c0d201a76..80908c9f2 100644 --- a/src/components/Navigation/KebabMenu/KebabMenu.stories.tsx +++ b/src/components/Navigation/KebabMenu/KebabMenu.stories.tsx @@ -17,6 +17,4 @@ export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; diff --git a/src/components/Navigation/ScopeBar/ScopeBar.stories.tsx b/src/components/Navigation/ScopeBar/ScopeBar.stories.tsx index f8eb28512..f79c96fca 100644 --- a/src/components/Navigation/ScopeBar/ScopeBar.stories.tsx +++ b/src/components/Navigation/ScopeBar/ScopeBar.stories.tsx @@ -65,9 +65,7 @@ const mockedCodeContext: CodeContext = { // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; export const Home: Story = { args: { diff --git a/src/components/Navigation/ScopeNavigation/ScopeNavigation.stories.tsx b/src/components/Navigation/ScopeNavigation/ScopeNavigation.stories.tsx index eeab49964..818a6e027 100644 --- a/src/components/Navigation/ScopeNavigation/ScopeNavigation.stories.tsx +++ b/src/components/Navigation/ScopeNavigation/ScopeNavigation.stories.tsx @@ -17,10 +17,6 @@ export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; -export const Disabled: Story = { - args: {} -}; +export const Disabled: Story = {}; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentTypeStep/EnvironmentTypeStep.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentTypeStep/EnvironmentTypeStep.stories.tsx index 2642e3fec..119c46a49 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentTypeStep/EnvironmentTypeStep.stories.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentTypeStep/EnvironmentTypeStep.stories.tsx @@ -16,6 +16,4 @@ export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/RegisterStep.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/RegisterStep.stories.tsx index 11a0d5749..5f8a8beb9 100644 --- a/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/RegisterStep.stories.tsx +++ b/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/RegisterStep.stories.tsx @@ -16,6 +16,4 @@ export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; diff --git a/src/components/RecentActivity/WelcomeScreen/WelcomeScreen.stories.tsx b/src/components/RecentActivity/WelcomeScreen/WelcomeScreen.stories.tsx index c72aeb28e..d269c98cc 100644 --- a/src/components/RecentActivity/WelcomeScreen/WelcomeScreen.stories.tsx +++ b/src/components/RecentActivity/WelcomeScreen/WelcomeScreen.stories.tsx @@ -13,6 +13,4 @@ export default meta; type Story = StoryObj; -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; diff --git a/src/components/Tests/Tests.stories.tsx b/src/components/Tests/Tests.stories.tsx index 9764db579..a86b7de8a 100644 --- a/src/components/Tests/Tests.stories.tsx +++ b/src/components/Tests/Tests.stories.tsx @@ -88,6 +88,4 @@ export const Error: Story = { } }; -export const Loading: Story = { - args: {} -}; +export const Loading: Story = {}; diff --git a/src/components/common/SearchInput/SearchInput.stories.tsx b/src/components/common/SearchInput/SearchInput.stories.tsx index 01c8355d2..b9f57a6fe 100644 --- a/src/components/common/SearchInput/SearchInput.stories.tsx +++ b/src/components/common/SearchInput/SearchInput.stories.tsx @@ -17,9 +17,7 @@ export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Default: Story = { - args: {} -}; +export const Default: Story = {}; export const Disabled: Story = { args: { diff --git a/src/components/common/v3/NewTag/NewTag.stories.tsx b/src/components/common/v3/NewTag/NewTag.stories.tsx index b539d7cbf..fd4f071da 100644 --- a/src/components/common/v3/NewTag/NewTag.stories.tsx +++ b/src/components/common/v3/NewTag/NewTag.stories.tsx @@ -15,6 +15,4 @@ export default meta; type Story = StoryObj; -export const Default: Story = { - args: {} -}; +export const Default: Story = {};