Merge branch 'master' into branch_2

Author: NIKHITHAVADDEMPUDI

.eslintrc.js

@@ -110,10 +110,7 @@ module.exports = {
         bundledDependencies: false,
       },
     ],
-    'jsx-a11y/anchor-is-valid': 'off',
-    'jsx-a11y/click-events-have-key-events': 'off',
-    'jsx-a11y/label-has-associated-control': 'off',
-    'jsx-a11y/no-static-element-interactions': 'off',
+    'jsx-a11y/label-has-associated-control': 'off', // Disabled due to false positives.
     'max-classes-per-file': 'off',
     'max-len': 'off',
     '@typescript-eslint/naming-convention': [

locales/en/plugin__odf-console.json

@@ -1395,6 +1395,7 @@
   "Remove delete markers with no noncurrent versions.": "Remove delete markers with no noncurrent versions.",
   "Remove disaster recovery": "Remove disaster recovery",
   "Remove disaster recovery?": "Remove disaster recovery?",
+  "Remove tag": "Remove tag",
   "Remove Tier": "Remove Tier",
   "Remove unnecessary delete markers that clutter bucket listings and do not serve a purpose. Targets delete markers in versioned buckets that do not have any associated object versions (orphaned delete markers).": "Remove unnecessary delete markers that clutter bucket listings and do not serve a purpose. Targets delete markers in versioned buckets that do not have any associated object versions (orphaned delete markers).",
   "Replaying": "Replaying",

packages/ocs/storage-class/sc-form.tsx

@@ -401,7 +401,7 @@ export const CephFsPoolComponent: React.FC<ProvisionerProps> = ({
     if (isExternal) {
       return (
         <div className="form-group">
-          <label className="co-required" htmlFor="ocs-storage-pool">
+          <label className="co-required" htmlFor="pool-name">
             {t('Storage Pool')}
           </label>
           <input
@@ -567,7 +567,7 @@ export const BlockPoolResourceComponent: React.FC<ProvisionerProps> = ({
           systemNamespace={systemNamespace}
         />
         <div className="form-group">
-          <label className="co-required" htmlFor="ocs-storage-pool">
+          <label className="co-required" htmlFor="pool-name">
             {t('Storage Pool')}
           </label>
           <input

packages/ocs/storage-pool/body.scss

@@ -8,8 +8,15 @@
 }
 
 .ceph-block-pool-body__compression {
-  align-items: center;
+  align-items: start;
   display: flex;
+
+  input[type='checkbox'] {
+    // Override some inherited styles.
+    margin-left: unset !important;
+    position: unset !important;
+    margin-right: 10px;
+  }
 }
 
 .ceph-block-pool__switch {

packages/ocs/storage-pool/body.tsx

@@ -374,24 +374,23 @@ export const StoragePoolBody: React.FC<StoragePoolBodyProps> = ({
         <label className="control-label" htmlFor="compression-check">
           {t('Data compression')}
         </label>
-        <div className="checkbox">
-          <label className="ceph-block-pool-body__compression">
-            <input
-              type="checkbox"
-              onChange={(event) =>
-                dispatch({
-                  type: StoragePoolActionType.SET_POOL_COMPRESSED,
-                  payload: event.target.checked,
-                })
-              }
-              checked={state.isCompressed}
-              name="compression-check"
-              data-test="compression-checkbox"
-            />
-            {t(
-              'Optimize storage efficiency by enabling data compression within replicas.'
-            )}
-          </label>
+        <div className="checkbox ceph-block-pool-body__compression">
+          <input
+            type="checkbox"
+            onChange={(event) =>
+              dispatch({
+                type: StoragePoolActionType.SET_POOL_COMPRESSED,
+                payload: event.target.checked,
+              })
+            }
+            checked={state.isCompressed}
+            id="compression-check"
+            name="compression-check"
+            data-test="compression-checkbox"
+          />
+          {t(
+            'Optimize storage efficiency by enabling data compression within replicas.'
+          )}
         </div>
       </div>
       {state.isCompressed && (

packages/odf/components/s3-browser/bucket-policy/BucketPolicy.tsx

@@ -184,9 +184,9 @@ const PolicyBody: React.FC<PolicyBodyProps> = ({
         )}
         emptyStateButton={t('Browse')}
         emptyStateLink={
-          <span onClick={onEdit}>
+          <Button variant={ButtonVariant.link} onClick={onEdit}>
             {t('Start from scratch or use predefined policy configuration')}
-          </span>
+          </Button>
         }
         onEditorDidMount={handleEditorDidMount}
         className="pf-v5-u-mt-sm pf-v5-u-mb-xl"

packages/odf/components/topology/TopBar/TopologyNavigation.scss

@@ -18,3 +18,7 @@
         border: none;
     }
 }
+
+.odf-topology-nav__item-storage-cluster-link {
+  text-decoration: underline;
+}

packages/odf/components/topology/TopBar/TopologyNavigation.tsx

@@ -8,6 +8,7 @@ import {
   OptionsMenuItem,
   OptionsMenuToggle,
 } from '@patternfly/react-core/deprecated';
+import { Button, ButtonVariant } from '@patternfly/react-core';
 import { AngleRightIcon } from '@patternfly/react-icons';
 import { useVisualizationController } from '@patternfly/react-topology';
 import { STEP_INTO_EVENT, STEP_TO_CLUSTER } from '../constants';
@@ -75,15 +76,22 @@ const TopologyNavigationBar: React.FC<TopologyNavigationBarProps> = ({
     [selected]
   );
 
-  const onStorageClusterClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const onStorageClusterClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     controller.fireEvent(STEP_TO_CLUSTER);
   };
 
   return (
     <TopologyNavigationBarGroup>
       <TopologyNavigationItem>
-        <a onClick={onStorageClusterClick}>StorageCluster</a>
+        <Button
+          variant={ButtonVariant.link}
+          isInline
+          className="odf-topology-nav__item-storage-cluster-link"
+          onClick={onStorageClusterClick}
+        >
+          StorageCluster
+        </Button>
       </TopologyNavigationItem>
       <TopologyNavigationItem>
         <ResourceIcon

packages/odf/components/topology/TopBar/TopologySearch.scss

@@ -15,4 +15,7 @@
     &-search-bar__expand-icon {
         margin-right: var(--pf-v5-global--spacer--sm);
     }
+    &-search-bar__expand-button {
+      text-decoration: underline;
+    }
 }

packages/odf/components/topology/TopBar/TopologySearch.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
+import { Button, ButtonVariant } from '@patternfly/react-core';
 import { ExpandIcon } from '@patternfly/react-icons';
 import SearchBar from './SearchComponent';
 import './TopologySearch.scss';
@@ -19,7 +20,7 @@ const TopologySearchBar: React.FC = () => {
     };
   }, [isFullScreen]);
 
-  const toggleFullScreen = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const toggleFullScreen = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     const element = document.getElementById('odf-topology');
     if (!isFullScreen) {
@@ -40,10 +41,15 @@ const TopologySearchBar: React.FC = () => {
         <SearchBar />
       </span>
       <span className="odf-topology-search-bar__expand">
-        <a onClick={toggleFullScreen}>
+        <Button
+          variant={ButtonVariant.link}
+          isInline
+          onClick={toggleFullScreen}
+          className="odf-topology-search-bar__expand-button"
+        >
           <ExpandIcon className="odf-topology-search-bar__expand-icon" />
           {!isFullScreen ? t('Expand to fullscreen') : t('Exit fullscreen')}
-        </a>
+        </Button>
       </span>
     </div>
   );

packages/odf/components/topology/Topology.tsx

@@ -38,6 +38,8 @@ import {
 import * as _ from 'lodash-es';
 import { Link } from 'react-router-dom-v5-compat';
 import {
+  Button,
+  ButtonVariant,
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
@@ -126,19 +128,28 @@ const MessageButton: React.FC = () => {
       <BlueInfoCircleIcon />{' '}
       {showMessage &&
         t('This view is not available for external mode cluster.')}{' '}
-      <a onClick={() => setShowMessage(!showMessage)}>
+      <Button
+        variant={ButtonVariant.link}
+        isInline
+        className="odf-topology__show-message-button"
+        onClick={() => setShowMessage(!showMessage)}
+      >
         {!showMessage ? t('Show message') : t('Hide message')}
-      </a>
+      </Button>
     </div>
   );
 };
 
 const BackButton: React.FC<BackButtonProps> = ({ onClick }) => {
   const { t } = useCustomTranslation();
   return (
-    <div className="odf-topology__back-button" onClick={onClick}>
+    <Button
+      variant={ButtonVariant.plain}
+      className="odf-topology__back-button"
+      onClick={onClick}
+    >
       <ArrowCircleLeftIcon /> {t('Back to main view')}
-    </div>
+    </Button>
   );
 };
 

packages/odf/components/topology/topology.scss

@@ -15,7 +15,7 @@
 }
 
 .odf-topology__back-button {
-    background-color: var(--pf-v5-global--palette--black-300);
+    background-color: var(--pf-v5-global--palette--black-300) !important;
     color: var(--pf-v5-global--Color--dark-200);
     left: var(--pf-v5-global--gutter);
     position: absolute;
@@ -37,6 +37,10 @@
     z-index: 2;
 }
 
+.odf-topology__show-message-button {
+    text-decoration: underline;
+}
+
 .odf-topology__back-button:hover {
     box-shadow: 1px 1px 3px 1px #aaabac;
     cursor: pointer;

packages/shared/src/alert/AlertsPanel.tsx

@@ -57,22 +57,22 @@ const AlertBadge: React.FC<AlertBadgeProps> = ({
   const onClick = () => onToggle(`alert-toggle-${alertSeverity}`);
 
   return (
-    <span onClick={onClick}>
+    <Button
+      variant={ButtonVariant.plain}
+      isInline
+      onClick={onClick}
+      className="odf-alerts-panel__button"
+    >
       <Badge
         key={key}
         className={`odf-alerts-panel__badge odf-alerts-panel__badge-${alertSeverity}`}
       >
-        <Button
-          variant={ButtonVariant.plain}
-          className="odf-alerts-panel__button"
-        >
-          <StatusIconAndText title={alerts.length.toString()} icon={icon} />
-        </Button>
+        <StatusIconAndText title={alerts.length.toString()} icon={icon} />
       </Badge>
       <span className="odf-alerts-panel__badge-text">
         {_.startCase(alertSeverity)}
       </span>
-    </span>
+    </Button>
   );
 };
 

packages/shared/src/alert/alerts.scss

@@ -15,6 +15,7 @@
 
   .odf-alerts-panel__badge {
     border: 1.5px solid;
+    padding: .2rem .7rem;
   }
 
   .odf-alerts-panel__badge-critical {

packages/shared/src/modals/EditLabelModal.tsx

@@ -19,7 +19,7 @@ import { ResourceIcon } from '../resource-link/resource-link';
 import { useCustomTranslation } from '../useCustomTranslationHook';
 import { CommonModalProps } from './common';
 import { ModalBody, ModalFooter } from './Modal';
-import { SelectorInput } from './Selector';
+import { TranslatedSelectorInput } from './Selector';
 
 type Patch = {
   op: string;
@@ -146,7 +146,7 @@ export const EditLabelModal: React.FC<EditLabelModalProps> = ({
               <ResourceIcon resourceModel={resourceModel} />{' '}
               {resource.metadata.name}
             </label>
-            <SelectorInput
+            <TranslatedSelectorInput
               onChange={(l) => setLabels(l)}
               tags={labels}
               labelClassName={labelClassName || `co-text-${resourceModel.id}`}

packages/shared/src/modals/Selector.scss

@@ -0,0 +1,3 @@
+.odf-selector-input__remove-tag-button {
+  text-decoration: underline;
+}

packages/shared/src/modals/Selector.tsx

@@ -6,9 +6,12 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types';
 import classNames from 'classnames';
 import * as _ from 'lodash-es';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import * as TagsInput from 'react-tagsinput';
+import { Button } from '@patternfly/react-core';
 import * as k8sSelectorRequirement from './selector-requirement';
 import { createEquals, requirementFromString } from './selector-requirement';
+import './Selector.scss';
 
 declare global {
   namespace JSX {
@@ -133,7 +136,7 @@ export const selectorToString = (selector: Selector): string => {
 const cleanSelectorStr = (tag) => selectorToString(selectorFromString(tag));
 const cleanTags = (tags) => split(cleanSelectorStr(tags.join(',')));
 
-type SelectorProps = {
+type SelectorProps = WithTranslation & {
   setErrorMessage?: (isValid: boolean) => void;
   placeholder?: string;
   options?: any;
@@ -151,10 +154,7 @@ type SelectorInputState = {
   tags: any;
 };
 
-export class SelectorInput extends React.Component<
-  SelectorProps,
-  SelectorInputState
-> {
+class SelectorInput extends React.Component<SelectorProps, SelectorInputState> {
   isBasic: boolean;
   setRef: (ref: any) => any;
   ref_: any;
@@ -245,6 +245,7 @@ export class SelectorInput extends React.Component<
   }
 
   render() {
+    const { t } = this.props;
     const { inputValue, isInputValid, tags } = this.state;
 
     // Keys that add tags: Enter
@@ -275,9 +276,15 @@ export class SelectorInput extends React.Component<
         >
           <span className="tag-item__content">{getTagDisplayValue(tag)}</span>
           &nbsp;
-          <a className="remove-button" onClick={() => onRemove(key)}>
+          <Button
+            variant="link"
+            isInline
+            className="odf-selector-input__remove-tag-button"
+            onClick={() => onRemove(key)}
+            arial-label={t('Remove tag')}
+          >
             ×
-          </a>
+          </Button>
         </span>
       );
     };
@@ -306,3 +313,5 @@ export class SelectorInput extends React.Component<
     );
   }
 }
+
+export const TranslatedSelectorInput = withTranslation()(SelectorInput);

stylelint.config.js

@@ -4,5 +4,6 @@ module.exports = {
   rules: {
     'order/order': ['custom-properties', 'declarations'],
     'selector-class-pattern': null,
+    'selector-no-qualifying-type': [true, { ignore: ['attribute'] }],
   },
 };