diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js index 468bca5ae0..ca866748ff 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js @@ -29,7 +29,7 @@ import stepper from './utils/stepper'; const ModalForm = ({ queryName, onToggle }) => { const [currentStep, setStep] = useState('create'); - const [isSubmitting, setIsSubmiting] = useState(false); + const [isSubmitting, setIsSubmitting] = useState(false); const [registrationToken, setRegistrationToken] = useState(null); const queryClient = useQueryClient(); const { formatMessage } = useIntl(); @@ -40,10 +40,11 @@ const ModalForm = ({ queryName, onToggle }) => { setRegistrationToken(data.data.registrationToken); await queryClient.invalidateQueries(queryName); goNext(); - setIsSubmiting(false); + setIsSubmitting(false); }, onError: err => { console.error(err.response); + setIsSubmitting(false); toggleNotification({ type: 'warning', @@ -62,7 +63,7 @@ const ModalForm = ({ queryName, onToggle }) => { const handleSubmit = async body => { lockApp(); - setIsSubmiting(true); + setIsSubmitting(true); postMutation.mutateAsync(body); }; diff --git a/packages/core/admin/admin/src/pages/Users/components/MagicLink/MagicLinkWrapper.js b/packages/core/admin/admin/src/pages/Users/components/MagicLink/MagicLinkWrapper.js index 99228f5462..1fa81e79b2 100644 --- a/packages/core/admin/admin/src/pages/Users/components/MagicLink/MagicLinkWrapper.js +++ b/packages/core/admin/admin/src/pages/Users/components/MagicLink/MagicLinkWrapper.js @@ -1,13 +1,15 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import { Box } from '@strapi/parts/Box'; import { Row } from '@strapi/parts/Row'; import { Stack } from '@strapi/parts/Stack'; import { Text } from '@strapi/parts/Text'; +import { Tooltip } from '@strapi/parts/Tooltip'; import { useNotification } from '@strapi/helper-plugin'; -import { Duplicate } from '@strapi/icons'; +import Duplicate from '@strapi/icons/Duplicate'; import styled from 'styled-components'; import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { useIntl } from 'react-intl'; // FIXME replace with parts when ready const Envelope = () => ( @@ -26,10 +28,9 @@ const Envelope = () => ( ); -const Wrapper = styled.div` +const Wrapper = styled.button` padding-left: ${({ theme }) => theme.spaces[2]}; font-size: ${({ theme }) => theme.spaces[3]}; - cursor: pointer; svg { > g, path { @@ -40,11 +41,24 @@ const Wrapper = styled.div` const MagicLinkWrapper = ({ children, target }) => { const toggleNotification = useNotification(); + const copyButtonRef = useRef(); + const { formatMessage } = useIntl(); + + useEffect(() => { + if (copyButtonRef.current) { + copyButtonRef.current.focus(); + } + }, []); const handleCopy = () => { toggleNotification({ type: 'info', message: { id: 'notification.link-copied' } }); }; + const copyLabel = formatMessage({ + id: 'app.component.CopyToClipboard.label', + defaultMessage: 'Copy to clipboard', + }); + return ( @@ -57,14 +71,16 @@ const MagicLinkWrapper = ({ children, target }) => { {target} - - - - - + + + + + + + - + {children} diff --git a/packages/core/admin/admin/src/pages/Users/components/SelectRoles/index.js b/packages/core/admin/admin/src/pages/Users/components/SelectRoles/index.js index 08d8bedd7b..192b5f49cc 100644 --- a/packages/core/admin/admin/src/pages/Users/components/SelectRoles/index.js +++ b/packages/core/admin/admin/src/pages/Users/components/SelectRoles/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; -import { Select, Option } from '@strapi/parts'; +import { Select, Option } from '@strapi/parts/Select'; import { useQuery } from 'react-query'; import styled, { keyframes } from 'styled-components'; import LoadingIcon from '@strapi/icons/LoadingIcon'; diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index 6d834f2c86..02ef27b302 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -211,6 +211,7 @@ "app.components.Button.confirm": "Confirm", "app.components.Button.reset": "Reset", "app.components.Button.save": "Save", + "app.component.CopyToClipboard.label": "Copy to clipboard", "app.components.ComingSoonPage.comingSoon": "Coming soon", "app.components.ConfirmDialog.title": "Confirmation", "app.components.DownloadInfo.download": "Download in progress...", diff --git a/packages/core/helper-plugin/lib/src/components/GenericInput/index.js b/packages/core/helper-plugin/lib/src/components/GenericInput/index.js index 538f26ab05..695f787941 100644 --- a/packages/core/helper-plugin/lib/src/components/GenericInput/index.js +++ b/packages/core/helper-plugin/lib/src/components/GenericInput/index.js @@ -37,7 +37,6 @@ const Input = ({ if (type === 'bool') { return (