SONAR-19345 Layout fixes for issue page with small styling fixes

diff --git a/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx b/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx
index 230a5dc7231eee3dd6dc7c6788657f7630bcc93d..7d2129e5c27e2615d3c459f50a73848d86c78b56 100644 (file)
--- a/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx
+++ b/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx
@@ -33,6 +33,7 @@ export const mappedKeys = {
   [Key.Command]: '⌘',
   [Key.Control]: 'Ctrl',
   [Key.Option]: '⌥',
+  [Key.Click]: 'click',
 };
 
 export function KeyboardHintKeys({ command }: { command: string }) {

diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap
index 6ac0d945eefb9e7f294112c0d4797251bf4c42e0..798c34a273f5bb4c3b389805c476096ec5965e87 100644 (file)
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap
@@ -171,6 +171,26 @@ exports[`renders with title 1`] = `
   color: rgb(106,117,144);
 }
 
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+  border-radius: 0.125rem;
+  background-color: rgb(225,230,243);
+  color: rgb(62,67,87);
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -183,7 +203,9 @@ exports[`renders with title 1`] = `
     <div
       class="sw-flex sw-gap-1"
     >
-      <span>
+      <span
+        class="emotion-2 emotion-3"
+      >
         click
       </span>
     </div>
@@ -209,6 +231,26 @@ exports[`renders without title 1`] = `
   color: rgb(106,117,144);
 }
 
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+  border-radius: 0.125rem;
+  background-color: rgb(225,230,243);
+  color: rgb(62,67,87);
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -216,7 +258,9 @@ exports[`renders without title 1`] = `
     <div
       class="sw-flex sw-gap-1"
     >
-      <span>
+      <span
+        class="emotion-2 emotion-3"
+      >
         click
       </span>
     </div>

diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap
index be6c83072f5bead69180bbde99ff2030a63fee63..337d1b9b385fef69385182d577b114ca38985348 100644 (file)
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap
@@ -226,6 +226,40 @@ exports[`should render ArrowUp 1`] = `
 </div>
 `;
 
+exports[`should render Click 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+  border-radius: 0.125rem;
+  background-color: rgb(225,230,243);
+  color: rgb(62,67,87);
+}
+
+<div>
+  <div
+    class="sw-flex sw-gap-1"
+  >
+    <span
+      class="emotion-0 emotion-1"
+    >
+      click
+    </span>
+  </div>
+</div>
+`;
+
 exports[`should render Command 1`] = `
 .emotion-0 {
   display: -webkit-box;
@@ -361,7 +395,9 @@ exports[`should render a default text if no keys match 1`] = `
     <span>
       +
     </span>
-    <span>
+    <span
+      class="emotion-0 emotion-1"
+    >
       click
     </span>
   </div>

diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap
index b72c648fe60298fef6a893b5356589c19947c4d4..9607fc62ac608f50b4f97354762359fa76284fe1 100644 (file)
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap
@@ -27,6 +27,7 @@ exports[`should render correctly 1`] = `
   box-sizing: border-box;
   border: 1px solid rgb(253,162,155);
   color: rgb(62,67,87);
+  font-weight: 600;
   word-break: break-word;
   background-color: rgb(255,255,255);
 }
@@ -76,6 +77,7 @@ exports[`should render correctly when issueType is provided 1`] = `
   box-sizing: border-box;
   border: 1px solid rgb(253,162,155);
   color: rgb(62,67,87);
+  font-weight: 600;
   word-break: break-word;
   background-color: rgb(255,255,255);
 }

diff --git a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx
index 052ea396271ef1e4b9e3b84ab2b60ea56d0525fb..65bb88cc93d574db86e292d827992b0d05d77ec6 100644 (file)
--- a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx
+++ b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx
@@ -71,6 +71,7 @@ const LineFindingStyled = styled(BareButton)<{ selected: boolean }>`
       ? themeBorder('default', 'issueBoxSelectedBorder')
       : themeBorder('default', 'issueBoxBorder')};
   color: ${themeContrast('pageBlock')};
+  font-weight: ${(props) => (props.selected ? 600 : 400)};
   word-break: break-word;
   background-color: ${themeColor('pageBlock')};
 

diff --git a/server/sonar-web/design-system/src/helpers/keyboard.ts b/server/sonar-web/design-system/src/helpers/keyboard.ts
index 5a96c128628645d86c7be6633ba8a79d4d9a900b..dd6f1c9a515e4b0d0f96f01063d74b0c6decd53d 100644 (file)
--- a/server/sonar-web/design-system/src/helpers/keyboard.ts
+++ b/server/sonar-web/design-system/src/helpers/keyboard.ts
@@ -40,6 +40,7 @@ export enum Key {
   Shift = 'Shift',
   Space = ' ',
   Tab = 'Tab',
+  Click = 'Click',
 }
 
 export function isShortcut(event: KeyboardEvent): boolean {

diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
index 6843a7d2b93c80ed5f5bad1da3ec58643e2b07ec..87184179c238ba8c4f620f0070550387948738b7 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
@@ -1040,47 +1040,51 @@ export class App extends React.PureComponent<Props, State> {
     );
 
     return (
-      <ScreenPositionHelper className="sw-z-filterbar">
-        {({ top }) => (
-          <nav
-            aria-label={openIssue ? translate('list_of_issues') : translate('filters')}
-            className="it__issues-nav-bar sw-overflow-y-auto"
-            style={{ height: `calc((100vh - ${top}px) - 60px)` }} // 60px (footer)
-          >
-            <SideBarStyle className="sw-w-[300px] lg:sw-w-[390px]">
-              <A11ySkipTarget
-                anchor="issues_sidebar"
-                label={
-                  openIssue ? translate('issues.skip_to_list') : translate('issues.skip_to_filters')
-                }
-                weight={10}
-              />
+      <SideBarStyle>
+        <ScreenPositionHelper className="sw-z-filterbar">
+          {({ top }) => (
+            <nav
+              aria-label={openIssue ? translate('list_of_issues') : translate('filters')}
+              className="it__issues-nav-bar sw-overflow-y-auto"
+              style={{ height: `calc((100vh - ${top}px) - 60px)` }} // 60px (footer)
+            >
+              <div className="sw-w-[300px] lg:sw-w-[390px]">
+                <A11ySkipTarget
+                  anchor="issues_sidebar"
+                  label={
+                    openIssue
+                      ? translate('issues.skip_to_list')
+                      : translate('issues.skip_to_filters')
+                  }
+                  weight={10}
+                />
 
-              {openIssue ? (
-                <div>
-                  {warning && <div className="sw-py-4">{warning}</div>}
-
-                  <SubnavigationIssuesList
-                    fetchMoreIssues={this.fetchMoreIssues}
-                    issues={issues}
-                    loading={loading}
-                    loadingMore={loadingMore}
-                    onFlowSelect={this.selectFlow}
-                    onIssueSelect={this.openIssue}
-                    onLocationSelect={this.selectLocation}
-                    paging={paging}
-                    selected={selected}
-                    selectedFlowIndex={selectedFlowIndex}
-                    selectedLocationIndex={selectedLocationIndex}
-                  />
-                </div>
-              ) : (
-                this.renderFacets(warning)
-              )}
-            </SideBarStyle>
-          </nav>
-        )}
-      </ScreenPositionHelper>
+                {openIssue ? (
+                  <div>
+                    {warning && <div className="sw-py-4">{warning}</div>}
+
+                    <SubnavigationIssuesList
+                      fetchMoreIssues={this.fetchMoreIssues}
+                      issues={issues}
+                      loading={loading}
+                      loadingMore={loadingMore}
+                      onFlowSelect={this.selectFlow}
+                      onIssueSelect={this.openIssue}
+                      onLocationSelect={this.selectLocation}
+                      paging={paging}
+                      selected={selected}
+                      selectedFlowIndex={selectedFlowIndex}
+                      selectedLocationIndex={selectedLocationIndex}
+                    />
+                  </div>
+                ) : (
+                  this.renderFacets(warning)
+                )}
+              </div>
+            </nav>
+          )}
+        </ScreenPositionHelper>
+      </SideBarStyle>
     );
   }
 
@@ -1293,7 +1297,7 @@ export class App extends React.PureComponent<Props, State> {
 
               {this.renderSide(openIssue)}
 
-              <MainContentStyle role="main" className="sw-relative sw-ml-2 sw-p-6 sw-flex-1">
+              <MainContentStyle role="main" className="sw-relative sw-ml-12 sw-p-6 sw-flex-1">
                 {this.renderHeader({ openIssue, paging, selectedIndex })}
 
                 {this.renderPage()}

diff --git a/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx b/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx
index e5ffb1979623f70abbbd90d7e250176542e13ade..6af94914793cc5e60553bef48189da61b683ad70 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx
@@ -36,7 +36,7 @@ export default function PageActions(props: PageActionsProps) {
   const { canSetHome, effortTotal, paging, selectedIndex } = props;
 
   return (
-    <div className="sw-body-sm sw-flex sw-items-center sw-gap-6 sw-justify-end">
+    <div className="sw-body-sm sw-flex sw-items-center sw-gap-6 sw-justify-end sw-flex-1">
       <KeyboardHint title={translate('issues.to_select_issues')} command="ArrowUp ArrowDown" />
       <KeyboardHint title={translate('issues.to_navigate')} command="ArrowLeft ArrowRight" />
 

diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/MultipleSelectionHint.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/MultipleSelectionHint.tsx
index e7bcaa4a91b63dbdc9b048a80a26e89cc1e37393..130a936b1ddd1316e874b25480b49d47bb73009b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/MultipleSelectionHint.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/MultipleSelectionHint.tsx
@@ -31,7 +31,10 @@ export function MultipleSelectionHint({
 }) {
   return nbSelectedItems > 0 && nbSelectedItems < nbSelectableItems ? (
     <div className="sw-pt-4">
-      <KeyboardHint command={translate('shortcuts.section.global.facets.multiselection')} />
+      <KeyboardHint
+        command="Control + Click"
+        title={translate('shortcuts.section.global.facets.multiselection.title')}
+      />
     </div>
   ) : null;
 }

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 60b70f46889eac44f581d7882f24a5fec36f9ac6..f30ff60f8353e72f2a18b73bd45333b6bdacefe0 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1593,6 +1593,7 @@ shortcuts.section.global.search=quickly open search bar
 shortcuts.section.global.shortcuts=open this window
 shortcuts.section.global.facets.multiselection=Press Ctrl to add to selection
 shortcuts.section.global.facets.multiselection.mac=Press \u2318 to add to selection
+shortcuts.section.global.facets.multiselection.title=Add to selection
 
 shortcuts.section.issues=Issues Page
 shortcuts.section.issues.navigate_between_issues=navigate between issues