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

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

@@ -9,33 +9,22 @@
 // Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-settings-api.md
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
 
-import React, { memo, useMemo, useState } from 'react';
-import {
-  BackHeader,
-  LeftMenuList,
-  LoadingIndicatorPage,
-  useStrapiApp,
-} from '@strapi/helper-plugin';
-import { Switch, Redirect, Route, useParams, useHistory } from 'react-router-dom';
+import React, { memo, useMemo } from 'react';
+import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
+import { Switch, Redirect, Route, useParams } from 'react-router-dom';
+import { Layout } from '@strapi/parts/Layout';
 import { useIntl } from 'react-intl';
-import HeaderSearch from '../../components/HeaderSearch';
-import PageTitle from '../../components/PageTitle';
-import SettingsSearchHeaderProvider from '../../components/SettingsHeaderSearchContextProvider';
+import { Helmet } from 'react-helmet';
 import { useSettingsMenu } from '../../hooks';
 import { createRoute, makeUniqueRoutes } from '../../utils';
-import ApplicationInfosPage from '../ApplicationInfosPage';
-import { ApplicationDetailLink, MenuWrapper, StyledLeftMenu, Wrapper } from './components';
-
-import { createSectionsRoutes, getSectionsToDisplay, routes } from './utils';
+import ApplicationInfosPage from './pages/ApplicationInfosPage';
+import { createSectionsRoutes, routes } from './utils';
+import SettingsNav from './components/SettingsNav';
 
 function SettingsPage() {
   const { settingId } = useParams();
-  const { goBack } = useHistory();
   const { settings } = useStrapiApp();
   const { formatMessage } = useIntl();
-  // TODO
-  const [headerSearchState, setShowHeaderSearchState] = useState({ show: false, label: '' });
-
   const { isLoading, menu } = useSettingsMenu();
 
   // Creates the admin routes
@@ -47,36 +36,6 @@ function SettingsPage() {
 
   const pluginsRoutes = createSectionsRoutes(settings);
 
-  // Only display accessible sections
-  const filteredMenu = useMemo(() => getSectionsToDisplay(menu), [menu]);
-
-  // Adapter until we refactor the helper-plugin/leftMenu
-  const menuAdapter = filteredMenu.map(section => {
-    return {
-      ...section,
-      title: section.intlLabel,
-      links: section.links.map(link => {
-        return {
-          ...link,
-          title: link.intlLabel,
-          name: link.id,
-        };
-      }),
-    };
-  });
-
-  const toggleHeaderSearch = label =>
-    setShowHeaderSearchState(prev => {
-      if (prev.show) {
-        return {
-          show: false,
-          label: '',
-        };
-      }
-
-      return { label, show: true };
-    });
-
   // Since the useSettingsMenu hook can make API calls in order to check the links permissions
   // We need to add a loading state to prevent redirecting the user while permissions are being checked
   if (isLoading) {
@@ -87,37 +46,21 @@ function SettingsPage() {
     return <Redirect to="/settings/application-infos" />;
   }
 
-  const settingTitle = formatMessage({ id: 'app.components.LeftMenuLinkContainer.settings' });
+  const settingTitle = formatMessage({
+    id: 'app.components.LeftMenuLinkContainer.settings',
+    defaultMessage: 'Settings',
+  });
 
   return (
-    <SettingsSearchHeaderProvider value={{ toggleHeaderSearch }}>
-      <PageTitle title={settingTitle} />
-      <Wrapper>
-        <BackHeader onClick={goBack} />
-
-        <div className="row">
-          <div className="col-md-3">
-            <MenuWrapper>
-              <ApplicationDetailLink />
-              <StyledLeftMenu>
-                {menuAdapter.map(item => {
-                  return <LeftMenuList {...item} key={item.id} />;
-                })}
-              </StyledLeftMenu>
-            </MenuWrapper>
-          </div>
-
-          <div className="col-md-9">
-            <Switch>
-              <Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
-              {adminRoutes}
-              {pluginsRoutes}
-            </Switch>
-          </div>
-        </div>
-        {headerSearchState.show && <HeaderSearch label={headerSearchState.label} />}
-      </Wrapper>
-    </SettingsSearchHeaderProvider>
+    <Layout sideNav={<SettingsNav menu={menu} />}>
+      <Helmet title={settingTitle} />
+
+      <Switch>
+        <Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
+        {adminRoutes}
+        {pluginsRoutes}
+      </Switch>
+    </Layout>
   );
 }
 

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { useAppInfos, SettingsPageTitle, useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { HeaderLayout, Layout, ContentLayout } from '@strapi/parts/Layout';
+import { Main } from '@strapi/parts/Main';
+import { Box } from '@strapi/parts/Box';
+import { Grid, GridItem } from '@strapi/parts/Grid';
+import { H3, Text, TableLabel } from '@strapi/parts/Text';
+
+import { Stack } from '@strapi/parts/Stack';
+import { Link } from '@strapi/parts/Link';
+import ExternalLink from '@strapi/icons/ExternalLink';
+
+const ApplicationInfosPage = () => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
+  const appInfos = useAppInfos();
+  const { shouldUpdateStrapi, latestStrapiReleaseTag } = appInfos;
+
+  const currentPlan = appInfos.communityEdition
+    ? 'app.components.UpgradePlanModal.text-ce'
+    : 'app.components.UpgradePlanModal.text-ee';
+
+  return (
+    <Layout>
+      <SettingsPageTitle name="Application" />
+      <Main>
+        <HeaderLayout
+          title={formatMessage({ id: 'Settings.application.title', defaultMessage: 'Application' })}
+          subtitle={formatMessage({
+            id: 'Settings.application.description',
+            defaultMessage: "See your project's details",
+          })}
+        />
+        <ContentLayout>
+          <Box
+            hasRadius
+            background="neutral0"
+            shadow="tableShadow"
+            paddingTop={7}
+            paddingBottom={7}
+            paddingRight={6}
+            paddingLeft={6}
+          >
+            <Stack size={5}>
+              <H3>
+                {formatMessage({
+                  id: 'Settings.application.information',
+                  defaultMessage: 'Information',
+                })}
+              </H3>
+
+              <Grid paddingTop={1}>
+                <GridItem col={6} s={12}>
+                  <TableLabel>
+                    {formatMessage({
+                      id: 'Settings.application.details',
+                      defaultMessage: 'details',
+                    })}
+                  </TableLabel>
+                  <Text as="p">{appInfos.latestStrapiReleaseTag}</Text>
+                </GridItem>
+                <GridItem col={6} s={12}>
+                  <TableLabel>
+                    {formatMessage({
+                      id: 'Settings.application.edition-title',
+                      defaultMessage: 'current plan',
+                    })}
+                  </TableLabel>
+                  <Text as="p">
+                    {formatMessage({
+                      id: currentPlan,
+                      defaultMessage: `${
+                        appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
+                      }`,
+                    })}
+                  </Text>
+                </GridItem>
+              </Grid>
+
+              <Grid paddingTop={1}>
+                <GridItem col={6} s={12}>
+                  {shouldUpdateStrapi && (
+                    <Link
+                      href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                      endIcon={<ExternalLink />}
+                    >
+                      {formatMessage({
+                        id: 'Settings.application.link-upgrade',
+                        defaultMessage: 'Upgrade your admin panel',
+                      })}
+                    </Link>
+                  )}
+                </GridItem>
+                <GridItem col={6} s={12}>
+                  <Link href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
+                    {formatMessage({
+                      id: 'Settings.application.link-pricing',
+                      defaultMessage: 'See all pricing',
+                    })}
+                  </Link>
+                </GridItem>
+              </Grid>
+
+              <Box paddingTop={1}>
+                <TableLabel>
+                  {formatMessage({
+                    id: 'Settings.application.node-version',
+                    defaultMessage: 'node version',
+                  })}
+                </TableLabel>
+                <Text as="p">{appInfos.nodeVersion}</Text>
+              </Box>
+            </Stack>
+          </Box>
+        </ContentLayout>
+      </Main>
+    </Layout>
+  );
+};
+
+export default ApplicationInfosPage;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/CollapseLabel/index.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Row } from '@strapi/parts/Row';
+
+const CollapseLabel = styled(Row)`
+  padding-right: ${({ theme }) => theme.spaces[2]};
+  overflow: hidden;
+  flex: 1;
+  ${({ isCollapsable }) => isCollapsable && 'cursor: pointer;'}
+`;
+
+export default CollapseLabel;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsButton/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Settings from '@strapi/icons/Settings';
+import { Button } from '@strapi/parts/Button';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+
+  ${({ hasConditions, disabled, theme }) =>
+    hasConditions &&
+    `
+    &:before {
+      content: '';
+      position: absolute;
+      top: -3px;
+      left: -10px;
+      width: 6px;
+      height: 6px;
+      border-radius: ${20 / 16}rem;;
+      background: ${disabled ? theme.colors.neutral100 : theme.colors.primary600};
+    }
+  `}
+`;
+
+const ConditionsButton = ({ onClick, className, hasConditions, variant }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Wrapper hasConditions={hasConditions} className={className}>
+      <Button variant={variant} startIcon={<Settings />} onClick={onClick}>
+        {formatMessage({
+          id: 'app.components.LeftMenuLinkContainer.settings',
+          defaultMessage: 'Settings',
+        })}
+      </Button>
+    </Wrapper>
+  );
+};
+
+ConditionsButton.defaultProps = {
+  className: null,
+  hasConditions: false,
+  variant: 'tertiary',
+};
+ConditionsButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  hasConditions: PropTypes.bool,
+  variant: PropTypes.string,
+};
+
+// This is a styled component advanced usage :
+// Used to make a ref to a non styled component.
+// https://styled-components.com/docs/advanced#caveat
+export default styled(ConditionsButton)``;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { TableLabel } from '@strapi/parts/Text';
+import { MultiSelectNested } from '@strapi/parts/Select';
+import upperFirst from 'lodash/upperFirst';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { rowHeight } from '../../Permissions/utils/constants';
+
+const RowWrapper = styled(Row)`
+  height: ${rowHeight};
+`;
+
+const ActionRow = ({
+  arrayOfOptionsGroupedByCategory,
+  isFormDisabled,
+  isGrey,
+  label,
+  name,
+  onChange,
+  value,
+}) => {
+  const { formatMessage } = useIntl();
+  const options = arrayOfOptionsGroupedByCategory.reduce((arr, curr) => {
+    const [label, children] = curr;
+    const obj = {
+      label: upperFirst(label),
+      children: children.map(child => ({
+        label: child.displayName,
+        value: child.id,
+      })),
+    };
+
+    return [...arr, obj];
+  }, []);
+
+  // Output: ['value1', 'value2']
+  const values = Object.values(value)
+    .map(x =>
+      Object.entries(x)
+        .filter(([, value]) => value)
+        .map(([key]) => key)
+    )
+    .flat();
+
+  // ! Only expects arrayOfOpt to be [['default', obj]] - might break in future changes
+  const handleChange = val => {
+    const [[, values]] = arrayOfOptionsGroupedByCategory;
+    const formattedValues = values.reduce(
+      (acc, curr) => ({ [curr.id]: val.includes(curr.id), ...acc }),
+      {}
+    );
+    onChange(name, formattedValues);
+  };
+
+  return (
+    <RowWrapper as="li" background={isGrey ? 'neutral100' : 'neutral0'}>
+      <Row paddingLeft={6} style={{ width: 180 }}>
+        <TableLabel textColor="neutral600">
+          {formatMessage({
+            id: 'Settings.permissions.conditions.can',
+            defaultMessage: 'Can',
+          })}
+          &nbsp;
+        </TableLabel>
+        <TableLabel
+          title={label}
+          textColor="primary600"
+          // ! REMOVE THIS WHEN DS IS UPDATED WITH ELLIPSIS PROP
+          style={{
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {formatMessage({
+            id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
+            defaultMessage: label,
+          })}
+        </TableLabel>
+        <TableLabel textColor="neutral600">
+          &nbsp;
+          {formatMessage({
+            id: 'Settings.permissions.conditions.when',
+            defaultMessage: 'When',
+          })}
+        </TableLabel>
+      </Row>
+      <Box style={{ maxWidth: 430, width: '100%' }}>
+        <MultiSelectNested
+          id={name}
+          customizeContent={values => `${values.length} currently selected`}
+          onChange={handleChange}
+          value={values}
+          options={options}
+          disabled={isFormDisabled}
+        />
+      </Box>
+    </RowWrapper>
+  );
+};
+
+ActionRow.propTypes = {
+  arrayOfOptionsGroupedByCategory: PropTypes.array.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  isGrey: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+export default ActionRow;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/UpperFirst.js

@@ -0,0 +1,6 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import upperFirst from 'lodash/upperFirst';
+
+const UpperFirst = ({ content }) => upperFirst(content);
+
+export default UpperFirst;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/index.js

@@ -0,0 +1,140 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { components } from 'react-select';
+import { get } from 'lodash';
+import { Checkbox, Flex } from '@buffetjs/core';
+import { Label } from '@buffetjs/styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/constants';
+import { getCheckboxState } from '../../../utils';
+import createCollapsesObject from './utils/createCollapsesObject';
+import SubUl from './SubUl';
+import Ul from './Ul';
+import UpperFirst from './UpperFirst';
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+const MenuList = ({ selectProps, ...rest }) => {
+  const Component = components.MenuList;
+  const { arrayOfOptionsGroupedByCategory } = selectProps;
+
+  const initCollapses = useMemo(() => createCollapsesObject(arrayOfOptionsGroupedByCategory), [
+    arrayOfOptionsGroupedByCategory,
+  ]);
+  const [collapses, setCollapses] = useState(initCollapses);
+
+  const toggleCollapse = collapseName => {
+    setCollapses(prevState => ({ ...prevState, [collapseName]: !collapses[collapseName] }));
+  };
+
+  return (
+    <Component {...rest}>
+      <Ul disabled={IS_DISABLED}>
+        {arrayOfOptionsGroupedByCategory.map((category, index) => {
+          const [categoryName, conditions] = category;
+          const checkboxName = `${selectProps.name}..${categoryName}`;
+
+          const {
+            hasAllActionsSelected: hasAllConditionsSelected,
+            hasSomeActionsSelected: hasSomeConditionsSelected,
+          } = getCheckboxState(selectProps.value);
+
+          return (
+            <li key={categoryName}>
+              <div>
+                <Flex justifyContent="space-between">
+                  <Label
+                    htmlFor="overrideReactSelectBehavior"
+                    onClick={() => {
+                      if (!IS_DISABLED) {
+                        selectProps.onCategoryChange({
+                          keys: [selectProps.name, categoryName],
+                          value: !hasAllConditionsSelected,
+                        });
+                      }
+                    }}
+                  >
+                    <Flex>
+                      <Checkbox
+                        disabled={IS_DISABLED}
+                        id="checkCategory"
+                        name={checkboxName}
+                        onChange={() => {}}
+                        someChecked={hasSomeConditionsSelected}
+                        value={hasAllConditionsSelected}
+                      />
+                      <UpperFirst content={categoryName} />
+                    </Flex>
+                  </Label>
+                  <div
+                    style={{ flex: 1, textAlign: 'end', cursor: 'pointer' }}
+                    onClick={() => toggleCollapse(categoryName)}
+                  >
+                    <FontAwesomeIcon
+                      style={{
+                        margin: 'auto',
+                        fontSize: '11px',
+                        color: '#919bae',
+                      }}
+                      icon={collapses[categoryName] ? 'chevron-up' : 'chevron-down'}
+                    />
+                  </div>
+                </Flex>
+              </div>
+              <SubUl tag="ul" isOpen={collapses[categoryName]}>
+                {conditions.map(condition => {
+                  const checkboxValue = get(selectProps.value, [categoryName, condition.id], false);
+
+                  return (
+                    <li key={condition.id}>
+                      <Flex>
+                        <Label
+                          htmlFor={condition.id}
+                          message={condition.displayName}
+                          onClick={() => {
+                            if (!IS_DISABLED) {
+                              selectProps.onChange({
+                                keys: [selectProps.name, categoryName, condition.id],
+                                value: !checkboxValue,
+                              });
+                            }
+                          }}
+                        >
+                          <Flex>
+                            <Checkbox
+                              id="check"
+                              name={condition.id}
+                              // Remove the handler
+                              onChange={() => {}}
+                              value={checkboxValue}
+                            />
+                            {condition.displayName}
+                          </Flex>
+                        </Label>
+                      </Flex>
+                    </li>
+                  );
+                })}
+              </SubUl>
+              {index + 1 < arrayOfOptionsGroupedByCategory.length.length && (
+                <div style={{ paddingTop: '17px' }} />
+              )}
+            </li>
+          );
+        })}
+      </Ul>
+    </Component>
+  );
+};
+
+MenuList.propTypes = {
+  selectProps: PropTypes.shape({
+    arrayOfOptionsGroupedByCategory: PropTypes.array.isRequired,
+    name: PropTypes.string.isRequired,
+    onCategoryChange: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.object.isRequired,
+  }).isRequired,
+};
+export default MenuList;