SONAR-20500 Rules list validation

4 files changed, 17 insertions, 5 deletions

diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index 115d90eaaaa..5a88e12959b 100644
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -814,6 +814,7 @@ export const lightTheme = {
     active: ['4px', 'solid', ...primary.light],
     xsActive: ['3px', 'solid', ...primary.light],
     focus: ['4px', 'solid', ...secondary.default, OPACITY_20_PERCENT],
+    heavy: ['2px', 'solid', ...COLORS.grey[50]],
   },
 
   avatar: {
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
index c787c6dddbb..b7108e1fbe9 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
@@ -348,6 +348,10 @@ export class CodingRulesApp extends React.PureComponent<Props, State> {
     }
   };
 
+  handleSelectRule = (key: string) => {
+    this.routeSelectedRulePath(key);
+  };
+
   selectPreviousRule = () => {
     const { rules } = this.state;
     const selectedIndex = this.getSelectedIndex();
@@ -684,6 +688,7 @@ export class CodingRulesApp extends React.PureComponent<Props, State> {
                             onOpen={this.handleRuleOpen}
                             rule={rule}
                             selected={rule.key === selected}
+                            selectRule={this.handleSelectRule}
                             selectedProfile={this.getSelectedProfile()}
                           />
                         ))}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
index fcfd7c355c7..cedf9b1e5bd 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
@@ -248,7 +248,11 @@ export default class RuleDetailsMeta extends React.PureComponent<Props> {
     const displayedKey = ruleDetails.key.startsWith(EXTERNAL_PREFIX)
       ? ruleDetails.key.substring(EXTERNAL_PREFIX.length)
       : ruleDetails.key;
-    return <Note className="sw-overflow-hidden sw-text-ellipsis">{displayedKey}</Note>;
+    return (
+      <Note className="sw-overflow-hidden sw-text-ellipsis" title={displayedKey}>
+        {displayedKey}
+      </Note>
+    );
   }
 
   render() {
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
index c38cf54d036..f00c8d36352 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
@@ -50,6 +50,7 @@ interface Props {
   onOpen: (ruleKey: string) => void;
   rule: Rule;
   selected: boolean;
+  selectRule: (key: string) => void;
   selectedProfile?: Profile;
 }
 
@@ -86,6 +87,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
     }
 
     event.preventDefault();
+    event.stopPropagation();
     this.props.onOpen(this.props.rule.key);
   };
 
@@ -204,6 +206,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
         className="it__coding-rule sw-p-3 sw-mb-4 sw-rounded-1 sw-bg-white"
         aria-current={selected}
         data-rule={rule.key}
+        onClick={() => this.props.selectRule(rule.key)}
       >
         <div className="sw-flex sw-flex-col">
           <div className="sw-mb-4">
@@ -263,8 +266,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
 }
 
 const ListItemStyled = styled.li<{ selected: boolean }>`
-  border: ${(props) =>
-    props.selected ? themeBorder('default', 'primary') : themeBorder('default', 'almCardBorder')};
-
-  border-width: ${(props) => (props.selected ? '2px' : '1px')};
+  outline: ${(props) =>
+    props.selected ? themeBorder('heavy', 'primary') : themeBorder('default', 'almCardBorder')};
+  outline-offset: ${(props) => (props.selected ? '-2px' : '-1px')};
 `;