Chore: Add react-query as dependency

packages/core/email/admin/src/pages/Settings/components/Configuration.js

@@ -1,113 +0,0 @@
-/* eslint-disable no-useless-escape */
-
-import React from 'react';
-
-import { Flex, Grid, GridItem, Option, Select, TextInput, Typography } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-const DocumentationLink = styled.a`
-  color: ${({ theme }) => theme.colors.primary600};
-`;
-
-const Configuration = ({ config }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Flex direction="column" alignItems="stretch" gap={4}>
-      <Flex direction="column" alignItems="stretch" gap={1}>
-        <Typography variant="delta" as="h2">
-          {formatMessage({
-            id: 'email.Settings.email.plugin.title.config',
-            defaultMessage: 'Configuration',
-          })}
-        </Typography>
-        <Typography>
-          {formatMessage(
-            {
-              id: 'email.Settings.email.plugin.text.configuration',
-              defaultMessage:
-                'The plugin is configured through the {file} file, checkout this {link} for the documentation.',
-            },
-            {
-              file: './config/plugins.js',
-              link: (
-                <DocumentationLink
-                  href="https://docs.strapi.io/developer-docs/latest/plugins/email.html"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {formatMessage({
-                    id: 'email.link',
-                    defaultMessage: 'Link',
-                  })}
-                </DocumentationLink>
-              ),
-            }
-          )}
-        </Typography>
-      </Flex>
-      <Grid gap={5}>
-        <GridItem col={6} s={12}>
-          <TextInput
-            name="shipper-email"
-            label={formatMessage({
-              id: 'email.Settings.email.plugin.label.defaultFrom',
-              defaultMessage: 'Default sender email',
-            })}
-            placeholder={formatMessage({
-              id: 'email.Settings.email.plugin.placeholder.defaultFrom',
-              defaultMessage: "ex: Strapi No-Reply '<'no-reply@strapi.io'>'",
-            })}
-            disabled
-            onChange={() => {}}
-            value={config.settings.defaultFrom}
-          />
-        </GridItem>
-        <GridItem col={6} s={12}>
-          <TextInput
-            name="response-email"
-            label={formatMessage({
-              id: 'email.Settings.email.plugin.label.defaultReplyTo',
-              defaultMessage: 'Default response email',
-            })}
-            placeholder={formatMessage({
-              id: 'email.Settings.email.plugin.placeholder.defaultReplyTo',
-              defaultMessage: `ex: Strapi '<'example@strapi.io'>'`,
-            })}
-            disabled
-            onChange={() => {}}
-            value={config.settings.defaultReplyTo}
-          />
-        </GridItem>
-        <GridItem col={6} s={12}>
-          <Select
-            name="email-provider"
-            label={formatMessage({
-              id: 'email.Settings.email.plugin.label.provider',
-              defaultMessage: 'Email provider',
-            })}
-            disabled
-            onChange={() => {}}
-            value={config.provider}
-          >
-            <Option value={config.provider}>{config.provider}</Option>
-          </Select>
-        </GridItem>
-      </Grid>
-    </Flex>
-  );
-};
-
-Configuration.propTypes = {
-  config: PropTypes.shape({
-    provider: PropTypes.string,
-    settings: PropTypes.shape({
-      defaultFrom: PropTypes.string,
-      defaultReplyTo: PropTypes.string,
-    }),
-  }).isRequired,
-};
-
-export default Configuration;

packages/core/email/admin/src/pages/Settings/index.js

@@ -55,7 +55,9 @@ const SettingsPage = () => {
     return config;
   });
 
-  const mutation = useMutation((body) => post('/email/test', body), {
+  const mutation = useMutation(
+    (body) => post('/email/test', body),
+    {
       onError() {
         toggleNotification({
           type: 'warning',
@@ -81,7 +83,11 @@ const SettingsPage = () => {
           ),
         });
       },
-  });
+    },
+    {
+      retry: false,
+    }
+  );
 
   useFocusWhenNavigate();
 
@@ -138,7 +144,7 @@ const SettingsPage = () => {
       />
 
       <ContentLayout>
-        {isLoading || mutation.isLoading ? (
+        {isLoading ? (
           <LoadingIndicatorPage />
         ) : (
           <form onSubmit={handleSubmit}>
@@ -171,7 +177,7 @@ const SettingsPage = () => {
                           file: './config/plugins.js',
                           link: (
                             <DocumentationLink
-                              href="https://docs.strapi.io/dev-docs/plugins/email"
+                              href="https://docs.strapi.io/developer-docs/latest/plugins/email.html"
                               target="_blank"
                               rel="noopener noreferrer"
                             >
@@ -199,6 +205,7 @@ const SettingsPage = () => {
                           defaultMessage: "ex: Strapi No-Reply '<'no-reply@strapi.io'>'",
                         })}
                         disabled
+                        onChange={() => {}}
                         value={data.settings.defaultFrom}
                       />
                     </GridItem>
@@ -215,6 +222,7 @@ const SettingsPage = () => {
                           defaultMessage: `ex: Strapi '<'example@strapi.io'>'`,
                         })}
                         disabled
+                        onChange={() => {}}
                         value={data.settings.defaultReplyTo}
                       />
                     </GridItem>
@@ -227,6 +235,7 @@ const SettingsPage = () => {
                           defaultMessage: 'Email provider',
                         })}
                         disabled
+                        onChange={() => {}}
                         value={data.provider}
                       >
                         <Option value={data.provider}>{data.provider}</Option>
@@ -236,8 +245,11 @@ const SettingsPage = () => {
                 </Flex>
               </Box>
 
-              <Box
+              <Flex
+                alignItems="stretch"
                 background="neutral0"
+                direction="column"
+                gap={4}
                 hasRadius
                 shadow="filterShadow"
                 paddingTop={6}
@@ -245,7 +257,6 @@ const SettingsPage = () => {
                 paddingLeft={7}
                 paddingRight={7}
               >
-                <Flex direction="column" alignItems="stretch" gap={4}>
                 <Typography variant="delta" as="h2">
                   {formatMessage({
                     id: 'email.Settings.email.plugin.title.test',
@@ -292,7 +303,6 @@ const SettingsPage = () => {
                   </GridItem>
                 </Grid>
               </Flex>
-              </Box>
             </Flex>
           </form>
         )}

packages/core/email/package.json

@@ -34,6 +34,7 @@
     "lodash": "4.17.21",
     "prop-types": "^15.8.1",
     "react-intl": "6.4.1",
+    "react-query": "3.39.3",
     "yup": "0.32.9"
   },
   "devDependencies": {

yarn.lock

@@ -7312,6 +7312,7 @@ __metadata:
     react: ^18.2.0
     react-dom: ^18.2.0
     react-intl: 6.4.1
+    react-query: 3.39.3
     react-router-dom: 5.3.4
     styled-components: 5.3.3
     yup: 0.32.9