From c998f5818455c197d6267c0280afb4841f8baf97 Mon Sep 17 00:00:00 2001 From: Damian Badura <45110612+dbadura@users.noreply.github.com> Date: Tue, 19 Mar 2024 16:50:31 +0100 Subject: [PATCH] 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 --- .../components-form/Modules/Modules.js | 10 ++------ .../TokenRequestModal/TokenRequestModal.tsx | 1 - .../components/CopiableText/CopiableText.js | 5 ++-- .../DescriptionHint/DescriptionHint.js | 7 ++++++ .../EmptyListComponent.scss | 5 ---- .../EmptyListComponent/EmptyListComponent.tsx | 8 +------ .../{CopiableLink.js => CopiableLink.tsx} | 13 +++++++--- .../components/ExternalLink/ExternalLink.tsx | 24 +++++++------------ src/styles/index.scss | 14 ----------- .../extensibility/ext-test-pizzas.spec.js | 2 +- 10 files changed, 32 insertions(+), 57 deletions(-) rename src/shared/components/ExternalLink/{CopiableLink.js => CopiableLink.tsx} (54%) diff --git a/src/components/Extensibility/components-form/Modules/Modules.js b/src/components/Extensibility/components-form/Modules/Modules.js index 1fe69a5122..5934d7cf8f 100644 --- 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 ? ( - + {t('extensibility.widgets.modules.documentation')} - ) : null} diff --git a/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx b/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx index 4f7a3e1449..2b42e50c92 100644 --- a/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx +++ b/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx @@ -156,7 +156,6 @@ export function TokenRequestModal({ diff --git a/src/shared/components/CopiableText/CopiableText.js b/src/shared/components/CopiableText/CopiableText.js index 2d92058258..d0aea6a730 100644 --- a/src/shared/components/CopiableText/CopiableText.js +++ b/src/shared/components/CopiableText/CopiableText.js @@ -13,6 +13,7 @@ CopiableText.propTypes = { buttonText: PropTypes.string, children: PropTypes.node, iconOnly: PropTypes.bool, + disabled: PropTypes.bool, }; export function CopiableText({ @@ -20,7 +21,7 @@ export function CopiableText({ 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} diff --git a/src/shared/components/DescriptionHint/DescriptionHint.js b/src/shared/components/DescriptionHint/DescriptionHint.js index 3eab9533f4..02367f8a68 100644 --- 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 ( <> )} - {url && ( - - )} + {url && } {children} diff --git a/src/shared/components/ExternalLink/CopiableLink.js b/src/shared/components/ExternalLink/CopiableLink.tsx similarity index 54% rename from src/shared/components/ExternalLink/CopiableLink.js rename to src/shared/components/ExternalLink/CopiableLink.tsx index 38052f254b..edb70a7288 100644 --- a/src/shared/components/ExternalLink/CopiableLink.js +++ b/src/shared/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 ( ); }; - -CopiableLink.propTypes = ExternalLink.propTypes; diff --git a/src/shared/components/ExternalLink/ExternalLink.tsx b/src/shared/components/ExternalLink/ExternalLink.tsx index 94548e204c..52ab57468d 100644 --- 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 ( - + {text || children || url} - + ); }; diff --git a/src/styles/index.scss b/src/styles/index.scss index e28478a273..db2153c634 100644 --- 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 index 98a4ea7a7d..6050711ffb 100644 --- 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');