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

package/admin/src/components/Onboarding/Wrapper.js

@@ -1,131 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-const fadeIn = keyframes`
-0% {
-  width: auto;
-  height: auto;
-  opacity: 0;
-}
-
-5% {
-  opacity: 0;
-}
-
-100% {
-  opacity: 1;
-}
-`;
-const fadeOut = keyframes`
-0% {
-  opacity: 1;
-}
-
-60% {
-  opacity: 0;
-}
-
-100% {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-`;
-
-const Wrapper = styled.div`
-  max-width: ${({ isOpen }) => (isOpen ? 'initial' : '0px')};
-  position: fixed;
-  right: 15px;
-  bottom: 15px;
-  button,
-  button:focus,
-  a {
-    cursor: pointer;
-    outline: 0;
-  }
-  p {
-    margin-bottom: 0;
-  }
-  .videosHeader {
-    padding: 25px 15px 18px 15px;
-    p {
-      display: inline-block;
-      vertical-align: top;
-      width: 50%;
-      font-family: Lato;
-      font-weight: bold;
-      font-size: 11px;
-      color: #5c5f66;
-      letter-spacing: 0.5px;
-      text-transform: uppercase;
-      &:last-of-type {
-        color: #5a9e06;
-        text-align: right;
-      }
-    }
-  }
-  &.visible {
-    opacity: 1;
-    z-index: 10;
-  }
-  &.hidden {
-    opacity: 0;
-  }
-  .videosContent {
-    min-width: 320px;
-    margin-bottom: 10px;
-    margin-right: 15px;
-    background-color: white;
-    box-shadow: 0 2px 4px 0 #e3e9f3;
-    border-radius: 3px;
-    overflow: hidden;
-    &.shown {
-      animation: ${fadeIn} 0.5s forwards;
-    }
-    &.hide {
-      min-width: 0;
-      animation: ${fadeOut} 0.5s forwards;
-    }
-    ul {
-      padding: 0 0 8px 0;
-      margin-bottom: 0;
-      list-style: none;
-      &:last-of-type {
-        padding: 8px 0 10px 0;
-        border-top: 1px solid #f6f6f6;
-      }
-    }
-  }
-  .openBtn {
-    float: right;
-    width: 38px;
-    height: 38px;
-    button {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      color: white;
-      background: #0e7de7;
-      box-shadow: 0px 2px 4px 0px rgba(227, 233, 243, 1);
-      i,
-      svg {
-        margin: auto;
-      }
-      i:last-of-type,
-      svg:last-of-type {
-        display: none;
-      }
-      &.active {
-        i:first-of-type,
-        svg:first-of-type {
-          display: none;
-        }
-        i:last-of-type,
-        svg:last-of-type {
-          display: block;
-        }
-      }
-    }
-  }
-`;
-
-export default Wrapper;

package/admin/src/components/Onboarding/index.js

@@ -1,42 +0,0 @@
-import React, { useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons';
-import cn from 'classnames';
-import { useConfigurations } from '../../hooks';
-import StaticLinks from './StaticLinks';
-import Wrapper from './Wrapper';
-
-const Onboarding = () => {
-  const { showTutorials } = useConfigurations();
-
-  if (!showTutorials) {
-    return null;
-  }
-
-  return <OnboardingVideos />;
-};
-
-const OnboardingVideos = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleClick = () => {
-    setIsOpen(prev => !prev);
-  };
-
-  return (
-    <Wrapper className="visible" isOpen={isOpen}>
-      <div className={cn('videosContent', isOpen ? 'shown' : 'hide')}>
-        <StaticLinks />
-      </div>
-      <div className="openBtn">
-        <button onClick={handleClick} className={isOpen ? 'active' : ''} type="button">
-          <FontAwesomeIcon icon={faQuestion} />
-          <FontAwesomeIcon icon={faTimes} />
-          <span />
-        </button>
-      </div>
-    </Wrapper>
-  );
-};
-
-export default Onboarding;

package/admin/src/components/PageTitle/index.js

@@ -1,13 +0,0 @@
-import React, { memo } from 'react';
-import { Helmet } from 'react-helmet';
-import PropTypes from 'prop-types';
-
-const PageTitle = ({ title }) => {
-  return <Helmet title={title} />;
-};
-
-PageTitle.propTypes = {
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
-};
-
-export default memo(PageTitle);

package/admin/src/components/Roles/ButtonWithNumber/NumberCard.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const NumberCard = styled.div`
-  width: 1.9rem;
-  height: 1.4rem;
-  background-color: ${({ theme }) => theme.main.colors.white};
-  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
-`;
-
-export default NumberCard;

package/admin/src/components/Roles/ButtonWithNumber/index.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Button, Flex, Text, Padded } from '@buffetjs/core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import NumberCard from './NumberCard';
-
-const ButtonWithNumber = ({ number, onClick }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Button disabled color="primary" onClick={onClick}>
-      <Flex style={{ minWidth: '17rem' }} justifyContent="space-between" alignItems="center">
-        <FontAwesomeIcon icon="users" />
-        <Padded left size="sm" />
-        <Text color="grey" fontWeight="semiBold">
-          {formatMessage({
-            id: 'Settings.roles.form.button.users-with-role',
-            defaultMessage: 'Users with this role',
-          })}
-        </Text>
-        <Padded left size="sm" />
-        <NumberCard>
-          <Text fontSize="xs" fontWeight="bold" color="grey">
-            {number}
-          </Text>
-        </NumberCard>
-      </Flex>
-    </Button>
-  );
-};
-
-ButtonWithNumber.defaultProps = {
-  number: 0,
-};
-ButtonWithNumber.propTypes = {
-  number: PropTypes.number,
-  onClick: PropTypes.func.isRequired,
-};
-
-export default ButtonWithNumber;

package/admin/src/components/Roles/CheckboxWithCondition/index.js

@@ -1,41 +0,0 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-import { Checkbox } from '@buffetjs/core';
-
-const CheckboxWithCondition = styled(Checkbox)`
-  min-width: 10rem;
-  max-width: 12rem;
-  flex: 1;
-  position: relative;
-
-  input[type='checkbox'] {
-    z-index: 10;
-    &:after {
-      color: ${({ theme }) => theme.main.colors.mediumBlue};
-    }
-  }
-  ${({ hasConditions, disabled, theme }) =>
-    hasConditions &&
-    `
-    &:before {
-      content: '•';
-      font-size: 11px;
-      position: absolute;
-      top: -6px;
-      left: -7px;
-      color: ${disabled ? theme.main.colors.grey : theme.main.colors.mediumBlue};
-    }
-  `}
-  ${({ disabled, theme }) =>
-    disabled &&
-    `
-    input[type='checkbox'] {
-      cursor: not-allowed;
-        &:after {
-          color: ${theme.main.colors.grey};
-        }
-      }
-    `}
-`;
-
-export default CheckboxWithCondition;

package/admin/src/components/Roles/Chevron/index.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-const Chevron = styled(FontAwesomeIcon)`
-  width: 18px !important;
-  display: none;
-  padding-left: 1rem;
-  font-size: 2.1rem;
-`;
-
-export default Chevron;

package/admin/src/components/Roles/CollapseLabel/index.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-import { Flex } from '@buffetjs/core';
-
-const CollapseLabel = styled(Flex)`
-  padding-right: 10px;
-  overflow: hidden;
-  flex: 1;
-  ${({ isCollapsable }) => isCollapsable && 'cursor: pointer;'}
-`;
-
-export default CollapseLabel;

package/admin/src/components/Roles/ConditionsButton/Wrapper.js

@@ -1,28 +0,0 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  position: relative;
-  cursor: pointer;
-  color: ${({ theme }) => theme.main.colors.mediumBlue};
-  ${({ isRight }) =>
-    isRight &&
-    `
-    position: absolute;
-    right: 5rem;
-  `}
-  ${({ hasConditions, disabled, theme }) =>
-    hasConditions &&
-    `
-    &:before {
-      content: '•';
-      position: absolute;
-      top: -4px;
-      left: -15px;
-      font-size: 18px;
-      color: ${disabled ? theme.main.colors.grey : theme.main.colors.mediumBlue};
-    }
-  `}
-`;
-
-export default Wrapper;

package/admin/src/components/Roles/ConditionsButton/index.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Flex, Text, Padded } from '@buffetjs/core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import Wrapper from './Wrapper';
-
-const ConditionsButton = ({ onClick, className, hasConditions, isRight }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Wrapper
-      isRight={isRight}
-      hasConditions={hasConditions}
-      className={className}
-      onClick={onClick}
-    >
-      <Padded right size="smd">
-        <Flex alignItems="center">
-          <Text color="mediumBlue">
-            {formatMessage({ id: 'app.components.LeftMenuLinkContainer.settings' })}
-          </Text>
-          <Padded style={{ height: '18px', lineHeight: 'normal' }} left size="xs">
-            <FontAwesomeIcon style={{ fontSize: '11px' }} icon="cog" />
-          </Padded>
-        </Flex>
-      </Padded>
-    </Wrapper>
-  );
-};
-
-ConditionsButton.defaultProps = {
-  className: null,
-  hasConditions: false,
-  isRight: false,
-};
-ConditionsButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  hasConditions: PropTypes.bool,
-  isRight: PropTypes.bool,
-};
-
-// 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/components/Roles/ConditionsModal/ActionRow/Wrapper.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  display: flex;
-  height: 36px;
-  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
-  margin-bottom: 18px;
-  background-color: ${({ theme, isGrey }) =>
-    isGrey ? theme.main.colors.content.background : theme.main.colors.white};
-`;
-
-export default Wrapper;

package/admin/src/components/Roles/ConditionsModal/ActionRow/index.js

@@ -1,88 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Text, Padded, Flex } from '@buffetjs/core';
-import { useIntl } from 'react-intl';
-
-import ConditionsSelect from '../ConditionsSelect';
-import Wrapper from './Wrapper';
-
-const ActionRow = ({
-  arrayOfOptionsGroupedByCategory,
-  isFormDisabled,
-  isGrey,
-  label,
-  name,
-  onCategoryChange,
-  onChange,
-  value,
-}) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Wrapper isGrey={isGrey}>
-      <Padded style={{ width: 200 }} top left right bottom size="sm">
-        <Flex>
-          <Text
-            lineHeight="19px"
-            color="grey"
-            fontSize="xs"
-            fontWeight="bold"
-            textTransform="uppercase"
-          >
-            {formatMessage({
-              id: 'Settings.permissions.conditions.can',
-            })}
-            &nbsp;
-          </Text>
-          <Text
-            title={label}
-            lineHeight="19px"
-            fontWeight="bold"
-            fontSize="xs"
-            textTransform="uppercase"
-            color="mediumBlue"
-            style={{ maxWidth: '60%' }}
-            ellipsis
-          >
-            {formatMessage({
-              id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
-              defaultMessage: label,
-            })}
-          </Text>
-          <Text
-            lineHeight="19px"
-            color="grey"
-            fontSize="xs"
-            fontWeight="bold"
-            textTransform="uppercase"
-          >
-            &nbsp;
-            {formatMessage({
-              id: 'Settings.permissions.conditions.when',
-            })}
-          </Text>
-        </Flex>
-      </Padded>
-      <ConditionsSelect
-        arrayOfOptionsGroupedByCategory={arrayOfOptionsGroupedByCategory}
-        name={name}
-        isFormDisabled={isFormDisabled}
-        onCategoryChange={onCategoryChange}
-        onChange={onChange}
-        value={value}
-      />
-    </Wrapper>
-  );
-};
-
-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,
-  onCategoryChange: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-export default ActionRow;

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

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

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

@@ -1,140 +0,0 @@
-/* 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/components/Roles/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;

package/admin/src/components/Roles/ConditionsModal/Separator.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const Separator = styled.div`
-  padding-top: 1.4rem;
-  margin-bottom: 2.8rem;
-  border-bottom: 1px solid ${({ theme }) => theme.main.colors.brightGrey};
-`;
-
-export default Separator;