From 059960432e46ecc835d8da2cb0dcad7f370518d6 Mon Sep 17 00:00:00 2001 From: stanislavh Date: Tue, 9 May 2023 17:29:59 +0200 Subject: [PATCH] SONAR-19236 Add base layout for Hotspots page --- .../sonar-web/src/main/js/@types/emotion.d.ts | 25 ++++ .../js/app/components/GlobalContainer.tsx | 2 +- .../SecurityHotspotsAppRenderer.tsx | 110 +++++++++++------- 3 files changed, 91 insertions(+), 46 deletions(-) create mode 100644 server/sonar-web/src/main/js/@types/emotion.d.ts diff --git a/server/sonar-web/src/main/js/@types/emotion.d.ts b/server/sonar-web/src/main/js/@types/emotion.d.ts new file mode 100644 index 00000000000..0a014408918 --- /dev/null +++ b/server/sonar-web/src/main/js/@types/emotion.d.ts @@ -0,0 +1,25 @@ +/* + * SonarQube + * Copyright (C) 2009-2023 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import '@emotion/react'; +import { Theme as SQTheme } from 'design-system'; + +declare module '@emotion/react' { + export interface Theme extends SQTheme {} +} diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx index e9bf7fb4761..9468d011da4 100644 --- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx +++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx @@ -38,7 +38,7 @@ import GlobalNav from './nav/global/GlobalNav'; import PromotionNotification from './promotion-notification/PromotionNotification'; import UpdateNotification from './update-notification/UpdateNotification'; -const TEMP_PAGELIST_WITH_NEW_BACKGROUND = ['/dashboard']; +const TEMP_PAGELIST_WITH_NEW_BACKGROUND = ['/dashboard', '/security_hotspots']; export default function GlobalContainer() { // it is important to pass `location` down to `GlobalNav` to trigger render on url change diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx index 580f7592375..c3ffa806242 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx @@ -17,15 +17,23 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; +import { + LargeCenteredLayout, + PageContentFontWrapper, + themeBorder, + themeColor, +} from 'design-system'; import * as React from 'react'; import { Helmet } from 'react-helmet-async'; import A11ySkipTarget from '../../components/a11y/A11ySkipTarget'; -import ScreenPositionHelper from '../../components/common/ScreenPositionHelper'; import Suggestions from '../../components/embed-docs-modal/Suggestions'; import DeferredSpinner from '../../components/ui/DeferredSpinner'; import { isBranch } from '../../helpers/branch-like'; import { translate } from '../../helpers/l10n'; import { BranchLike } from '../../types/branch-like'; +import { MetricKey } from '../../types/metrics'; import { SecurityStandard, Standards } from '../../types/security'; import { HotspotFilters, HotspotStatusFilter, RawHotspot } from '../../types/security-hotspots'; import { Component, StandardSecurityCategories } from '../../types/types'; @@ -86,7 +94,7 @@ export default function SecurityHotspotsAppRenderer(props: SecurityHotspotsAppRe standards, } = props; - const scrollableRef = React.useRef(null); + const theme = useTheme(); React.useEffect(() => { if (!selectedHotspot) { @@ -102,7 +110,7 @@ export default function SecurityHotspotsAppRenderer(props: SecurityHotspotsAppRe }, [selectedHotspot]); return ( -
+ <> @@ -116,32 +124,28 @@ export default function SecurityHotspotsAppRenderer(props: SecurityHotspotsAppRe onBranch={isBranch(branchLike)} onChangeFilters={props.onChangeFilters} /> + + +
+ - {loading && ( -
-
- -
-
- )} - - {!loading && - (hotspots.length === 0 || !selectedHotspot ? ( - - ) : ( -
- - {({ top }) => ( -
-
+ {!loading && + (hotspots.length === 0 || !selectedHotspot ? ( + + ) : ( + <> + {filterByCategory || filterByCWE || filterByFile ? ( )} -
-
- )} - + -
- -
+
+ +
+ + ))}
- ))} -
+ + + ); } + +const FilterbarStyled = styled.div( + (props) => ` +position: sticky; +box-sizing: border-box; +overflow-x: hidden; +overflow-y: auto; +background-color: ${themeColor('filterbar')(props)}; +border-right: ${themeBorder('default', 'filterbarBorder')(props)}; +// ToDo set proper hegiht +height: calc(100vh - ${'100px'}); + +&.border-left { + border-left: ${themeBorder('default', 'filterbarBorder')(props)}; +}` +); -- 2.39.5