@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

package/admin/src/pages/Roles/ListPage/index.js

@@ -1,149 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { List, Header } from '@buffetjs/custom';
-import { Button } from '@buffetjs/core';
-import { Duplicate, Pencil, Plus } from '@buffetjs/icons';
-import matchSorter from 'match-sorter';
-import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ListButton, useTracking, useQuery, useRBAC } from '@strapi/helper-plugin';
-import adminPermissions from '../../../permissions';
-import PageTitle from '../../../components/SettingsPageTitle';
-import { EmptyRole, RoleListWrapper, RoleRow } from '../../../components/Roles';
-import { useRolesList, useSettingsHeaderSearchContext } from '../../../hooks';
-import UpgradePlanModal from '../../../components/UpgradePlanModal';
-import BaselineAlignment from './BaselineAlignment';
-
-const RoleListPage = () => {
-  const { formatMessage } = useIntl();
-  const { push } = useHistory();
-  const [isOpen, setIsOpen] = useState(false);
-  const { trackUsage } = useTracking();
-  const { roles, isLoading } = useRolesList();
-  const { toggleHeaderSearch } = useSettingsHeaderSearchContext();
-  const {
-    allowedActions: { canUpdate },
-  } = useRBAC(adminPermissions.settings.roles);
-  const query = useQuery();
-  const _q = decodeURIComponent(query.get('_q') || '');
-  const results = matchSorter(roles, _q, { keys: ['name', 'description'] });
-
-  useEffect(() => {
-    toggleHeaderSearch({ id: 'Settings.permissions.menu.link.roles.label' });
-
-    return () => {
-      toggleHeaderSearch();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleGoTo = useCallback(
-    id => {
-      push(`/settings/roles/${id}`);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  const handleToggle = useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsOpen(prev => !prev);
-  }, []);
-
-  const handleToggleModalForCreatingRole = useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    trackUsage('didShowRBACUpgradeModal');
-
-    setIsOpen(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const headerActions = [
-    {
-      label: formatMessage({
-        id: 'Settings.roles.list.button.add',
-        defaultMessage: 'Add new role',
-      }),
-      onClick: handleToggleModalForCreatingRole,
-      color: 'primary',
-      type: 'button',
-      icon: true,
-    },
-  ];
-
-  const resultsCount = results.length;
-
-  return (
-    <>
-      <PageTitle name="Roles" />
-      <Header
-        icon
-        title={{
-          label: formatMessage({
-            id: 'Settings.roles.title',
-            defaultMessage: 'roles',
-          }),
-        }}
-        content={formatMessage({
-          id: 'Settings.roles.list.description',
-          defaultMessage: 'List of roles',
-        })}
-        // Show a loader in the header while requesting data
-        isLoading={isLoading}
-        actions={headerActions}
-      />
-      <BaselineAlignment />
-      <RoleListWrapper>
-        <List
-          title={formatMessage(
-            {
-              id: `Settings.roles.list.title${results.length > 1 ? '.plural' : '.singular'}`,
-            },
-            { number: resultsCount }
-          )}
-          items={results}
-          isLoading={isLoading}
-          customRowComponent={role => (
-            <RoleRow
-              onClick={() => handleGoTo(role.id)}
-              canUpdate={canUpdate}
-              links={[
-                {
-                  icon: <Duplicate fill="#0e1622" />,
-                  onClick: handleToggle,
-                },
-                {
-                  icon: canUpdate ? <Pencil fill="#0e1622" /> : null,
-                  onClick: () => {
-                    handleGoTo(role.id);
-                  },
-                },
-                {
-                  icon: <FontAwesomeIcon icon="trash-alt" />,
-                  onClick: handleToggle,
-                },
-              ]}
-              role={role}
-            />
-          )}
-        />
-        {!resultsCount && !isLoading && <EmptyRole />}
-        <ListButton>
-          <Button
-            onClick={handleToggleModalForCreatingRole}
-            icon={<Plus fill="#007eff" width="11px" height="11px" />}
-            label={formatMessage({
-              id: 'Settings.roles.list.button.add',
-              defaultMessage: 'Add new role',
-            })}
-          />
-        </ListButton>
-      </RoleListWrapper>
-      <UpgradePlanModal isOpen={isOpen} onToggle={handleToggle} />
-    </>
-  );
-};
-
-export default RoleListPage;

package/admin/src/pages/Roles/ProtectedEditPage/index.js

@@ -1,31 +0,0 @@
-import React, { useMemo } from 'react';
-import { useRBAC, LoadingIndicatorPage } from '@strapi/helper-plugin';
-import { Redirect } from 'react-router-dom';
-import adminPermissions from '../../../permissions';
-import EditPage from '../EditPage';
-
-const ProtectedEditPage = () => {
-  const permissions = useMemo(() => {
-    return {
-      read: adminPermissions.settings.roles.read,
-      update: adminPermissions.settings.roles.update,
-    };
-  }, []);
-
-  const {
-    isLoading,
-    allowedActions: { canRead, canUpdate },
-  } = useRBAC(permissions);
-
-  if (isLoading) {
-    return <LoadingIndicatorPage />;
-  }
-
-  if (!canRead && !canUpdate) {
-    return <Redirect to="/" />;
-  }
-
-  return <EditPage />;
-};
-
-export default ProtectedEditPage;

package/admin/src/pages/Roles/ProtectedListPage/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { CheckPagePermissions } from '@strapi/helper-plugin';
-import adminPermissions from '../../../permissions';
-import ListPage from '../ListPage';
-
-const ProtectedListPage = () => (
-  <CheckPagePermissions permissions={adminPermissions.settings.roles.main}>
-    <ListPage />
-  </CheckPagePermissions>
-);
-
-export default ProtectedListPage;

package/admin/src/pages/SettingsPage/components/ApplicationDetailLink/Icon.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-const LeftMenuIcon = styled(({ ...props }) => <FontAwesomeIcon {...props} icon="circle" />)`
-  position: absolute;
-  top: calc(50% - 0.25rem);
-  left: 1.5rem;
-  font-size: 0.5rem;
-  color: ${props => props.theme.main.colors.leftMenu['link-color']};
-`;
-
-export default LeftMenuIcon;

package/admin/src/pages/SettingsPage/components/ApplicationDetailLink/Link.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-import { NavLink } from 'react-router-dom';
-
-const Link = styled(NavLink)`
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-  padding-left: 30px;
-  height: 34px;
-  border-radius: 2px;
-  &.active {
-    background-color: #e9eaeb;
-    > p {
-      font-weight: 600;
-    }
-    > svg {
-      color: #2d3138;
-    }
-  }
-  &:hover {
-    text-decoration: none;
-  }
-`;
-
-export default Link;

package/admin/src/pages/SettingsPage/components/ApplicationDetailLink/Notif.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-const Notif = styled.div`
-  margin: auto;
-  margin-right: 15px;
-
-  &:before {
-    content: '';
-    display: flex;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: #007dff;
-  }
-`;
-
-export default Notif;

package/admin/src/pages/SettingsPage/components/ApplicationDetailLink/Wrapper.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  position: relative;
-  margin-bottom: -5px;
-  padding: 25px 20px 0 20px;
-`;
-
-export default Wrapper;

package/admin/src/pages/SettingsPage/components/ApplicationDetailLink/index.js

@@ -1,26 +0,0 @@
-import React, { memo } from 'react';
-import { Text } from '@buffetjs/core';
-import { FormattedMessage } from 'react-intl';
-import { useAppInfos } from '@strapi/helper-plugin';
-import Icon from './Icon';
-import Link from './Link';
-import Notif from './Notif';
-import Wrapper from './Wrapper';
-
-const ApplicationDetailLink = () => {
-  const { shouldUpdateStrapi } = useAppInfos();
-
-  return (
-    <Wrapper>
-      <Link to="/settings/application-infos">
-        <Icon />
-        <Text lineHeight="34px">
-          <FormattedMessage id="Settings.application.title" />
-        </Text>
-        {shouldUpdateStrapi && <Notif />}
-      </Link>
-    </Wrapper>
-  );
-};
-
-export default memo(ApplicationDetailLink);

package/admin/src/pages/SettingsPage/components/MenuWrapper/index.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const MenuWrapper = styled.div`
-  background-color: ${props => props.theme.main.colors.mediumGrey};
-  min-height: 100%;
-  height: calc(100vh - ${({ theme }) => theme.main.sizes.header.height});
-`;
-
-export default MenuWrapper;

package/admin/src/pages/SettingsPage/components/StyledLeftMenu/index.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-import { LeftMenu } from '@strapi/helper-plugin';
-
-// Min height and height need to be unset to avoid the double overflow on the settings page.
-const StyledLeftMenu = styled(LeftMenu)`
-  > div {
-    margin-bottom: 27px;
-  }
-  min-height: unset;
-  height: unset;
-`;
-
-export default StyledLeftMenu;

package/admin/src/pages/SettingsPage/components/Wrapper/index.js

@@ -1,19 +0,0 @@
-/**
- *
- * Wrapper
- *
- */
-
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  > .row {
-    padding-left: 0;
-    padding-right: 30px;
-    .col-md-9 {
-      padding-top: 18px;
-    }
-  }
-`;
-
-export default Wrapper;

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

@@ -1,4 +0,0 @@
-export { default as ApplicationDetailLink } from './ApplicationDetailLink';
-export { default as MenuWrapper } from './MenuWrapper';
-export { default as StyledLeftMenu } from './StyledLeftMenu';
-export { default as Wrapper } from './Wrapper';

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

@@ -1,136 +0,0 @@
-import React from 'react';
-import { useRouteMatch } from 'react-router-dom';
-import { useIntl } from 'react-intl';
-import { get, isEmpty } from 'lodash';
-import { BaselineAlignment, SizedInput, auth } from '@strapi/helper-plugin';
-import { Col } from 'reactstrap';
-import { Padded } from '@buffetjs/core';
-import PropTypes from 'prop-types';
-import PageTitle from '../../../components/SettingsPageTitle';
-import ContainerFluid from '../../../components/ContainerFluid';
-import FormBloc from '../../../components/FormBloc';
-import { Header } from '../../../components/Settings';
-import { MagicLink, SelectRoles } from '../../../components/Users';
-import { useSettingsForm } from '../../../hooks';
-import { editValidation } from '../utils/validations/users';
-import form from './utils/form';
-
-const EditPage = ({ canUpdate }) => {
-  const { formatMessage } = useIntl();
-  const {
-    params: { id },
-  } = useRouteMatch('/settings/users/:id');
-
-  const cbSuccess = data => {
-    const userInfos = auth.getUserInfo();
-
-    // The user is updating themself
-    if (data.id === userInfos.id) {
-      auth.setUserInfo(data);
-    }
-  };
-  const [
-    { formErrors, initialData, isLoading, modifiedData, showHeaderButtonLoader, showHeaderLoader },
-    // eslint-disable-next-line no-unused-vars
-    dispatch,
-    { handleCancel, handleChange, handleSubmit },
-  ] = useSettingsForm(`/admin/users/${id}`, editValidation, cbSuccess, [
-    'email',
-    'firstname',
-    'lastname',
-    'username',
-    'isActive',
-    'roles',
-    'registrationToken',
-  ]);
-  const headerLabelId = isLoading
-    ? 'app.containers.Users.EditPage.header.label-loading'
-    : 'app.containers.Users.EditPage.header.label';
-  const headerLabelName = initialData.username
-    ? initialData.username
-    : `${initialData.firstname} ${initialData.lastname}`;
-  const headerLabel = formatMessage({ id: headerLabelId }, { name: headerLabelName });
-
-  const hasRegistrationToken = modifiedData.registrationToken;
-  const hasRolesError = formErrors.roles && isEmpty(modifiedData.roles);
-
-  return (
-    <>
-      <PageTitle name="Users" />
-      <form onSubmit={handleSubmit}>
-        <ContainerFluid padding="0">
-          <Header
-            isLoading={showHeaderLoader}
-            initialData={initialData}
-            label={headerLabel}
-            modifiedData={modifiedData}
-            onCancel={handleCancel}
-            showHeaderButtonLoader={showHeaderButtonLoader}
-          />
-          {hasRegistrationToken ? (
-            <>
-              <Padded top bottom size="sm">
-                <MagicLink registrationToken={initialData.registrationToken} />
-              </Padded>
-              <BaselineAlignment top size="1px" />
-            </>
-          ) : (
-            <BaselineAlignment top size="3px" />
-          )}
-
-          <FormBloc
-            isLoading={isLoading}
-            title={formatMessage({
-              id: 'app.components.Users.ModalCreateBody.block-title.details',
-            })}
-          >
-            {Object.keys(form).map(key => {
-              return (
-                <SizedInput
-                  {...form[key]}
-                  key={key}
-                  disabled={!canUpdate}
-                  error={formErrors[key]}
-                  name={key}
-                  onChange={handleChange}
-                  value={get(modifiedData, key, '')}
-                />
-              );
-            })}
-          </FormBloc>
-
-          <BaselineAlignment top size="2px" />
-
-          <Padded top size="md">
-            {!isLoading && (
-              <FormBloc
-                title={formatMessage({ id: 'app.containers.Users.EditPage.roles-bloc-title' })}
-              >
-                <Col xs="6">
-                  <Padded top size="sm">
-                    <SelectRoles
-                      name="roles"
-                      isDisabled={!canUpdate}
-                      onChange={handleChange}
-                      error={formErrors.roles}
-                      value={get(modifiedData, 'roles', [])}
-                    />
-                    <BaselineAlignment top size={hasRolesError ? '0' : '17px'} />
-                  </Padded>
-                </Col>
-              </FormBloc>
-            )}
-          </Padded>
-        </ContainerFluid>
-        <Padded bottom size="md" />
-      </form>
-      <BaselineAlignment bottom size="80px" />
-    </>
-  );
-};
-
-EditPage.propTypes = {
-  canUpdate: PropTypes.bool.isRequired,
-};
-
-export default EditPage;

package/admin/src/pages/Users/EditPage/utils/form.js

@@ -1,52 +0,0 @@
-const form = {
-  firstname: {
-    autoFocus: true,
-    label: 'Settings.permissions.users.form.firstname',
-    placeholder: 'e.g. Kai',
-    type: 'text',
-    validations: {
-      required: true,
-    },
-  },
-  lastname: {
-    label: 'Settings.permissions.users.form.lastname',
-    placeholder: 'e.g. Doe',
-    type: 'text',
-    validations: {
-      required: true,
-    },
-  },
-  email: {
-    label: 'Settings.permissions.users.form.email',
-    placeholder: 'e.g. kai.doe@strapi.io',
-    type: 'email',
-    validations: {
-      required: true,
-    },
-  },
-  username: {
-    label: 'Auth.form.username.label',
-    placeholder: 'e.g. Kai_Doe',
-    type: 'text',
-    autoComplete: 'no',
-    validations: {},
-  },
-  password: {
-    label: 'Auth.form.password.label',
-    type: 'password',
-    autoComplete: 'new-password',
-    validations: {},
-  },
-  confirmPassword: {
-    label: 'Auth.form.confirmPassword.label',
-    type: 'password',
-    validations: {},
-  },
-  isActive: {
-    label: 'app.containers.Users.EditPage.form.active.label',
-    type: 'bool',
-    validations: {},
-  },
-};
-
-export default form;

package/admin/src/pages/Users/ListPage/Header.js

@@ -1,78 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Button } from '@buffetjs/core';
-import { Header as HeaderCompo } from '@buffetjs/custom';
-import { Envelope } from '@buffetjs/icons';
-
-const Header = ({
-  canCreate,
-  canDelete,
-  canRead,
-  count,
-  dataToDelete,
-  isLoading,
-  onClickAddUser,
-  onClickDelete,
-}) => {
-  const { formatMessage } = useIntl();
-  const tradBaseId = 'Settings.permissions.users.listview.';
-  const headerDescriptionSuffix =
-    count > 1 ? 'header.description.plural' : 'header.description.singular';
-
-  /* eslint-disable indent */
-  const headerProps = {
-    actions: isLoading
-      ? []
-      : [
-          {
-            color: 'delete',
-            disabled: !dataToDelete.length,
-            label: formatMessage({ id: 'app.utils.delete' }),
-            onClick: onClickDelete,
-            type: 'button',
-            Component: props => (canDelete ? <Button {...props} /> : null),
-          },
-
-          {
-            color: 'primary',
-            icon: <Envelope style={{ verticalAlign: 'middle' }} />,
-            label: formatMessage({ id: 'Settings.permissions.users.create' }),
-            onClick: onClickAddUser,
-            type: 'button',
-            Component: props => (canCreate ? <Button {...props} /> : null),
-          },
-        ],
-    content: canRead
-      ? formatMessage({ id: `${tradBaseId}${headerDescriptionSuffix}` }, { number: count })
-      : null,
-    title: { label: formatMessage({ id: `${tradBaseId}header.title` }) },
-  };
-  /* eslint-enable indent */
-
-  return <HeaderCompo {...headerProps} isLoading={isLoading} />;
-};
-
-Header.defaultProps = {
-  canCreate: false,
-  canDelete: false,
-  canRead: false,
-  count: 0,
-  dataToDelete: [],
-  isLoading: false,
-  onClickAddUser: () => {},
-  onClickDelete: () => {},
-};
-
-Header.propTypes = {
-  canCreate: PropTypes.bool,
-  canDelete: PropTypes.bool,
-  canRead: PropTypes.bool,
-  count: PropTypes.number,
-  dataToDelete: PropTypes.array,
-  isLoading: PropTypes.bool,
-  onClickAddUser: PropTypes.func,
-  onClickDelete: PropTypes.func,
-};
-
-export default memo(Header);