feat: Replace a with ui5link (#2824)

* replace a with ui5link * adjust component * fix focus * improve comment msg * changes after review * use ts * fix after review * add disabled param * remove unused link * fix integration test
kyma-project · Mar 19, 2024 · c998f58 · c998f58
1 parent 3bc527a
commit c998f58
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 57 deletions.
diff --git a/src/components/Extensibility/components-form/Modules/Modules.js b/src/components/Extensibility/components-form/Modules/Modules.js
@@ -6,7 +6,7 @@ import { useGetTranslation } from 'components/Extensibility/helpers';
 import { useTranslation } from 'react-i18next';
 import { fromJS } from 'immutable';
 
-import { CheckBox, Icon, MessageStrip } from '@ui5/webcomponents-react';
+import { CheckBox, MessageStrip } from '@ui5/webcomponents-react';
 import { ResourceForm } from 'shared/ResourceForm';
 import { Dropdown } from 'shared/ResourceForm/inputs';
 
@@ -207,14 +207,8 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
           />
 
           {link ? (
-            <ExternalLink url={link} style={spacing.sapUiMediumMarginTop}>
+            <ExternalLink url={link} iconStyle={spacing.sapUiMediumMarginTop}>
               {t('extensibility.widgets.modules.documentation')}
-              <Icon
-                name="inspect"
-                design="Information"
-                className="ui5-icon-s"
-                style={spacing.sapUiTinyMarginBegin}
-              />
             </ExternalLink>
           ) : null}
         </div>

diff --git a/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx b/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx
@@ -156,7 +156,6 @@ export function TokenRequestModal({
             <CopiableText
               iconOnly
               buttonText={t('common.buttons.copy')}
-              style={spacing.sapUiTinyMarginEnd}
               textToCopy={kubeconfigYaml}
               disabled={token === ''}
             />

diff --git a/src/shared/components/CopiableText/CopiableText.js b/src/shared/components/CopiableText/CopiableText.js
@@ -13,14 +13,15 @@ CopiableText.propTypes = {
   buttonText: PropTypes.string,
   children: PropTypes.node,
   iconOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
 
 export function CopiableText({
   textToCopy,
   buttonText,
   children,
   iconOnly,
-  ...buttonProps
+  disabled,
 }) {
   const { t } = useTranslation();
   return (
@@ -32,8 +33,8 @@ export function CopiableText({
           iconEnd
           design="Transparent"
           style={spacing.sapUiTinyMarginBegin}
+          disabled={disabled}
           onClick={() => copyToCliboard(textToCopy)}
-          {...buttonProps}
         >
           {buttonText ? buttonText : null}
         </Button>

diff --git a/src/shared/components/DescriptionHint/DescriptionHint.js b/src/shared/components/DescriptionHint/DescriptionHint.js
@@ -1,5 +1,6 @@
 import { Button, Popover, Text } from '@ui5/webcomponents-react';
 import { createPortal } from 'react-dom';
+import { useRef } from 'react';
 
 export function HintButton({
   setShowTitleDescription,
@@ -8,10 +9,12 @@ export function HintButton({
   style,
   context,
 }) {
+  const descBtnRef = useRef(null);
   return (
     <>
       <Button
         id={`descriptionOpener-${context}`}
+        ref={descBtnRef}
         icon="hint"
         design="Transparent"
         style={style}
@@ -22,6 +25,10 @@ export function HintButton({
       {createPortal(
         <Popover
           opener={`descriptionOpener-${context}`}
+          //Point initial focus to other component removes the focus from the link in description
+          onAfterOpen={() => {
+            descBtnRef.current.focus();
+          }}
           open={showTitleDescription}
           onAfterClose={() => setShowTitleDescription(false)}
           placementType="Right"

diff --git a/src/shared/components/EmptyListComponent/EmptyListComponent.scss b/src/shared/components/EmptyListComponent/EmptyListComponent.scss
@@ -5,9 +5,4 @@
     align-items: center;
     gap: 20px;
   }
-
-  &__link {
-    font-size: var(--sapFontSize);
-    text-decoration: none;
-  }
 }
diff --git a/src/shared/components/EmptyListComponent/EmptyListComponent.tsx b/src/shared/components/EmptyListComponent/EmptyListComponent.tsx
@@ -56,13 +56,7 @@ export const EmptyListComponent = ({
             {buttonText}
           </Button>
         )}
-        {url && (
-          <ExternalLink
-            className="emptyListComponent__link"
-            text="Learn More"
-            url={url}
-          />
-        )}
+        {url && <ExternalLink text="Learn More" url={url} />}
       </div>
       {children}
     </IllustratedMessage>

diff --git a/...d/components/ExternalLink/CopiableLink.js → .../components/ExternalLink/CopiableLink.tsx b/...d/components/ExternalLink/CopiableLink.js → .../components/ExternalLink/CopiableLink.tsx
@@ -1,12 +1,19 @@
 import { CopiableText } from 'shared/components/CopiableText/CopiableText';
 import { ExternalLink } from 'shared/components/ExternalLink/ExternalLink';
+import { ReactNode } from 'react';
 
-export const CopiableLink = props => {
+export type LinkProps = {
+  url: string;
+  textToCopy?: string;
+  iconOnly?: boolean;
+  buttonText?: string;
+  children?: ReactNode;
+};
+
+export const CopiableLink = (props: LinkProps) => {
   return (
     <CopiableText textToCopy={props.url}>
       <ExternalLink {...props} />
     </CopiableText>
   );
 };
-
-CopiableLink.propTypes = ExternalLink.propTypes;
diff --git a/src/shared/components/ExternalLink/ExternalLink.tsx b/src/shared/components/ExternalLink/ExternalLink.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon } from '@ui5/webcomponents-react';
+import { Icon, Link } from '@ui5/webcomponents-react';
 
 import { spacing } from '@ui5/webcomponents-react-base';
 
@@ -9,37 +9,29 @@ type LinkProps = {
   text?: string;
   className?: string;
   children?: ReactNode;
-  dataTestId?: string;
-  style?: React.CSSProperties;
+  design?: 'Default' | 'Subtle' | 'Emphasized';
+  iconStyle?: React.CSSProperties;
 };
 
 export const ExternalLink = ({
   url,
   text,
-  className,
   children,
-  dataTestId,
-  style,
+  design = 'Default',
+  iconStyle,
 }: LinkProps) => {
   const { t } = useTranslation();
 
   return (
-    <a
-      className={`bsl-link ${className}`}
-      href={url}
-      target="_blank"
-      rel="noopener noreferrer"
-      data-test-id={dataTestId}
-      style={style}
-    >
+    <Link design={design} href={url} target="_blank">
       {text || children || url}
       <Icon
         design="Information"
         name="inspect"
         className="bsl-icon-s"
-        style={spacing.sapUiTinyMarginBegin}
+        style={{ ...spacing.sapUiTinyMarginBegin, ...(iconStyle || {}) }}
         aria-label={t('common.ariaLabel.new-tab-link')}
       />
-    </a>
+    </Link>
   );
 };
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -22,20 +22,6 @@ body {
   cursor: pointer;
 }
 
-.bsl-link {
-  color: var(--sapLinkColor);
-  cursor: pointer;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &.no-border {
-    border: none;
-  }
-}
-
 .panel-grid {
   display: grid;
   grid-template-columns: 2fr 2fr;

diff --git a/tests/integration/tests/extensibility/ext-test-pizzas.spec.js b/tests/integration/tests/extensibility/ext-test-pizzas.spec.js
@@ -81,7 +81,7 @@ context('Test Pizzas', () => {
 
     cy.contains('DELIVERY');
     cy.contains('CASH');
-    cy.contains('a', 'extensibility docs');
+    cy.contains('ui5-link', 'extensibility docs');
     cy.checkItemOnGenericListLink('margherita-order');
 
     cy.clickGenericListLink('diavola-order');