@strapi/plugin-users-permissions 0.0.0-next.f7babb775ed9a7e18d8351cb7f74c63e016323c4 → 0.0.0-next.f93d6eabe52aa7681655cfa08eedbc3708dbb90d

package/admin/src/pages/EmailTemplates/components/EmailForm.js

@@ -1,176 +0,0 @@
-import React from 'react';
-
-import {
-  Button,
-  Grid,
-  GridItem,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalLayout,
-  Textarea,
-} from '@strapi/design-system';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
-import { Form, GenericInput } from '@strapi/helper-plugin';
-import { Formik } from 'formik';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { getTrad } from '../../../utils';
-import schema from '../utils/schema';
-
-const EmailForm = ({ template, onToggle, onSubmit }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <ModalLayout
-      onClose={onToggle}
-      labelledBy={`${formatMessage({
-        id: getTrad('PopUpForm.header.edit.email-templates'),
-        defaultMessage: 'Edit email template',
-      })}, ${formatMessage({ id: getTrad(template.display), defaultMessage: template.display })}`}
-    >
-      <ModalHeader>
-        <Breadcrumbs
-          label={`${formatMessage({
-            id: getTrad('PopUpForm.header.edit.email-templates'),
-            defaultMessage: 'Edit email template',
-          })}, ${formatMessage({
-            id: getTrad(template.display),
-            defaultMessage: template.display,
-          })}`}
-        >
-          <Crumb>
-            {formatMessage({
-              id: getTrad('PopUpForm.header.edit.email-templates'),
-              defaultMessage: 'Edit email template',
-            })}
-          </Crumb>
-          <Crumb isCurrent>
-            {formatMessage({ id: getTrad(template.display), defaultMessage: template.display })}
-          </Crumb>
-        </Breadcrumbs>
-      </ModalHeader>
-      <Formik
-        onSubmit={onSubmit}
-        initialValues={template}
-        validateOnChange={false}
-        validationSchema={schema}
-        enableReinitialize
-      >
-        {({ errors, values, handleChange, isSubmitting }) => {
-          return (
-            <Form>
-              <ModalBody>
-                <Grid gap={5}>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
-                        id: getTrad('PopUpForm.Email.options.from.name.label'),
-                        defaultMessage: 'Shipper name',
-                      }}
-                      name="options.from.name"
-                      onChange={handleChange}
-                      value={values.options.from.name}
-                      error={errors?.options?.from?.name}
-                      type="text"
-                    />
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
-                        id: getTrad('PopUpForm.Email.options.from.email.label'),
-                        defaultMessage: 'Shipper email',
-                      }}
-                      name="options.from.email"
-                      onChange={handleChange}
-                      value={values.options.from.email}
-                      error={errors?.options?.from?.email}
-                      type="text"
-                    />
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
-                        id: getTrad('PopUpForm.Email.options.response_email.label'),
-                        defaultMessage: 'Response email',
-                      }}
-                      name="options.response_email"
-                      onChange={handleChange}
-                      value={values.options.response_email}
-                      error={errors?.options?.response_email}
-                      type="text"
-                    />
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
-                        id: getTrad('PopUpForm.Email.options.object.label'),
-                        defaultMessage: 'Subject',
-                      }}
-                      name="options.object"
-                      onChange={handleChange}
-                      value={values.options.object}
-                      error={errors?.options?.object}
-                      type="text"
-                    />
-                  </GridItem>
-                  <GridItem col={12} s={12}>
-                    <Textarea
-                      label={formatMessage({
-                        id: getTrad('PopUpForm.Email.options.message.label'),
-                        defaultMessage: 'Message',
-                      })}
-                      id="options.message"
-                      onChange={handleChange}
-                      value={values.options.message}
-                      error={
-                        errors?.options?.message &&
-                        formatMessage({
-                          id: errors.options.message,
-                          defaultMessage: errors.options.message,
-                        })
-                      }
-                    />
-                  </GridItem>
-                </Grid>
-              </ModalBody>
-              <ModalFooter
-                startActions={
-                  <Button onClick={onToggle} variant="tertiary">
-                    Cancel
-                  </Button>
-                }
-                endActions={
-                  <Button loading={isSubmitting} type="submit">
-                    Finish
-                  </Button>
-                }
-              />
-            </Form>
-          );
-        }}
-      </Formik>
-    </ModalLayout>
-  );
-};
-
-EmailForm.propTypes = {
-  template: PropTypes.shape({
-    display: PropTypes.string,
-    icon: PropTypes.string,
-    options: PropTypes.shape({
-      from: PropTypes.shape({
-        name: PropTypes.string,
-        email: PropTypes.string,
-      }),
-      message: PropTypes.string,
-      object: PropTypes.string,
-      response_email: PropTypes.string,
-    }),
-  }).isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onToggle: PropTypes.func.isRequired,
-};
-
-export default EmailForm;

package/admin/src/pages/EmailTemplates/index.js

@@ -1,159 +0,0 @@
-import React, { useRef, useState } from 'react';
-
-import { ContentLayout, HeaderLayout, Main, useNotifyAT } from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  LoadingIndicatorPage,
-  SettingsPageTitle,
-  useFocusWhenNavigate,
-  useNotification,
-  useOverlayBlocker,
-  useRBAC,
-  useTracking,
-} from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
-
-import { PERMISSIONS } from '../../constants';
-import { getTrad } from '../../utils';
-
-import EmailForm from './components/EmailForm';
-import EmailTable from './components/EmailTable';
-import { fetchData, putEmailTemplate } from './utils/api';
-
-const ProtectedEmailTemplatesPage = () => (
-  <CheckPagePermissions permissions={PERMISSIONS.readEmailTemplates}>
-    <EmailTemplatesPage />
-  </CheckPagePermissions>
-);
-
-const EmailTemplatesPage = () => {
-  const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
-  const { notifyStatus } = useNotifyAT();
-  const toggleNotification = useNotification();
-  const { lockApp, unlockApp } = useOverlayBlocker();
-  const trackUsageRef = useRef(trackUsage);
-  const queryClient = useQueryClient();
-  useFocusWhenNavigate();
-
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [templateToEdit, setTemplateToEdit] = useState(null);
-
-  const {
-    isLoading: isLoadingForPermissions,
-    allowedActions: { canUpdate },
-  } = useRBAC({ update: PERMISSIONS.updateEmailTemplates });
-
-  const { status: isLoadingData, data } = useQuery('email-templates', () => fetchData(), {
-    onSuccess() {
-      notifyStatus(
-        formatMessage({
-          id: getTrad('Email.template.data.loaded'),
-          defaultMessage: 'Email templates has been loaded',
-        })
-      );
-    },
-    onError() {
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
-      });
-    },
-  });
-
-  const isLoading = isLoadingForPermissions || isLoadingData !== 'success';
-
-  const handleToggle = () => {
-    setIsModalOpen((prev) => !prev);
-  };
-
-  const handleEditClick = (template) => {
-    setTemplateToEdit(template);
-    handleToggle();
-  };
-
-  const submitMutation = useMutation((body) => putEmailTemplate({ 'email-templates': body }), {
-    async onSuccess() {
-      await queryClient.invalidateQueries('email-templates');
-
-      toggleNotification({
-        type: 'success',
-        message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
-      });
-
-      trackUsageRef.current('didEditEmailTemplates');
-
-      unlockApp();
-      handleToggle();
-    },
-    onError() {
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
-      });
-      unlockApp();
-    },
-    refetchActive: true,
-  });
-  const { isLoading: isSubmittingForm } = submitMutation;
-
-  const handleSubmit = (body) => {
-    lockApp();
-    trackUsageRef.current('willEditEmailTemplates');
-
-    const editedTemplates = { ...data, [templateToEdit]: body };
-    submitMutation.mutate(editedTemplates);
-  };
-
-  if (isLoading) {
-    return (
-      <Main aria-busy="true">
-        <SettingsPageTitle
-          name={formatMessage({
-            id: getTrad('HeaderNav.link.emailTemplates'),
-            defaultMessage: 'Email templates',
-          })}
-        />
-        <HeaderLayout
-          title={formatMessage({
-            id: getTrad('HeaderNav.link.emailTemplates'),
-            defaultMessage: 'Email templates',
-          })}
-        />
-        <ContentLayout>
-          <LoadingIndicatorPage />
-        </ContentLayout>
-      </Main>
-    );
-  }
-
-  return (
-    <Main aria-busy={isSubmittingForm}>
-      <SettingsPageTitle
-        name={formatMessage({
-          id: getTrad('HeaderNav.link.emailTemplates'),
-          defaultMessage: 'Email templates',
-        })}
-      />
-      <HeaderLayout
-        title={formatMessage({
-          id: getTrad('HeaderNav.link.emailTemplates'),
-          defaultMessage: 'Email templates',
-        })}
-      />
-      <ContentLayout>
-        <EmailTable onEditClick={handleEditClick} canUpdate={canUpdate} />
-        {isModalOpen && (
-          <EmailForm
-            template={data[templateToEdit]}
-            onToggle={handleToggle}
-            onSubmit={handleSubmit}
-          />
-        )}
-      </ContentLayout>
-    </Main>
-  );
-};
-
-export default ProtectedEmailTemplatesPage;

package/admin/src/pages/EmailTemplates/utils/api.js

@@ -1,16 +0,0 @@
-import { getFetchClient } from '@strapi/helper-plugin';
-
-const fetchData = async () => {
-  const { get } = getFetchClient();
-  const { data } = await get('/users-permissions/email-templates');
-
-  return data;
-};
-
-const putEmailTemplate = (body) => {
-  const { put } = getFetchClient();
-
-  return put('/users-permissions/email-templates', body);
-};
-
-export { fetchData, putEmailTemplate };

package/admin/src/pages/Providers/index.js

@@ -1,271 +0,0 @@
-import React, { useMemo, useRef, useState } from 'react';
-
-import {
-  ContentLayout,
-  HeaderLayout,
-  IconButton,
-  Layout,
-  Main,
-  Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-  Typography,
-  useNotifyAT,
-  VisuallyHidden,
-} from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  LoadingIndicatorPage,
-  onRowClick,
-  SettingsPageTitle,
-  stopPropagation,
-  useFocusWhenNavigate,
-  useNotification,
-  useOverlayBlocker,
-  useRBAC,
-  useTracking,
-} from '@strapi/helper-plugin';
-import { Pencil } from '@strapi/icons';
-import has from 'lodash/has';
-import upperFirst from 'lodash/upperFirst';
-import { useIntl } from 'react-intl';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
-
-import FormModal from '../../components/FormModal';
-import { PERMISSIONS } from '../../constants';
-import { getTrad } from '../../utils';
-
-import { fetchData, putProvider } from './utils/api';
-import createProvidersArray from './utils/createProvidersArray';
-import forms from './utils/forms';
-
-export const ProvidersPage = () => {
-  const { formatMessage } = useIntl();
-  useFocusWhenNavigate();
-  const { notifyStatus } = useNotifyAT();
-  const queryClient = useQueryClient();
-  const { trackUsage } = useTracking();
-  const trackUsageRef = useRef(trackUsage);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isSubmiting, setIsSubmiting] = useState(false);
-  const [providerToEditName, setProviderToEditName] = useState(null);
-  const toggleNotification = useNotification();
-  const { lockApp, unlockApp } = useOverlayBlocker();
-
-  const {
-    isLoading: isLoadingForPermissions,
-    allowedActions: { canUpdate },
-  } = useRBAC({ update: PERMISSIONS.updateProviders });
-
-  const {
-    isLoading: isLoadingForData,
-    data: modifiedData,
-    isFetching,
-  } = useQuery('get-providers', () => fetchData(toggleNotification), {
-    onSuccess() {
-      notifyStatus(
-        formatMessage({
-          id: getTrad('Providers.data.loaded'),
-          defaultMessage: 'Providers have been loaded',
-        })
-      );
-    },
-    initialData: {},
-  });
-
-  const isLoading = isLoadingForData || isFetching;
-
-  const submitMutation = useMutation(putProvider, {
-    async onSuccess() {
-      await queryClient.invalidateQueries('get-providers');
-      toggleNotification({
-        type: 'info',
-        message: { id: getTrad('notification.success.submit') },
-      });
-
-      trackUsageRef.current('didEditAuthenticationProvider');
-      setIsSubmiting(false);
-      handleToggleModal();
-      unlockApp();
-    },
-    onError() {
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error' },
-      });
-      unlockApp();
-      setIsSubmiting(false);
-    },
-    refetchActive: false,
-  });
-
-  const providers = useMemo(() => createProvidersArray(modifiedData), [modifiedData]);
-
-  const rowCount = providers.length;
-
-  const isProviderWithSubdomain = useMemo(() => {
-    if (!providerToEditName) {
-      return false;
-    }
-
-    const providerToEdit = providers.find((obj) => obj.name === providerToEditName);
-
-    return has(providerToEdit, 'subdomain');
-  }, [providers, providerToEditName]);
-
-  const pageTitle = formatMessage({
-    id: getTrad('HeaderNav.link.providers'),
-    defaultMessage: 'Providers',
-  });
-
-  const layoutToRender = useMemo(() => {
-    if (providerToEditName === 'email') {
-      return forms.email;
-    }
-
-    if (isProviderWithSubdomain) {
-      return forms.providersWithSubdomain;
-    }
-
-    return forms.providers;
-  }, [providerToEditName, isProviderWithSubdomain]);
-
-  const handleToggleModal = () => {
-    setIsOpen((prev) => !prev);
-  };
-
-  const handleClickEdit = (provider) => {
-    if (canUpdate) {
-      setProviderToEditName(provider.name);
-      handleToggleModal();
-    }
-  };
-
-  const handleSubmit = async (values) => {
-    setIsSubmiting(true);
-
-    lockApp();
-
-    trackUsageRef.current('willEditAuthenticationProvider');
-
-    const body = { ...modifiedData, [providerToEditName]: values };
-
-    submitMutation.mutate({ providers: body });
-  };
-
-  return (
-    <Layout>
-      <SettingsPageTitle name={pageTitle} />
-      <Main>
-        <HeaderLayout
-          title={formatMessage({
-            id: getTrad('HeaderNav.link.providers'),
-            defaultMessage: 'Providers',
-          })}
-        />
-        {isLoading || isLoadingForPermissions ? (
-          <LoadingIndicatorPage />
-        ) : (
-          <ContentLayout>
-            <Table colCount={3} rowCount={rowCount + 1}>
-              <Thead>
-                <Tr>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <Typography variant="sigma">
-                      <VisuallyHidden>
-                        {formatMessage({
-                          id: 'global.settings',
-                          defaultMessage: 'Settings',
-                        })}
-                      </VisuallyHidden>
-                    </Typography>
-                  </Th>
-                </Tr>
-              </Thead>
-              <Tbody>
-                {providers.map((provider) => (
-                  <Tr
-                    key={provider.name}
-                    {...onRowClick({
-                      fn: () => handleClickEdit(provider),
-                      condition: canUpdate,
-                    })}
-                  >
-                    <Td width="45%">
-                      <Typography fontWeight="semiBold" textColor="neutral800">
-                        {provider.name}
-                      </Typography>
-                    </Td>
-                    <Td width="65%">
-                      <Typography
-                        textColor={provider.enabled ? 'success600' : 'danger600'}
-                        data-testid={`enable-${provider.name}`}
-                      >
-                        {provider.enabled
-                          ? formatMessage({
-                              id: 'global.enabled',
-                              defaultMessage: 'Enabled',
-                            })
-                          : formatMessage({
-                              id: 'global.disabled',
-                              defaultMessage: 'Disabled',
-                            })}
-                      </Typography>
-                    </Td>
-                    <Td {...stopPropagation}>
-                      {canUpdate && (
-                        <IconButton
-                          onClick={() => handleClickEdit(provider)}
-                          noBorder
-                          icon={<Pencil />}
-                          label="Edit"
-                        />
-                      )}
-                    </Td>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </ContentLayout>
-        )}
-      </Main>
-      <FormModal
-        initialData={modifiedData[providerToEditName]}
-        isOpen={isOpen}
-        isSubmiting={isSubmiting}
-        layout={layoutToRender}
-        headerBreadcrumbs={[
-          formatMessage({
-            id: getTrad('PopUpForm.header.edit.providers'),
-            defaultMessage: 'Edit Provider',
-          }),
-          upperFirst(providerToEditName),
-        ]}
-        onToggle={handleToggleModal}
-        onSubmit={handleSubmit}
-        providerToEditName={providerToEditName}
-      />
-    </Layout>
-  );
-};
-
-const ProtectedProvidersPage = () => (
-  <CheckPagePermissions permissions={PERMISSIONS.readProviders}>
-    <ProvidersPage />
-  </CheckPagePermissions>
-);
-
-export default ProtectedProvidersPage;

package/admin/src/pages/Providers/reducer.js

@@ -1,54 +0,0 @@
-import produce from 'immer';
-import set from 'lodash/set';
-
-const initialState = {
-  formErrors: {},
-  isLoading: true,
-  initialData: {},
-  modifiedData: {},
-};
-
-const reducer = (state, action) =>
-  // eslint-disable-next-line consistent-return
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case 'GET_DATA': {
-        draftState.isLoading = true;
-        draftState.initialData = {};
-        draftState.modifiedData = {};
-
-        break;
-      }
-
-      case 'GET_DATA_SUCCEEDED': {
-        draftState.isLoading = false;
-        draftState.initialData = action.data;
-        draftState.modifiedData = action.data;
-
-        break;
-      }
-      case 'GET_DATA_ERROR': {
-        draftState.isLoading = true;
-        break;
-      }
-      case 'ON_CHANGE': {
-        set(draftState, ['modifiedData', ...action.keys.split('.')], action.value);
-        break;
-      }
-      case 'RESET_FORM': {
-        draftState.modifiedData = state.initialData;
-        draftState.formErrors = {};
-        break;
-      }
-      case 'SET_ERRORS': {
-        draftState.formErrors = action.errors;
-        break;
-      }
-      default: {
-        return draftState;
-      }
-    }
-  });
-
-export default reducer;
-export { initialState };

package/admin/src/pages/Providers/utils/api.js

@@ -1,24 +0,0 @@
-import { getFetchClient } from '@strapi/helper-plugin';
-
-// eslint-disable-next-line import/prefer-default-export
-export const fetchData = async (toggleNotification) => {
-  try {
-    const { get } = getFetchClient();
-    const { data } = await get('/users-permissions/providers');
-
-    return data;
-  } catch (err) {
-    toggleNotification({
-      type: 'warning',
-      message: { id: 'notification.error' },
-    });
-
-    throw new Error('error');
-  }
-};
-
-export const putProvider = (body) => {
-  const { put } = getFetchClient();
-
-  return put('/users-permissions/providers', body);
-};