@strapi/admin 4.9.0-alpha.0 → 4.9.0-beta.2

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

@@ -19,15 +19,18 @@ import {
 } from '@strapi/helper-plugin';
 import { useQuery } from 'react-query';
 import { Formik } from 'formik';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Typography } from '@strapi/design-system/Typography';
-import { Main } from '@strapi/design-system/Main';
-import { Stack } from '@strapi/design-system/Stack';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
+import {
+  Box,
+  Button,
+  Grid,
+  GridItem,
+  HeaderLayout,
+  ContentLayout,
+  Typography,
+  Main,
+  Flex,
+} from '@strapi/design-system';
+import { ArrowLeft, Check } from '@strapi/icons';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
 import { formatAPIErrors, getFullName } from '../../../../../utils';
 import { fetchUser, putUser } from './utils/api';
@@ -44,15 +47,12 @@ const EditPage = ({ canUpdate }) => {
   } = useRouteMatch('/settings/users/:id');
   const { push } = useHistory();
   const { setUserDisplayName } = useAppInfos();
-
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
   useFocusWhenNavigate();
 
   const { status, data } = useQuery(['user', id], () => fetchUser(id), {
     retry: false,
-    keepPreviousData: false,
-    staleTime: 1000 * 20,
     onError(err) {
       const status = err.response.status;
 
@@ -106,7 +106,7 @@ const EditPage = ({ canUpdate }) => {
       actions.setErrors(fieldsErrors);
       toggleNotification({
         type: 'warning',
-        message: get(err, 'response.data.message', 'notification.error'),
+        message: get(err, 'response.data.error.message', 'notification.error'),
       });
     }
 
@@ -205,7 +205,7 @@ const EditPage = ({ canUpdate }) => {
                     <MagicLink registrationToken={data.registrationToken} />
                   </Box>
                 )}
-                <Stack spacing={7}>
+                <Flex direction="column" alignItems="stretch" gap={7}>
                   <Box
                     background="neutral0"
                     hasRadius
@@ -215,7 +215,7 @@ const EditPage = ({ canUpdate }) => {
                     paddingLeft={7}
                     paddingRight={7}
                   >
-                    <Stack spacing={4}>
+                    <Flex direction="column" alignItems="stretch" gap={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
                           id: 'app.components.Users.ModalCreateBody.block-title.details',
@@ -239,7 +239,7 @@ const EditPage = ({ canUpdate }) => {
                           });
                         })}
                       </Grid>
-                    </Stack>
+                    </Flex>
                   </Box>
                   <Box
                     background="neutral0"
@@ -250,7 +250,7 @@ const EditPage = ({ canUpdate }) => {
                     paddingLeft={7}
                     paddingRight={7}
                   >
-                    <Stack spacing={4}>
+                    <Flex direction="column" alignItems="stretch" gap={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
                           id: 'global.roles',
@@ -267,9 +267,9 @@ const EditPage = ({ canUpdate }) => {
                           />
                         </GridItem>
                       </Grid>
-                    </Stack>
+                    </Flex>
                   </Box>
-                </Stack>
+                </Flex>
               </ContentLayout>
             </Form>
           );

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Button } from '@strapi/design-system';
+import { Envelop } from '@strapi/icons';
+
+const CreateAction = ({ onClick }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Button onClick={onClick} startIcon={<Envelop />} size="S">
+      {formatMessage({
+        id: 'Settings.permissions.users.create',
+        defaultMessage: 'Invite new user',
+      })}
+    </Button>
+  );
+};
+
+CreateAction.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default CreateAction;

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

@@ -1,13 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Tbody, Td, Tr } from '@strapi/design-system/Table';
-import Pencil from '@strapi/icons/Pencil';
-import Trash from '@strapi/icons/Trash';
+import {
+  BaseCheckbox,
+  Box,
+  IconButton,
+  Flex,
+  Typography,
+  Tbody,
+  Td,
+  Tr,
+} from '@strapi/design-system';
+import { Pencil, Trash } from '@strapi/icons';
 import { useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { stopPropagation, onRowClick } from '@strapi/helper-plugin';

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

@@ -6,13 +6,15 @@ import {
   ModalHeader,
   ModalFooter,
   ModalBody,
-} from '@strapi/design-system/ModalLayout';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
+  Grid,
+  GridItem,
+  Breadcrumbs,
+  Crumb,
+  Box,
+  Button,
+  Flex,
+  Typography,
+} from '@strapi/design-system';
 
 import { Formik } from 'formik';
 import {
@@ -47,7 +49,10 @@ const ModalForm = ({ queryName, onToggle }) => {
     {
       async onSuccess({ data }) {
         setRegistrationToken(data.data.registrationToken);
-        await queryClient.invalidateQueries(queryName);
+
+        await queryClient.refetchQueries(queryName);
+        await queryClient.refetchQueries(['ee', 'license-limit-info']);
+
         goNext();
         setIsSubmitting(false);
       },
@@ -123,7 +128,7 @@ const ModalForm = ({ queryName, onToggle }) => {
           return (
             <Form>
               <ModalBody>
-                <Stack spacing={6}>
+                <Flex direction="column" alignItems="stretch" gap={6}>
                   {currentStep !== 'create' && <MagicLink registrationToken={registrationToken} />}
                   <Box>
                     <Typography variant="beta" as="h2">
@@ -133,7 +138,7 @@ const ModalForm = ({ queryName, onToggle }) => {
                       })}
                     </Typography>
                     <Box paddingTop={4}>
-                      <Stack spacing={1}>
+                      <Flex direction="column" alignItems="stretch" gap={1}>
                         <Grid gap={5}>
                           {layout.map((row) => {
                             return row.map((input) => {
@@ -151,7 +156,7 @@ const ModalForm = ({ queryName, onToggle }) => {
                             });
                           })}
                         </Grid>
-                      </Stack>
+                      </Flex>
                     </Box>
                   </Box>
                   <Box>
@@ -188,7 +193,7 @@ const ModalForm = ({ queryName, onToggle }) => {
                       </Grid>
                     </Box>
                   </Box>
-                </Stack>
+                </Flex>
               </ModalBody>
               <ModalFooter
                 startActions={

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box, Flex } from '@strapi/design-system';
 import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
 
 const PaginationFooter = ({ pagination }) => {

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

@@ -7,15 +7,20 @@ import {
   useNotification,
   useFocusWhenNavigate,
   NoPermissions,
+  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
-import { ActionLayout, ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Button } from '@strapi/design-system/Button';
-import { Main } from '@strapi/design-system/Main';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import Envelop from '@strapi/icons/Envelop';
+import {
+  ActionLayout,
+  ContentLayout,
+  HeaderLayout,
+  Main,
+  useNotifyAT,
+} from '@strapi/design-system';
 import { useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import CreateAction from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/CreateAction';
+import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
 import adminPermissions from '../../../../../permissions';
 import TableRows from './DynamicTable/TableRows';
 import Filters from '../../../components/Filters';
@@ -26,6 +31,7 @@ import displayedFilters from './utils/displayedFilters';
 import tableHeaders from './utils/tableHeaders';
 
 const ListPage = () => {
+  const { formatAPIError } = useAPIErrorHandler();
   const [isModalOpened, setIsModalOpen] = useState(false);
   const {
     allowedActions: { canCreate, canDelete, canRead },
@@ -35,6 +41,7 @@ const ListPage = () => {
   const { formatMessage } = useIntl();
   const { search } = useLocation();
   useFocusWhenNavigate();
+  useLicenseLimitNotification();
   const { notifyStatus } = useNotifyAT();
   const queryName = ['users', search];
 
@@ -65,13 +72,15 @@ const ListPage = () => {
 
   const { status, data, isFetching } = useQuery(queryName, () => fetchData(search, notifyLoad), {
     enabled: canRead,
-    keepPreviousData: true,
     retry: false,
-    staleTime: 1000 * 20,
-    onError() {
+    onError(error) {
       toggleNotification({
         type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+        message: {
+          id: 'notification.error',
+          message: formatAPIError(error),
+          defaultMessage: 'An error occured',
+        },
       });
     },
   });
@@ -82,17 +91,20 @@ const ListPage = () => {
 
   const deleteAllMutation = useMutation((ids) => deleteData(ids), {
     async onSuccess() {
-      await queryClient.invalidateQueries(queryName);
+      await queryClient.refetchQueries(queryName);
+
+      // Toggle enabled/ disabled state on the invite button
+      await queryClient.refetchQueries(['ee', 'license-limit-info']);
     },
-    onError(err) {
-      if (err?.response?.data?.data) {
-        toggleNotification({ type: 'warning', message: err.response.data.data });
-      } else {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occured' },
-        });
-      }
+    onError(error) {
+      toggleNotification({
+        type: 'warning',
+        message: {
+          id: 'notification.error',
+          message: formatAPIError(error),
+          defaultMessage: 'An error occured',
+        },
+      });
     },
   });
 
@@ -100,25 +112,11 @@ const ListPage = () => {
   const isLoading =
     (status !== 'success' && status !== 'error') || (status === 'success' && isFetching);
 
-  const createAction = canCreate ? (
-    <Button
-      data-testid="create-user-button"
-      onClick={handleToggle}
-      startIcon={<Envelop />}
-      size="S"
-    >
-      {formatMessage({
-        id: 'Settings.permissions.users.create',
-        defaultMessage: 'Invite new user',
-      })}
-    </Button>
-  ) : undefined;
-
   return (
     <Main aria-busy={isLoading}>
       <SettingsPageTitle name="Users" />
       <HeaderLayout
-        primaryAction={createAction}
+        primaryAction={canCreate && <CreateAction onClick={handleToggle} />}
         title={title}
         subtitle={formatMessage({
           id: 'Settings.permissions.users.listview.header.subtitle',

package/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Flex, Typography } from '@strapi/design-system';
 import { Status } from '@strapi/helper-plugin';
 
 const tableHeaders = [

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { useRBAC, LoadingIndicatorPage, useNotification } from '@strapi/helper-plugin';
 import { Redirect, useLocation } from 'react-router-dom';
-import { get } from 'lodash';
+
 import adminPermissions from '../../../../../permissions';
 import EditPage from '../EditPage';
 
@@ -19,7 +19,7 @@ const ProtectedEditPage = () => {
     allowedActions: { canRead, canUpdate },
   } = useRBAC(permissions);
   const { state } = useLocation();
-  const from = get(state, 'from', '/');
+  const from = state?.from ?? '/';
 
   useEffect(() => {
     if (!isLoading) {

package/admin/src/pages/SettingsPage/pages/Users/components/SelectRoles/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Select, Option } from '@strapi/design-system/Select';
+import { Select, Option } from '@strapi/design-system';
 import { useQuery } from 'react-query';
 import styled, { keyframes } from 'styled-components';
-import LoadingIcon from '@strapi/icons/Loader';
+import { Loader as LoadingIcon } from '@strapi/icons';
 import { getFetchClient } from '@strapi/helper-plugin';
 
 const rotation = keyframes`

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/EventRow.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Checkbox } from '@strapi/design-system/Checkbox';
+import { BaseCheckbox, Checkbox } from '@strapi/design-system';
 import upperFirst from 'lodash/upperFirst';
 
 const EventRow = ({ disabledEvents, name, events, inputValue, handleChange, handleChangeAll }) => {

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FieldLabel } from '@strapi/design-system/Field';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
+import { FieldLabel, Flex, Typography } from '@strapi/design-system';
 import { useFormikContext } from 'formik';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -99,7 +97,7 @@ const EventInput = ({ isDraftAndPublish }) => {
   };
 
   return (
-    <Stack spacing={1}>
+    <Flex direction="column" alignItems="stretch" gap={1}>
       <FieldLabel>
         {formatMessage({
           id: 'Settings.webhooks.form.events',
@@ -154,7 +152,7 @@ const EventInput = ({ isDraftAndPublish }) => {
           })}
         </tbody>
       </StyledTable>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/Combobox.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { ComboboxOption, CreatableCombobox } from '@strapi/design-system/Combobox';
+import { ComboboxOption, CreatableCombobox } from '@strapi/design-system';
 import keys from './keys';
 
 const Combobox = ({ name, onChange, value, ...props }) => {

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/index.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import { RemoveRoundedButton } from '@strapi/helper-plugin';
-import Plus from '@strapi/icons/Plus';
-import { Box } from '@strapi/design-system/Box';
-import { FieldLabel } from '@strapi/design-system/Field';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { TextButton } from '@strapi/design-system/TextButton';
+import { Plus } from '@strapi/icons';
+import {
+  Box,
+  FieldLabel,
+  Grid,
+  GridItem,
+  Flex,
+  TextInput,
+  TextButton,
+} from '@strapi/design-system';
 import { Field, FieldArray, useFormikContext } from 'formik';
 import { useIntl } from 'react-intl';
 import Combobox from './Combobox';
@@ -17,7 +19,7 @@ const HeadersInput = () => {
   const { values, errors } = useFormikContext();
 
   return (
-    <Stack spacing={1}>
+    <Flex direction="column" alignItems="stretch" gap={1}>
       <FieldLabel>
         {formatMessage({
           id: 'Settings.webhooks.form.headers',
@@ -109,7 +111,7 @@ const HeadersInput = () => {
           )}
         />
       </Box>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js

@@ -3,14 +3,8 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
-import Check from '@strapi/icons/Check';
-import Cross from '@strapi/icons/Cross';
-import Loader from '@strapi/icons/Loader';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Check, Cross, Loader } from '@strapi/icons';
+import { Box, Flex, Typography, Grid, GridItem } from '@strapi/design-system';
 
 // Being discussed in Notion: create a <Icon /> component in Parts
 const Icon = styled.svg(
@@ -29,34 +23,34 @@ const Status = ({ isPending, statusCode }) => {
 
   if (isPending) {
     return (
-      <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
+      <Flex gap={2} alignItems="center">
         <Icon as={Loader} />
         <Typography>
           {formatMessage({ id: 'Settings.webhooks.trigger.pending', defaultMessage: 'pending' })}
         </Typography>
-      </Stack>
+      </Flex>
     );
   }
 
   if (statusCode >= 200 && statusCode < 300) {
     return (
-      <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
+      <Flex gap={2} alignItems="center">
         <Icon as={Check} color="success700" />
         <Typography>
           {formatMessage({ id: 'Settings.webhooks.trigger.success', defaultMessage: 'success' })}
         </Typography>
-      </Stack>
+      </Flex>
     );
   }
 
   if (statusCode >= 300) {
     return (
-      <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
+      <Flex gap={2} alignItems="center">
         <Icon as={Cross} color="danger700" />
         <Typography>
           {formatMessage({ id: 'Settings.error', defaultMessage: 'error' })} {statusCode}
         </Typography>
-      </Stack>
+      </Flex>
     );
   }
 
@@ -115,12 +109,12 @@ const CancelButton = ({ onCancel }) => {
   return (
     <Flex justifyContent="flex-end">
       <button onClick={onCancel} type="button">
-        <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
+        <Flex gap={2} alignItems="center">
           <Typography textColor="neutral400">
             {formatMessage({ id: 'Settings.webhooks.trigger.cancel', defaultMessage: 'cancel' })}
           </Typography>
           <Icon as={Cross} color="neutral400" />
-        </Stack>
+        </Flex>
       </button>
     </Flex>
   );

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js

@@ -1,15 +1,17 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Form, Link } from '@strapi/helper-plugin';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
-import Publish from '@strapi/icons/Play';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Stack } from '@strapi/design-system/Stack';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { ArrowLeft, Check, Play as Publish } from '@strapi/icons';
+import {
+  ContentLayout,
+  HeaderLayout,
+  Box,
+  Button,
+  Flex,
+  TextInput,
+  Grid,
+  GridItem,
+} from '@strapi/design-system';
 import { Field, Formik } from 'formik';
 
 import { useIntl } from 'react-intl';
@@ -49,7 +51,7 @@ const WebhookForm = ({
         <Form noValidate>
           <HeaderLayout
             primaryAction={
-              <Stack horizontal spacing={2}>
+              <Flex gap={2}>
                 <Button
                   onClick={() => {
                     triggerWebhook();
@@ -71,7 +73,7 @@ const WebhookForm = ({
                     defaultMessage: 'Save',
                   })}
                 </Button>
-              </Stack>
+              </Flex>
             }
             title={
               isCreating
@@ -91,7 +93,7 @@ const WebhookForm = ({
             }
           />
           <ContentLayout>
-            <Stack spacing={4}>
+            <Flex direction="column" alignItems="stretch" gap={4}>
               {showTriggerResponse && (
                 <div className="trigger-wrapper">
                   <TriggerContainer
@@ -102,7 +104,7 @@ const WebhookForm = ({
                 </div>
               )}
               <Box background="neutral0" padding={8} shadow="filterShadow" hasRadius>
-                <Stack spacing={6}>
+                <Flex direction="column" alignItems="stretch" gap={6}>
                   <Grid gap={6}>
                     <GridItem col={6}>
                       <Field
@@ -131,9 +133,9 @@ const WebhookForm = ({
                   </Grid>
                   <HeadersInput />
                   <EventInput isDraftAndPublish={isDraftAndPublishEvents} />
-                </Stack>
+                </Flex>
               </Box>
-            </Stack>
+            </Flex>
           </ContentLayout>
         </Form>
       )}

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

@@ -13,7 +13,7 @@ import {
   useOverlayBlocker,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
+import { Main } from '@strapi/design-system';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { useModels } from '../../../../../hooks';

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/utils/formatData.js

@@ -1,11 +1,5 @@
-import { set } from 'lodash';
-
 const cleanData = (data) => {
-  const webhooks = { ...data };
-
-  set(webhooks, 'headers', unformatHeaders(data.headers));
-
-  return webhooks;
+  return { ...data, headers: unformatHeaders(data.headers) };
 };
 
 const unformatHeaders = (headers) => {