Enable Installation Wizard Close button on the first launch

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<InsightTicketInfo<GenericCodeObjectInsight>>();
@@ -211,40 +213,47 @@ export const IssuesSidebar = ({
           isTargetButtonMenuVisible={false}
         />
       </s.Header>
-      {data ? (
-        data.insights.length > 0 ? (
-          <s.IssuesList ref={issuesListRef}>
-            {environmentId &&
-              data.insights.map((insight, i) => (
-                <InsightCardRenderer
-                  key={insight.id}
-                  insight={insight}
-                  onJiraTicketCreate={handleJiraTicketPopupOpen}
-                  isJiraHintEnabled={
-                    !isInsightJiraTicketHintShown &&
-                    !isDrawerOpen &&
-                    !isDrawerTransitioning &&
-                    !isTransitioning &&
-                    i === getInsightToShowJiraHint(data.insights)
-                  }
-                  onRefresh={refresh}
-                  isMarkAsReadButtonEnabled={false}
-                  viewMode={"full"}
-                  environmentId={environmentId}
-                  onDismissalChange={handleDismissalChange}
-                  onOpenSuggestion={handleOpenSuggestion}
-                  tooltipBoundaryRef={issuesListRef}
-                />
-              ))}
-          </s.IssuesList>
+      <s.ContentContainer>
+        <s.ResizeHandle onMouseDown={onResizeHandleMouseDown}>
+          <TwoVerticalLinesIcon size={16} color={"currentColor"} />
+        </s.ResizeHandle>
+        {data ? (
+          data.insights.length > 0 ? (
+            <s.IssuesList ref={issuesListRef}>
+              {environmentId &&
+                data.insights.map((insight, i) => (
+                  <InsightCardRenderer
+                    key={insight.id}
+                    insight={insight}
+                    onJiraTicketCreate={handleJiraTicketPopupOpen}
+                    isJiraHintEnabled={
+                      !isInsightJiraTicketHintShown &&
+                      !isDrawerOpen &&
+                      !isDrawerTransitioning &&
+                      !isTransitioning &&
+                      i === getInsightToShowJiraHint(data.insights)
+                    }
+                    onRefresh={refresh}
+                    isMarkAsReadButtonEnabled={false}
+                    viewMode={"full"}
+                    environmentId={environmentId}
+                    onDismissalChange={handleDismissalChange}
+                    onOpenSuggestion={handleOpenSuggestion}
+                    tooltipBoundaryRef={issuesListRef}
+                  />
+                ))}
+            </s.IssuesList>
+          ) : (
+            <InsightsPageEmptyState
+              preset={
+                viewMode === ViewMode.All ? "noDataYet" : "noDismissedData"
+              }
+            />
+          )
         ) : (
-          <InsightsPageEmptyState
-            preset={viewMode === ViewMode.All ? "noDataYet" : "noDismissedData"}
-          />
-        )
-      ) : (
-        isFetching && <EmptyState preset={"loading"} />
-      )}
+          isFetching && <EmptyState preset={"loading"} />
+        )}
+      </s.ContentContainer>
       <s.Footer>
         {totalCount > 0 && (
           <>

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`

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 {

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";
@@ -52,10 +51,11 @@ export const CodeIssues = () => {
   const overlayRef = useRef<HTMLDivElement>(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(
@@ -153,12 +153,29 @@ export const CodeIssues = () => {
     setIsIssuesSidebarTransitioning(false);
   };
 
-  const handleResizeHandleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+  const handleResizeHandleMouseDown = (e: React.MouseEvent) => {
     setIsResizeHandlePressed(true);
     setStartX(e.clientX);
     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;
@@ -167,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);
       }
@@ -185,7 +202,7 @@ export const CodeIssues = () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [isResizeHandlePressed, startX, startLeft, left]);
+  }, [isResizeHandlePressed, windowWidth, startX, startLeft, left]);
 
   return (
     <s.Container>
@@ -247,16 +264,14 @@ export const CodeIssues = () => {
           $transitionClassName={s.sidebarContainerTransitionClassName}
           $transitionDuration={s.TRANSITION_DURATION}
         >
-          <s.ResizeHandle onMouseDown={handleResizeHandleMouseDown}>
-            <TwoVerticalLinesIcon size={16} color={"currentColor"} />
-          </s.ResizeHandle>
           <IssuesSidebar
             isResizing={isResizeHandlePressed}
             onClose={handleIssuesSidebarClose}
             scope={scope}
             environmentId={selectedEnvironmentId ?? undefined}
             viewLevel={viewLevel}
             isTransitioning={isIssuesSidebarTransitioning}
+            onResizeHandleMouseDown={handleResizeHandleMouseDown}
           />
         </s.IssuesSidebarContainer>
       </CSSTransition>

src/components/Admin/Reports/CodeIssues/styles.ts

@@ -64,20 +64,3 @@ export const IssuesSidebarContainer = styled.div<IssuesSidebarContainerProps>`
     }
   `}
 `;
-
-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};
-  }
-`;

src/components/InstallationWizard/index.tsx

@@ -370,11 +370,9 @@ export const InstallationWizard = () => {
             Follow the steps to configure your projects
           </s.HeaderSubtitle>
         </s.HeaderTitleContainer>
-        {!isFirstLaunch && (
-          <s.CloseButton onClick={handleCloseButtonClick}>
-            <CrossIcon color={"currentColor"} size={14} />
-          </s.CloseButton>
-        )}
+        <s.CloseButton onClick={handleCloseButtonClick}>
+          <CrossIcon color={"currentColor"} size={14} />
+        </s.CloseButton>
       </s.Header>
       {/* ) : (
         <s.WelcomeContainer>