@strapi/admin 4.12.4 → 4.12.6

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 
 import {
   Button,
@@ -14,8 +14,11 @@ import {
   Typography,
 } from '@strapi/design-system';
 import {
+  prefixFileUrlWithBackendUrl,
   SettingsPageTitle,
+  useAPIErrorHandler,
   useAppInfo,
+  useFetchClient,
   useFocusWhenNavigate,
   useNotification,
   useRBAC,
@@ -23,7 +26,7 @@ import {
 } from '@strapi/helper-plugin';
 import { Check, ExternalLink } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 
 import { useConfigurations } from '../../../../hooks';
@@ -31,18 +34,20 @@ import { useEnterprise } from '../../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../App/selectors';
 
 import CustomizationInfos from './components/CustomizationInfos';
-import { fetchProjectSettings, postProjectSettings } from './utils/api';
 import getFormData from './utils/getFormData';
 
 const AdminSeatInfoCE = () => null;
 
 const ApplicationInfosPage = () => {
-  const inputsRef = useRef();
+  const inputsRef = React.useRef();
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
-  const queryClient = useQueryClient();
-  useFocusWhenNavigate();
+  const { get, post } = useFetchClient();
+  const { updateProjectSettings } = useConfigurations();
+  const permissions = useSelector(selectAdminPermissions);
+  const { formatAPIError } = useAPIErrorHandler();
+
   const {
     communityEdition,
     latestStrapiReleaseTag,
@@ -50,8 +55,7 @@ const ApplicationInfosPage = () => {
     shouldUpdateStrapi,
     strapiVersion,
   } = useAppInfo();
-  const { updateProjectSettings } = useConfigurations();
-  const permissions = useSelector(selectAdminPermissions);
+
   const AdminSeatInfo = useEnterprise(
     AdminSeatInfoCE,
     async () =>
@@ -65,38 +69,68 @@ const ApplicationInfosPage = () => {
   const {
     allowedActions: { canRead, canUpdate },
   } = useRBAC(permissions.settings['project-settings']);
-  const canSubmit = canRead && canUpdate;
 
-  const { data, isLoading } = useQuery('project-settings', fetchProjectSettings, {
-    enabled: canRead,
-  });
+  useFocusWhenNavigate();
 
-  const submitMutation = useMutation((body) => postProjectSettings(body), {
-    async onSuccess({ menuLogo, authLogo }) {
-      await queryClient.invalidateQueries('project-settings', { refetchActive: true });
-      updateProjectSettings({ menuLogo: menuLogo?.url, authLogo: authLogo?.url });
+  const { data, isLoading } = useQuery(
+    ['project-settings'],
+    async () => {
+      const { data } = await get('/admin/project-settings');
+
+      return data;
     },
-  });
+    {
+      cacheTime: 0,
+      enabled: canRead,
+      select(data) {
+        return {
+          ...data,
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
+          authLogo: data.authLogo
+            ? {
+                ...data.authLogo,
+                url: prefixFileUrlWithBackendUrl(data.authLogo.url),
+              }
+            : data.authLogo,
 
-    if (!canUpdate) return;
+          menuLogo: data.menuLogo
+            ? {
+                ...data.menuLogo,
+                url: prefixFileUrlWithBackendUrl(data.menuLogo.url),
+              }
+            : data.menuLogo,
+        };
+      },
+    }
+  );
 
-    const inputValues = inputsRef.current.getValues();
-    const formData = getFormData(inputValues);
+  const submitMutation = useMutation(
+    (body) =>
+      post('/admin/project-settings', body, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      }),
+    {
+      onError(error) {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      },
 
-    submitMutation.mutate(formData, {
-      onSuccess() {
-        const { menuLogo, authLogo } = inputValues;
+      async onSuccess(data) {
+        const { menuLogo, authLogo } = data;
 
-        if (menuLogo.rawFile) {
+        updateProjectSettings({ menuLogo: menuLogo?.url, authLogo: authLogo?.url });
+
+        if (menuLogo?.rawFile) {
           trackUsage('didChangeLogo', {
             logo: 'menu',
           });
         }
 
-        if (authLogo.rawFile) {
+        if (authLogo?.rawFile) {
           trackUsage('didChangeLogo', {
             logo: 'auth',
           });
@@ -107,13 +141,13 @@ const ApplicationInfosPage = () => {
           message: formatMessage({ id: 'app', defaultMessage: 'Saved' }),
         });
       },
-      onError() {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occurred' },
-        });
-      },
-    });
+    }
+  );
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    submitMutation.mutate(getFormData(inputsRef.current.getValues()));
   };
 
   // block rendering until the EE component is fully loaded
@@ -145,7 +179,7 @@ const ApplicationInfosPage = () => {
                 defaultMessage: 'Administration panel’s global information',
               })}
               primaryAction={
-                canSubmit && (
+                canUpdate && (
                   <Button type="submit" startIcon={<Check />}>
                     {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/index.js

@@ -19,7 +19,7 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
-import { formatAPIErrors } from '../../../../../utils';
+import { formatAPIErrors } from '../../../../../utils/formatAPIErrors';
 import { selectAdminPermissions } from '../../../../App/selectors';
 import { TRANSFER_TOKEN_TYPE } from '../../../components/Tokens/constants';
 import FormHead from '../../../components/Tokens/FormHead';

package/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-import { Button, ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
+import { ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
 import {
   LinkButton,
   NoContent,
@@ -136,9 +136,10 @@ const TransferTokenListView = () => {
     }
   );
 
-  const shouldDisplayDynamicTable = canRead && transferTokens;
-  const shouldDisplayNoContent = canRead && !transferTokens && !canCreate;
-  const shouldDisplayNoContentWithCreationButton = canRead && !transferTokens && canCreate;
+  const hasTransferTokens = transferTokens && transferTokens?.length > 0;
+  const shouldDisplayDynamicTable = canRead && hasTransferTokens;
+  const shouldDisplayNoContent = canRead && !hasTransferTokens && !canCreate;
+  const shouldDisplayNoContentWithCreationButton = canRead && !hasTransferTokens && canCreate;
 
   return (
     <Main aria-busy={isLoading}>
@@ -194,12 +195,16 @@ const TransferTokenListView = () => {
               defaultMessage: 'Add your first Transfer Token',
             }}
             action={
-              <Button variant="secondary" startIcon={<Plus />}>
+              <LinkButton
+                variant="secondary"
+                startIcon={<Plus />}
+                to="/settings/transfer-tokens/create"
+              >
                 {formatMessage({
                   id: 'Settings.transferTokens.addNewToken',
                   defaultMessage: 'Add new Transfer Token',
                 })}
-              </Button>
+              </LinkButton>
             }
           />
         )}

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -34,7 +34,8 @@ import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { useAdminUsers } from '../../../../../hooks/useAdminUsers';
 import { useEnterprise } from '../../../../../hooks/useEnterprise';
-import { formatAPIErrors, getFullName } from '../../../../../utils';
+import { formatAPIErrors } from '../../../../../utils/formatAPIErrors';
+import { getFullName } from '../../../../../utils/getFullName';
 import { MagicLinkCE } from '../components/MagicLink';
 import SelectRoles from '../components/SelectRoles';
 import { editValidation } from '../utils/validations/users';
@@ -71,6 +72,8 @@ const EditPage = ({ canUpdate }) => {
   } = useAdminUsers(
     { id },
     {
+      cacheTime: 0,
+
       onError(error) {
         const { status } = error.response;
 

package/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js

@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { getFullName } from '../../../../../../../utils';
+import { getFullName } from '../../../../../../../utils/getFullName';
 
 const TableRows = ({
   canDelete,

package/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -52,6 +52,7 @@ export const UserListPageCE = () => {
     isLoading,
     refetch: refetchAdminUsers,
   } = useAdminUsers(qs.parse(search, { ignoreQueryPrefix: true }), {
+    cacheTime: 0,
     enabled: canRead,
   });
   const CreateAction = useEnterprise(

package/admin/src/pages/UseCasePage.js

@@ -0,0 +1,174 @@
+import * as React from 'react';
+
+import {
+  Button,
+  Flex,
+  Main,
+  Option,
+  Select,
+  TextButton,
+  TextInput,
+  Typography,
+} from '@strapi/design-system';
+import { auth, useNotification } from '@strapi/helper-plugin';
+import { parse } from 'qs';
+import { useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import Logo from '../components/UnauthenticatedLogo';
+import UnauthenticatedLayout, { LayoutContent } from '../layouts/UnauthenticatedLayout';
+
+export const options = [
+  {
+    intlLabel: {
+      id: 'Usecase.front-end',
+      defaultMessage: 'Front-end developer',
+    },
+    value: 'front_end_developer',
+  },
+  {
+    intlLabel: {
+      id: 'Usecase.back-end',
+      defaultMessage: 'Back-end developer',
+    },
+    value: 'back_end_developer',
+  },
+  {
+    intlLabel: {
+      id: 'Usecase.full-stack',
+      defaultMessage: 'Full-stack developer',
+    },
+    value: 'full_stack_developer',
+  },
+  {
+    intlLabel: {
+      id: 'global.content-manager',
+      defaultMessage: 'Content Manager',
+    },
+    value: 'content_manager',
+  },
+  {
+    intlLabel: {
+      id: 'Usecase.content-creator',
+      defaultMessage: 'Content Creator',
+    },
+    value: 'content_creator',
+  },
+  {
+    intlLabel: {
+      id: 'Usecase.other',
+      defaultMessage: 'Other',
+    },
+    value: 'other',
+  },
+];
+
+export const UseCasePage = () => {
+  const toggleNotification = useNotification();
+  const { push, location } = useHistory();
+  const { formatMessage } = useIntl();
+  const [role, setRole] = React.useState();
+  const [otherRole, setOtherRole] = React.useState('');
+
+  const { firstname, email } = auth.getUserInfo();
+  const { hasAdmin } = parse(location?.search, { ignoreQueryPrefix: true });
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    const shouldSkip = event.nativeEvent?.submitter?.name === 'skip';
+
+    await fetch('https://analytics.strapi.io/register', {
+      body: JSON.stringify({
+        email,
+        username: firstname,
+        firstAdmin: Boolean(!hasAdmin),
+        persona: {
+          role: shouldSkip ? undefined : role,
+          otherRole: shouldSkip ? undefined : otherRole,
+        },
+      }),
+
+      headers: {
+        'Content-Type': 'application/json',
+      },
+
+      method: 'POST',
+    });
+
+    toggleNotification({
+      type: 'success',
+      message: {
+        id: 'Usecase.notification.success.project-created',
+        defaultMessage: 'Project has been successfully created',
+      },
+    });
+
+    push('/');
+  };
+
+  return (
+    <UnauthenticatedLayout>
+      <Main labelledBy="usecase-title">
+        <form onSubmit={handleSubmit}>
+          <LayoutContent>
+            <Flex direction="column" alignItems="stretch" gap={7}>
+              <Flex direction="column" gap={6}>
+                <Logo />
+
+                <Typography textAlign="center" variant="alpha" as="h1" id="usecase-title">
+                  {formatMessage({
+                    id: 'Usecase.title',
+                    defaultMessage: 'Tell us a bit more about yourself',
+                  })}
+                </Typography>
+              </Flex>
+
+              <Flex direction="column" alignItems="stretch" gap={6}>
+                <Select
+                  id="usecase"
+                  data-testid="usecase"
+                  label={formatMessage({
+                    id: 'Usecase.input.work-type',
+                    defaultMessage: 'What type of work do you do?',
+                  })}
+                  onChange={setRole}
+                  value={role}
+                >
+                  {options.map(({ intlLabel, value }) => (
+                    <Option key={value} value={value}>
+                      {formatMessage(intlLabel)}
+                    </Option>
+                  ))}
+                </Select>
+
+                {role === 'other' && (
+                  <TextInput
+                    name="other"
+                    label={formatMessage({ id: 'Usecase.other', defaultMessage: 'Other' })}
+                    value={otherRole}
+                    onChange={(e) => setOtherRole(e.target.value)}
+                    data-testid="other"
+                  />
+                )}
+
+                <Button type="submit" size="L" fullWidth disabled={!role}>
+                  {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}
+                </Button>
+              </Flex>
+            </Flex>
+          </LayoutContent>
+
+          <Flex justifyContent="center" paddingTop={4}>
+            <TextButton type="submit" name="skip">
+              {formatMessage({
+                id: 'Usecase.button.skip',
+                defaultMessage: 'Skip this question',
+              })}
+            </TextButton>
+          </Flex>
+        </form>
+      </Main>
+    </UnauthenticatedLayout>
+  );
+};