SONAR-19604 Fixing z-index for dropdown inside activity page

diff --git a/server/sonar-web/design-system/src/components/DatePicker.tsx b/server/sonar-web/design-system/src/components/DatePicker.tsx
index 0bb34725c2d489e9dc629328a3480e29c8abf671..838fbd04cc0128f864d860fbd7c621e1f7161db0 100644 (file)
--- a/server/sonar-web/design-system/src/components/DatePicker.tsx
+++ b/server/sonar-web/design-system/src/components/DatePicker.tsx
@@ -77,6 +77,7 @@ interface Props {
   size?: InputSizeKeys;
   value?: Date;
   valueFormatter?: (date?: Date) => string;
+  zLevel?: PopupZLevel;
 }
 
 interface State {
@@ -144,6 +145,7 @@ export class DatePicker extends React.PureComponent<Props, State> {
       showClearButton = true,
       valueFormatter = (date?: Date) => (date ? format(date, 'MMM d, yyyy') : ''),
       size,
+      zLevel = PopupZLevel.Global,
     } = this.props;
     const { lastHovered, currentMonth, open } = this.state;
 
@@ -206,7 +208,7 @@ export class DatePicker extends React.PureComponent<Props, State> {
                 ) : null
               }
               placement={alignRight ? PopupPlacement.BottomRight : PopupPlacement.BottomLeft}
-              zLevel={PopupZLevel.Global}
+              zLevel={zLevel}
             >
               <span
                 className={classNames('sw-relative sw-inline-block sw-cursor-pointer', className)}

diff --git a/server/sonar-web/design-system/src/components/DateRangePicker.tsx b/server/sonar-web/design-system/src/components/DateRangePicker.tsx
index 01e73b17baf52e67eb17c2c98b538b77575e6dd3..f44ca09e0ca6018d436849882beb50d778f44ce0 100644 (file)
--- a/server/sonar-web/design-system/src/components/DateRangePicker.tsx
+++ b/server/sonar-web/design-system/src/components/DateRangePicker.tsx
@@ -20,6 +20,7 @@
 import classNames from 'classnames';
 import { max, min } from 'date-fns';
 import * as React from 'react';
+import { PopupZLevel } from '../helpers';
 import { DatePicker } from './DatePicker';
 import { LightLabel } from './Text';
 
@@ -42,6 +43,7 @@ interface Props {
   toLabel: string;
   value?: DateRange;
   valueFormatter?: (date?: Date) => string;
+  zLevel?: PopupZLevel;
 }
 
 export class DateRangePicker extends React.PureComponent<Props> {
@@ -82,6 +84,7 @@ export class DateRangePicker extends React.PureComponent<Props> {
       separatorText,
       toLabel,
       valueFormatter,
+      zLevel,
     } = this.props;
 
     return (
@@ -101,6 +104,7 @@ export class DateRangePicker extends React.PureComponent<Props> {
           size="full"
           value={this.from}
           valueFormatter={valueFormatter}
+          zLevel={zLevel}
         />
         <LightLabel className="sw-mx-2">{separatorText ?? '–'}</LightLabel>
         <DatePicker
@@ -122,6 +126,7 @@ export class DateRangePicker extends React.PureComponent<Props> {
           size="full"
           value={this.to}
           valueFormatter={valueFormatter}
+          zLevel={zLevel}
         />
       </div>
     );

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppRenderer.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppRenderer.tsx
index ec4085ef343971e4796a56b0b118553123e33011..d953fcc37185eb16956aab98bd7e31358459d9c4 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppRenderer.tsx
@@ -18,7 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { LargeCenteredLayout, themeBorder, themeColor } from 'design-system';
+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';
@@ -66,50 +71,52 @@ export default function ProjectActivityAppRenderer(props: Props) {
 
       <A11ySkipTarget anchor="activity_main" />
       <LargeCenteredLayout>
-        <ProjectActivityPageFilters
-          category={query.category}
-          from={query.from}
-          project={props.project}
-          to={query.to}
-          updateQuery={props.onUpdateQuery}
-        />
+        <PageContentFontWrapper>
+          <ProjectActivityPageFilters
+            category={query.category}
+            from={query.from}
+            project={props.project}
+            to={query.to}
+            updateQuery={props.onUpdateQuery}
+          />
 
-        <div className="sw-grid sw-grid-cols-12 sw-gap-x-12">
-          <StyledWrapper className="sw-col-span-4 sw-rounded-1">
-            <ProjectActivityAnalysesList
-              onAddCustomEvent={props.onAddCustomEvent}
-              onAddVersion={props.onAddVersion}
-              analyses={analyses}
-              analysesLoading={props.analysesLoading}
-              canAdmin={canAdmin}
-              canDeleteAnalyses={canDeleteAnalyses}
-              onChangeEvent={props.onChangeEvent}
-              onDeleteAnalysis={props.onDeleteAnalysis}
-              onDeleteEvent={props.onDeleteEvent}
-              initializing={props.initializing}
-              leakPeriodDate={
-                props.project.leakPeriodDate ? parseDate(props.project.leakPeriodDate) : undefined
-              }
-              project={props.project}
-              query={query}
-              onUpdateQuery={props.onUpdateQuery}
-            />
-          </StyledWrapper>
-          <StyledWrapper className="sw-col-span-8 sw-rounded-1">
-            <ProjectActivityGraphs
-              analyses={analyses}
-              leakPeriodDate={
-                props.project.leakPeriodDate ? parseDate(props.project.leakPeriodDate) : undefined
-              }
-              loading={props.graphLoading}
-              measuresHistory={measuresHistory}
-              metrics={props.metrics}
-              project={props.project.key}
-              query={query}
-              updateQuery={props.onUpdateQuery}
-            />
-          </StyledWrapper>
-        </div>
+          <div className="sw-grid sw-grid-cols-12 sw-gap-x-12">
+            <StyledWrapper className="sw-col-span-4 sw-rounded-1">
+              <ProjectActivityAnalysesList
+                onAddCustomEvent={props.onAddCustomEvent}
+                onAddVersion={props.onAddVersion}
+                analyses={analyses}
+                analysesLoading={props.analysesLoading}
+                canAdmin={canAdmin}
+                canDeleteAnalyses={canDeleteAnalyses}
+                onChangeEvent={props.onChangeEvent}
+                onDeleteAnalysis={props.onDeleteAnalysis}
+                onDeleteEvent={props.onDeleteEvent}
+                initializing={props.initializing}
+                leakPeriodDate={
+                  props.project.leakPeriodDate ? parseDate(props.project.leakPeriodDate) : undefined
+                }
+                project={props.project}
+                query={query}
+                onUpdateQuery={props.onUpdateQuery}
+              />
+            </StyledWrapper>
+            <StyledWrapper className="sw-col-span-8 sw-rounded-1">
+              <ProjectActivityGraphs
+                analyses={analyses}
+                leakPeriodDate={
+                  props.project.leakPeriodDate ? parseDate(props.project.leakPeriodDate) : undefined
+                }
+                loading={props.graphLoading}
+                measuresHistory={measuresHistory}
+                metrics={props.metrics}
+                project={props.project.key}
+                query={query}
+                updateQuery={props.onUpdateQuery}
+              />
+            </StyledWrapper>
+          </div>
+        </PageContentFontWrapper>
       </LargeCenteredLayout>
     </main>
   );

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx
index 7637c8f3d10c9cc68acf2d9dcdfea6cae0eaa7ff..f7345c123d5fb3c2cbf81a801a9d73b2cfb85265 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx
@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { ButtonSecondary, DateRangePicker } from 'design-system';
+import { ButtonSecondary, DateRangePicker, PopupZLevel } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../../helpers/l10n';
 import { Query } from '../utils';
@@ -50,6 +50,7 @@ export default class ProjectActivityDateInput extends React.PureComponent<Props>
           separatorText={translate('to_')}
           toLabel={translate('end_date')}
           value={{ from: this.props.from, to: this.props.to }}
+          zLevel={PopupZLevel.Content}
         />
         <ButtonSecondary
           className="sw-ml-2"

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx
index 15244f8c6604356789d97bfbee7b6be5871e3ddc..c310e755e07cd7c808193710e1e9ed7fe6a9b703 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx
@@ -67,6 +67,9 @@ export default function ProjectActivityPageFilters(props: ProjectActivityPageFil
           placeholder={translate('project_activity.filter_events')}
           size="small"
           value={options.find((o) => o.value === category)}
+          classNames={{
+            menu: () => 'sw-z-dropdown-menu-page',
+          }}
         />
       )}
       <ProjectActivityDateInput from={from} onChange={props.updateQuery} to={to} />

diff --git a/server/sonar-web/tailwind.base.config.js b/server/sonar-web/tailwind.base.config.js
index d8c84c29da16f78736138466e3588837087e1320..4a59ca860bd5ca2fe325fdd563b3c4287ead19e1 100644 (file)
--- a/server/sonar-web/tailwind.base.config.js
+++ b/server/sonar-web/tailwind.base.config.js
@@ -107,6 +107,7 @@ module.exports = {
       filterbar: '50',
       'content-popup': '52',
       'filterbar-header': '55',
+      'dropdown-menu-page': '100',
       'top-navbar': '419',
       popup: '420',
       'global-navbar': '421',