From 6df6530cbea743e3e65b48496ef0fe9a781babb2 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Mon, 27 Jan 2025 15:05:14 +0100 Subject: [PATCH 1/2] Enable Installation Wizard Close button on the first launch --- .../CodeIssues/IssuesSidebar/index.tsx | 77 +++++++++++-------- .../CodeIssues/IssuesSidebar/styles.ts | 25 ++++++ .../Reports/CodeIssues/IssuesSidebar/types.ts | 2 + .../Admin/Reports/CodeIssues/index.tsx | 7 +- .../Admin/Reports/CodeIssues/styles.ts | 17 ---- src/components/InstallationWizard/index.tsx | 8 +- 6 files changed, 75 insertions(+), 61 deletions(-) diff --git a/src/components/Admin/Reports/CodeIssues/IssuesSidebar/index.tsx b/src/components/Admin/Reports/CodeIssues/IssuesSidebar/index.tsx index 7d0120c07..2ddb09c89 100644 --- a/src/components/Admin/Reports/CodeIssues/IssuesSidebar/index.tsx +++ b/src/components/Admin/Reports/CodeIssues/IssuesSidebar/index.tsx @@ -11,6 +11,7 @@ import { isUndefined } from "../../../../../typeGuards/isUndefined"; import type { Scope } from "../../../../common/App/types"; import { CrossIcon } from "../../../../common/icons/16px/CrossIcon"; import { EyeIcon } from "../../../../common/icons/16px/EyeIcon"; +import { TwoVerticalLinesIcon } from "../../../../common/icons/16px/TwoVerticalLinesIcon"; import { Pagination } from "../../../../common/Pagination"; import { NewButton } from "../../../../common/v3/NewButton"; import { NewIconButton } from "../../../../common/v3/NewIconButton"; @@ -56,7 +57,8 @@ export const IssuesSidebar = ({ environmentId, viewLevel, isTransitioning, - isResizing + isResizing, + onResizeHandleMouseDown }: IssuesSidebarProps) => { const [infoToOpenJiraTicket, setInfoToOpenJiraTicket] = useState>(); @@ -211,40 +213,47 @@ export const IssuesSidebar = ({ isTargetButtonMenuVisible={false} /> - {data ? ( - data.insights.length > 0 ? ( - - {environmentId && - data.insights.map((insight, i) => ( - - ))} - + + + + + {data ? ( + data.insights.length > 0 ? ( + + {environmentId && + data.insights.map((insight, i) => ( + + ))} + + ) : ( + + ) ) : ( - - ) - ) : ( - isFetching && - )} + isFetching && + )} + {totalCount > 0 && ( <> diff --git a/src/components/Admin/Reports/CodeIssues/IssuesSidebar/styles.ts b/src/components/Admin/Reports/CodeIssues/IssuesSidebar/styles.ts index 5de53eef2..40e399f33 100644 --- a/src/components/Admin/Reports/CodeIssues/IssuesSidebar/styles.ts +++ b/src/components/Admin/Reports/CodeIssues/IssuesSidebar/styles.ts @@ -37,12 +37,37 @@ export const HeaderTitleRow = styled.div` align-items: center; `; +export const ResizeHandle = styled.div` + width: 16px; + cursor: ew-resize; + position: absolute; + top: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + color: ${({ theme }) => theme.colors.v3.icon.disabled}; + + &:hover { + color: ${({ theme }) => theme.colors.v3.icon.secondary}; + } +`; + +export const ContentContainer = styled.div` + position: relative; + flex-grow: 1; + display: flex; + overflow-y: auto; +`; + export const IssuesList = styled.div` display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 16px; + width: 100%; `; export const Footer = styled.div` diff --git a/src/components/Admin/Reports/CodeIssues/IssuesSidebar/types.ts b/src/components/Admin/Reports/CodeIssues/IssuesSidebar/types.ts index 9da549040..23d558eb6 100644 --- a/src/components/Admin/Reports/CodeIssues/IssuesSidebar/types.ts +++ b/src/components/Admin/Reports/CodeIssues/IssuesSidebar/types.ts @@ -1,3 +1,4 @@ +import type { MouseEvent } from "react"; import type { IssuesReportViewLevel } from "../../../../../redux/slices/issuesReportSlice"; export interface IssuesSidebarProps { @@ -10,6 +11,7 @@ export interface IssuesSidebarProps { viewLevel: IssuesReportViewLevel; isTransitioning: boolean; isResizing?: boolean; + onResizeHandleMouseDown: (e: MouseEvent) => void; } export interface DrawerContainerProps { diff --git a/src/components/Admin/Reports/CodeIssues/index.tsx b/src/components/Admin/Reports/CodeIssues/index.tsx index 414c9ab29..de74e1a77 100644 --- a/src/components/Admin/Reports/CodeIssues/index.tsx +++ b/src/components/Admin/Reports/CodeIssues/index.tsx @@ -19,7 +19,6 @@ import { type IssuesReportViewLevel, type IssuesReportViewMode } from "../../../../redux/slices/issuesReportSlice"; -import { TwoVerticalLinesIcon } from "../../../common/icons/16px/TwoVerticalLinesIcon"; import { IssuesReport } from "../../../common/IssuesReport"; import type { TargetScope } from "../../../common/IssuesReport/types"; import { IssuesSidebar } from "./IssuesSidebar"; @@ -153,7 +152,7 @@ export const CodeIssues = () => { setIsIssuesSidebarTransitioning(false); }; - const handleResizeHandleMouseDown = (e: React.MouseEvent) => { + const handleResizeHandleMouseDown = (e: React.MouseEvent) => { setIsResizeHandlePressed(true); setStartX(e.clientX); setStartLeft(left); @@ -247,9 +246,6 @@ export const CodeIssues = () => { $transitionClassName={s.sidebarContainerTransitionClassName} $transitionDuration={s.TRANSITION_DURATION} > - - - { environmentId={selectedEnvironmentId ?? undefined} viewLevel={viewLevel} isTransitioning={isIssuesSidebarTransitioning} + onResizeHandleMouseDown={handleResizeHandleMouseDown} /> diff --git a/src/components/Admin/Reports/CodeIssues/styles.ts b/src/components/Admin/Reports/CodeIssues/styles.ts index de7c84827..3d621b0cd 100644 --- a/src/components/Admin/Reports/CodeIssues/styles.ts +++ b/src/components/Admin/Reports/CodeIssues/styles.ts @@ -64,20 +64,3 @@ export const IssuesSidebarContainer = styled.div` } `} `; - -export const ResizeHandle = styled.div` - width: 16px; - cursor: ew-resize; - position: absolute; - top: 0; - bottom: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - color: ${({ theme }) => theme.colors.v3.icon.disabled}; - - &:hover { - color: ${({ theme }) => theme.colors.v3.icon.secondary}; - } -`; diff --git a/src/components/InstallationWizard/index.tsx b/src/components/InstallationWizard/index.tsx index 6bd61c9ee..2194f5c23 100644 --- a/src/components/InstallationWizard/index.tsx +++ b/src/components/InstallationWizard/index.tsx @@ -370,11 +370,9 @@ export const InstallationWizard = () => { Follow the steps to configure your projects - {!isFirstLaunch && ( - - - - )} + + + {/* ) : ( From 2cabc2d96ba6d25e739dcd92539f081005e6d34e Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Mon, 27 Jan 2025 15:38:02 +0100 Subject: [PATCH 2/2] Fix sidebar width on window resize --- .../Admin/Reports/CodeIssues/index.tsx | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/Admin/Reports/CodeIssues/index.tsx b/src/components/Admin/Reports/CodeIssues/index.tsx index de74e1a77..0c654a9c3 100644 --- a/src/components/Admin/Reports/CodeIssues/index.tsx +++ b/src/components/Admin/Reports/CodeIssues/index.tsx @@ -51,10 +51,11 @@ export const CodeIssues = () => { const overlayRef = useRef(null); const [isIssuesSidebarTransitioning, setIsIssuesSidebarTransitioning] = useState(false); - const defaultSidebarWidth = getDefaultSidebarWidth(window.innerWidth); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + const defaultSidebarWidth = getDefaultSidebarWidth(windowWidth); const [isResizeHandlePressed, setIsResizeHandlePressed] = useState(false); const [startX, setStartX] = useState(0); - const [left, setLeft] = useState(window.innerWidth - defaultSidebarWidth); + const [left, setLeft] = useState(windowWidth - defaultSidebarWidth); const [startLeft, setStartLeft] = useState(0); const selectedEnvironmentId = useAdminSelector( @@ -158,6 +159,23 @@ export const CodeIssues = () => { setStartLeft(left); }; + const handleWindowResize = () => { + setWindowWidth(window.innerWidth); + }; + + useEffect(() => { + window.addEventListener("resize", handleWindowResize); + + return () => { + window.removeEventListener("resize", handleWindowResize); + }; + }, []); + + useEffect(() => { + const newLeft = windowWidth - getDefaultSidebarWidth(windowWidth); + setLeft(newLeft); + }, [windowWidth]); + useEffect(() => { if (!isResizeHandlePressed) { return; @@ -166,8 +184,8 @@ export const CodeIssues = () => { const handleMouseMove = (e: MouseEvent) => { const newLeft = startLeft + (e.clientX - startX); if ( - newLeft >= window.innerWidth - MAX_SIDEBAR_WIDTH && - newLeft <= window.innerWidth - MIN_SIDEBAR_WIDTH + newLeft >= windowWidth - MAX_SIDEBAR_WIDTH && + newLeft <= windowWidth - MIN_SIDEBAR_WIDTH ) { setLeft(newLeft); } @@ -184,7 +202,7 @@ export const CodeIssues = () => { document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); }; - }, [isResizeHandlePressed, startX, startLeft, left]); + }, [isResizeHandlePressed, windowWidth, startX, startLeft, left]); return (