From 138a80f6ca09df04f30ee7ce97ebe1bfcf39436d Mon Sep 17 00:00:00 2001 From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Date: Fri, 8 Mar 2024 14:15:03 +0700 Subject: [PATCH] refactor(client): migrate buttons on the settings page to ui-components (#53739) --- .../components/Header/components/login.tsx | 6 +-- .../Header/components/universal-nav.css | 1 + .../src/components/formHelpers/form.test.tsx | 2 +- .../block-save-button.test.tsx.snap | 2 +- .../helpers/form/block-save-button.tsx | 7 ++- .../src/components/helpers/toggle-button.css | 51 ------------------- client/src/components/layouts/global.css | 6 +-- .../__snapshots__/honesty.test.tsx.snap | 12 ++--- client/src/components/settings/about.tsx | 4 +- .../src/components/settings/certification.tsx | 33 +++++------- .../src/components/settings/danger-zone.css | 15 ------ .../src/components/settings/danger-zone.tsx | 15 ++---- .../src/components/settings/delete-modal.tsx | 15 +++--- client/src/components/settings/email.tsx | 21 ++++---- .../src/components/settings/honesty.test.tsx | 2 +- client/src/components/settings/honesty.tsx | 7 ++- client/src/components/settings/internet.tsx | 4 +- client/src/components/settings/portfolio.tsx | 16 +++--- client/src/components/settings/privacy.tsx | 12 ++--- .../src/components/settings/reset-modal.tsx | 13 +++-- .../settings/toggle-button-setting.tsx | 3 -- .../settings/toggle-radio-setting.tsx | 1 - client/src/components/settings/username.tsx | 4 +- client/src/pages/update-email.tsx | 8 +-- .../e2e/default/learn/challenges/projects.ts | 5 ++ .../show-cert-from-superblock.ts | 1 + .../default/settings/image-picture-check.ts | 5 +- cypress/e2e/default/settings/portfolio.ts | 9 +++- .../ui-components/src/button/button.test.tsx | 18 ++++++- tools/ui-components/src/button/button.tsx | 1 + tools/ui-components/src/index.ts | 2 +- 31 files changed, 119 insertions(+), 182 deletions(-) delete mode 100644 client/src/components/helpers/toggle-button.css delete mode 100644 client/src/components/settings/danger-zone.css diff --git a/client/src/components/Header/components/login.tsx b/client/src/components/Header/components/login.tsx index 22dabc152cf..1d21af2e30f 100644 --- a/client/src/components/Header/components/login.tsx +++ b/client/src/components/Header/components/login.tsx @@ -1,4 +1,3 @@ -import { Button } from '@freecodecamp/react-bootstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faRightToBracket } from '@fortawesome/free-solid-svg-icons'; import React, { ReactNode } from 'react'; @@ -32,8 +31,7 @@ const Login = ({ const href = isSignedIn ? `${homeLocation}/learn` : `${apiLocation}/signin`; return ( - + ); }; diff --git a/client/src/components/Header/components/universal-nav.css b/client/src/components/Header/components/universal-nav.css index be6da1402bc..1a19453a19c 100644 --- a/client/src/components/Header/components/universal-nav.css +++ b/client/src/components/Header/components/universal-nav.css @@ -342,6 +342,7 @@ li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) { max-height: var(--header-element-size); min-width: var(--header-element-size); padding: 0 4px; + text-decoration: none; } @media (min-width: 601px) { diff --git a/client/src/components/formHelpers/form.test.tsx b/client/src/components/formHelpers/form.test.tsx index b62aed7f5b2..13987d41fe9 100644 --- a/client/src/components/formHelpers/form.test.tsx +++ b/client/src/components/formHelpers/form.test.tsx @@ -29,7 +29,7 @@ test('should render', () => { const button = screen.getByText(/submit/i); expect(button).toHaveAttribute('type', 'submit'); - expect(button).toBeDisabled(); + expect(button).toHaveAttribute('aria-disabled', 'true'); }); test('should render with default values', () => { diff --git a/client/src/components/helpers/form/__snapshots__/block-save-button.test.tsx.snap b/client/src/components/helpers/form/__snapshots__/block-save-button.test.tsx.snap index 837496907c9..1a7fb59ed03 100644 --- a/client/src/components/helpers/form/__snapshots__/block-save-button.test.tsx.snap +++ b/client/src/components/helpers/form/__snapshots__/block-save-button.test.tsx.snap @@ -3,7 +3,7 @@ exports[` snapshot 1`] = `
@@ -102,13 +99,10 @@ exports[` snapshot when isHonest is true: HonestyAccepted

diff --git a/client/src/components/settings/about.tsx b/client/src/components/settings/about.tsx index 8dcc533348c..0450f298938 100644 --- a/client/src/components/settings/about.tsx +++ b/client/src/components/settings/about.tsx @@ -267,8 +267,8 @@ class AboutSettings extends Component {
{t('buttons.save')}{' '} diff --git a/client/src/components/settings/certification.tsx b/client/src/components/settings/certification.tsx index 8978db11fcc..da4cc6140f3 100644 --- a/client/src/components/settings/certification.tsx +++ b/client/src/components/settings/certification.tsx @@ -1,4 +1,3 @@ -import { Button } from '@freecodecamp/react-bootstrap'; import { Link, navigate } from 'gatsby'; import { find } from 'lodash-es'; import React, { MouseEvent, useState } from 'react'; @@ -7,7 +6,7 @@ import type { TFunction } from 'i18next'; import { createSelector } from 'reselect'; import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor'; import { connect } from 'react-redux'; -import { Table } from '@freecodecamp/ui'; +import { Table, Button } from '@freecodecamp/ui'; import { regeneratePathAndHistory } from '../../../../shared/utils/polyvinyl'; import ProjectPreviewModal from '../../templates/Challenges/components/project-preview-modal'; @@ -180,12 +179,6 @@ const LegacyFullStack = (props: CertificationSettingsProps) => { const certSlug = Certification.LegacyFullStack; const certLocation = `/certification/${username}/${certSlug}`; - const buttonStyle = { - marginBottom: '30px', - padding: '6px 12px', - fontSize: '18px' - }; - const createClickHandler = (certSlug: keyof typeof certSlugTypeMap) => (e: MouseEvent) => { @@ -225,29 +218,28 @@ const LegacyFullStack = (props: CertificationSettingsProps) => { -
+
{fullStackClaimable ? ( ) : ( @@ -402,10 +394,11 @@ function CertificationSettings(props: CertificationSettingsProps) { - +
); @@ -237,8 +240,8 @@ function EmailSettings({
{t('buttons.save')}{' '} diff --git a/client/src/components/settings/honesty.test.tsx b/client/src/components/settings/honesty.test.tsx index acda37827b0..a9c10b59bf3 100644 --- a/client/src/components/settings/honesty.test.tsx +++ b/client/src/components/settings/honesty.test.tsx @@ -1,4 +1,4 @@ -import { Button } from '@freecodecamp/react-bootstrap'; +import { Button } from '@freecodecamp/ui'; import React from 'react'; import TestRenderer from 'react-test-renderer'; import ShallowRenderer from 'react-test-renderer/shallow'; diff --git a/client/src/components/settings/honesty.tsx b/client/src/components/settings/honesty.tsx index 11eacd89d53..69cf587f603 100644 --- a/client/src/components/settings/honesty.tsx +++ b/client/src/components/settings/honesty.tsx @@ -1,7 +1,6 @@ -import { Button } from '@freecodecamp/react-bootstrap'; import React from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import { Panel } from '@freecodecamp/ui'; +import { Panel, Button } from '@freecodecamp/ui'; import { FullWidthRow } from '../helpers'; import SectionHeader from './section-header'; @@ -39,8 +38,8 @@ const Honesty = ({ isHonest, updateIsHonest }: HonestyProps): JSX.Element => { ); @@ -98,4 +98,20 @@ describe(' + ); + + const link = screen.getByRole('link', { name: /freeCodeCamp/i }); + + await userEvent.click(link); + + expect(onClick).toHaveBeenCalledTimes(1); + }); }); diff --git a/tools/ui-components/src/button/button.tsx b/tools/ui-components/src/button/button.tsx index a96d971f987..76b47cfaf8b 100644 --- a/tools/ui-components/src/button/button.tsx +++ b/tools/ui-components/src/button/button.tsx @@ -189,6 +189,7 @@ export const HeadlessButton = React.forwardRef< download={download} target={target} ref={ref as React.Ref} + onClick={onClick} {...rest} > {children} diff --git a/tools/ui-components/src/index.ts b/tools/ui-components/src/index.ts index 756bd5696e2..7a62abb57b3 100644 --- a/tools/ui-components/src/index.ts +++ b/tools/ui-components/src/index.ts @@ -1,6 +1,6 @@ // Use this file as the entry point for component export export { Alert, type AlertProps } from './alert'; -export { Button } from './button'; +export { Button, type ButtonProps } from './button'; export { CloseButton } from './close-button'; export { Image } from './image'; export { Table } from './table';