@akemona-org/strapi-admin 3.7.0

package/admin/src/components/Roles/RoleList/RoleDescription.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const RoleDescription = styled(props => <Text {...props} ellipsis />)`
+  max-width: 25rem;
+`;
+
+export default RoleDescription;

package/admin/src/components/Roles/RoleList/RoleListWrapper.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const ListWrapper = styled.div`
+  border-radius: 2px;
+  box-shadow: 0 2px 4px #e3e9f3;
+  background: white;
+
+  > div,
+  > div > div:last-of-type {
+    box-shadow: none;
+    border-radius: 2px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+`;
+
+export default ListWrapper;

package/admin/src/components/Roles/RoleList/RoleRow.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CustomRow } from '@buffetjs/styles';
+import { IconLinks, Text } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+
+import RoleDescription from './RoleDescription';
+
+const RoleRow = ({ role, onClick, links, prefix }) => {
+  const { formatMessage } = useIntl();
+  const number = role.usersCount;
+  const text = formatMessage(
+    { id: `Roles.RoleRow.user-count.${number > 1 ? 'plural' : 'singular'}` },
+    { number }
+  );
+
+  return (
+    <CustomRow onClick={onClick}>
+      {prefix && <td style={{ width: 55 }}>{prefix}</td>}
+      <td>
+        <Text fontWeight="semiBold">{role.name}</Text>
+      </td>
+      <td>
+        <RoleDescription>{role.description}</RoleDescription>
+      </td>
+      <td>
+        <Text>{text}</Text>
+      </td>
+      <td>
+        <IconLinks links={links} />
+      </td>
+    </CustomRow>
+  );
+};
+
+RoleRow.defaultProps = {
+  onClick: null,
+  prefix: null,
+};
+
+RoleRow.propTypes = {
+  links: PropTypes.array.isRequired,
+  onClick: PropTypes.func,
+  prefix: PropTypes.node,
+  role: PropTypes.object.isRequired,
+};
+
+export default RoleRow;

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

@@ -0,0 +1,3 @@
+export { default as RoleDescription } from './RoleDescription';
+export { default as RoleListWrapper } from './RoleListWrapper';
+export { default as RoleRow } from './RoleRow';

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

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: ${({ width }) => width};
+  ${({ disabled, theme }) =>
+    disabled &&
+    `
+    input[type='checkbox'] {
+    cursor: not-allowed;
+      &:after {
+        color: ${theme.main.colors.grey};
+      }
+    }
+  `}
+`;
+
+Wrapper.defaultProps = {
+  width: '18rem',
+};
+
+Wrapper.propTypes = {
+  width: PropTypes.string,
+};
+
+export default Wrapper;

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

@@ -0,0 +1,76 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox, Text } from '@buffetjs/core';
+import CollapseLabel from '../CollapseLabel';
+import Wrapper from './Wrapper';
+
+const RowLabelWithCheckbox = ({
+  children,
+  isCollapsable,
+  isFormDisabled,
+  label,
+  onChange,
+  onClick,
+  checkboxName,
+  someChecked,
+  textColor,
+  value,
+  width,
+}) => {
+  return (
+    <Wrapper width={width} disabled={isFormDisabled}>
+      <Checkbox
+        name={checkboxName}
+        disabled={isFormDisabled}
+        onChange={onChange}
+        someChecked={someChecked}
+        value={value}
+      />
+      <CollapseLabel
+        title={label}
+        alignItems="center"
+        isCollapsable={isCollapsable}
+        onClick={onClick}
+      >
+        <Text
+          color={textColor}
+          ellipsis
+          fontSize="xs"
+          fontWeight="bold"
+          lineHeight="20px"
+          textTransform="uppercase"
+        >
+          {label}
+        </Text>
+        {children}
+      </CollapseLabel>
+    </Wrapper>
+  );
+};
+
+RowLabelWithCheckbox.defaultProps = {
+  children: null,
+  checkboxName: '',
+  onChange: () => {},
+  value: false,
+  someChecked: false,
+  isCollapsable: false,
+  textColor: 'grey',
+  width: '18rem',
+};
+
+RowLabelWithCheckbox.propTypes = {
+  checkboxName: PropTypes.string,
+  children: PropTypes.node,
+  label: PropTypes.string.isRequired,
+  isCollapsable: PropTypes.bool,
+  isFormDisabled: PropTypes.bool.isRequired,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func.isRequired,
+  someChecked: PropTypes.bool,
+  textColor: PropTypes.string,
+  value: PropTypes.bool,
+  width: PropTypes.string,
+};
+
+export default memo(RowLabelWithCheckbox);

package/admin/src/components/Roles/Tabs/Tab.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+/* eslint-disable indent */
+const Tab = styled.div`
+  flex: 1;
+  padding: 1rem;
+  text-align: center;
+
+  ${({ isActive, theme }) =>
+    isActive
+      ? {
+          borderTop: `2px solid ${theme.main.colors.blue}`,
+          backgroundColor: theme.main.colors.white,
+        }
+      : {
+          borderTop: '2px solid transparent',
+          backgroundColor: '#f2f3f4',
+          cursor: 'pointer',
+        }}
+`;
+
+export default Tab;

package/admin/src/components/Roles/Tabs/TabsWrapper.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import Tab from './Tab';
+
+const TabsWrapper = styled.div`
+  display: block;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  box-shadow: ${({ theme }) => `0px 2px 4px 0px ${theme.main.colors.darkGrey}`};
+
+  ${Tab}:first-of-type {
+    border-top-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  }
+  ${Tab}:last-of-type {
+    border-top-right-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  }
+`;
+
+export default TabsWrapper;

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

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { Flex, Text, Padded } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+import { LoadingIndicator } from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+
+import TabsWrapper from './TabsWrapper';
+import Tab from './Tab';
+
+const Tabs = ({ children, isLoading, tabsLabel }) => {
+  const { formatMessage } = useIntl();
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+  const selectedChild = React.Children.toArray(children)[selectedTabIndex];
+
+  const handleSelectedTab = index => {
+    if (index !== selectedTabIndex) {
+      setSelectedTabIndex(index);
+    }
+  };
+
+  return (
+    <TabsWrapper>
+      {isLoading ? (
+        <Padded top bottom size="lg">
+          <LoadingIndicator />
+        </Padded>
+      ) : (
+        <>
+          <Flex alignItems="stretch">
+            {tabsLabel.map((tab, index) => (
+              <Tab
+                isActive={index === selectedTabIndex}
+                key={tab.id}
+                onClick={() => handleSelectedTab(index)}
+              >
+                <Text fontWeight={index === selectedTabIndex ? 'bold' : 'semiBold'}>
+                  {formatMessage({ id: tab.labelId, defaultMessage: tab.defaultMessage })}
+                </Text>
+              </Tab>
+            ))}
+          </Flex>
+          {selectedChild}
+        </>
+      )}
+    </TabsWrapper>
+  );
+};
+
+Tabs.defaultProps = {
+  isLoading: false,
+};
+
+Tabs.propTypes = {
+  children: PropTypes.node.isRequired,
+  isLoading: PropTypes.bool,
+  tabsLabel: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      defaultMessage: PropTypes.string.isRequired,
+      labelId: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+export default Tabs;

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

@@ -0,0 +1,6 @@
+export { default as ButtonWithNumber } from './ButtonWithNumber';
+export { default as EmptyRole } from './EmptyRole';
+export { default as Tabs } from './Tabs';
+export { default as Permissions } from './Permissions';
+export * from './RoleForm';
+export * from './RoleList';

package/admin/src/components/Roles/utils/createArrayOfValues.js

@@ -0,0 +1,19 @@
+import { flattenDeep, isObject } from 'lodash';
+
+const createArrayOfValues = obj => {
+  if (!isObject(obj)) {
+    return [];
+  }
+
+  return flattenDeep(
+    Object.values(obj).map(value => {
+      if (isObject(value)) {
+        return createArrayOfValues(value);
+      }
+
+      return value;
+    })
+  );
+};
+
+export default createArrayOfValues;

package/admin/src/components/Roles/utils/getCheckboxState.js

@@ -0,0 +1,19 @@
+import createArrayOfValues from './createArrayOfValues';
+import removeConditionKeyFromData from './removeConditionKeyFromData';
+
+const getCheckboxState = dataObj => {
+  const dataWithoutCondition = removeConditionKeyFromData(dataObj);
+
+  const arrayOfValues = createArrayOfValues(dataWithoutCondition);
+
+  if (!arrayOfValues.length) {
+    return { hasAllActionsSelected: false, hasSomeActionsSelected: false };
+  }
+
+  const hasAllActionsSelected = arrayOfValues.every(val => val);
+  const hasSomeActionsSelected = arrayOfValues.some(val => val) && !hasAllActionsSelected;
+
+  return { hasAllActionsSelected, hasSomeActionsSelected };
+};
+
+export default getCheckboxState;

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

@@ -0,0 +1,3 @@
+export { default as getCheckboxState } from './getCheckboxState';
+export { default as createArrayOfValues } from './createArrayOfValues';
+export { default as removeConditionKeyFromData } from './removeConditionKeyFromData';

package/admin/src/components/Roles/utils/removeConditionKeyFromData.js

@@ -0,0 +1,15 @@
+const removeConditionKeyFromData = obj => {
+  if (!obj) {
+    return null;
+  }
+
+  return Object.keys(obj).reduce((acc, current) => {
+    if (current !== 'conditions') {
+      acc[current] = obj[current];
+    }
+
+    return acc;
+  }, {});
+};
+
+export default removeConditionKeyFromData;

package/admin/src/components/Settings/Header/index.js

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import { Header as PluginHeader } from '@buffetjs/custom';
+import { isEqual } from 'lodash';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+
+const Header = ({
+  content,
+  initialData,
+  isLoading,
+  label,
+  modifiedData,
+  onCancel,
+  showHeaderButtonLoader,
+}) => {
+  const { formatMessage } = useIntl();
+  const areButtonsDisabled = useMemo(() => {
+    return isEqual(modifiedData, initialData);
+  }, [initialData, modifiedData]);
+
+  /* eslint-disable indent */
+  const headerProps = {
+    actions: isLoading
+      ? []
+      : [
+          {
+            onClick: onCancel,
+            disabled: areButtonsDisabled,
+            color: 'cancel',
+            label: formatMessage({
+              id: 'app.components.Button.reset',
+              defaultMessage: 'Reset',
+            }),
+            type: 'button',
+          },
+          {
+            disabled: areButtonsDisabled,
+            color: 'success',
+            label: formatMessage({
+              id: 'app.components.Button.save',
+              defaultMessage: 'Save',
+            }),
+            type: 'submit',
+            isLoading: showHeaderButtonLoader,
+          },
+        ],
+    title: {
+      label,
+    },
+    content,
+  };
+  /* eslint-enable indent */
+
+  return <PluginHeader {...headerProps} isLoading={isLoading} />;
+};
+
+Header.defaultProps = {
+  content: null,
+  label: '',
+  showHeaderButtonLoader: false,
+};
+
+Header.propTypes = {
+  content: PropTypes.string,
+  initialData: PropTypes.object.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  label: PropTypes.string,
+  modifiedData: PropTypes.object.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  showHeaderButtonLoader: PropTypes.bool,
+};
+
+export default Header;

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

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as Header } from './Header';

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import PageTitle from '../PageTitle';
+
+const SettingsPageTitle = ({ name }) => {
+  const { formatMessage } = useIntl();
+  const text = formatMessage({ id: 'Settings.PageTitle' }, { name });
+
+  return <PageTitle title={text} />;
+};
+
+SettingsPageTitle.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default SettingsPageTitle;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Col } from 'reactstrap';
+import PropTypes from 'prop-types';
+import IntlInput from '../IntlInput';
+
+// TODO: remove this component
+const SizedInput = ({ size, ...rest }) => {
+  return (
+    <Col {...size}>
+      <IntlInput {...rest} />
+    </Col>
+  );
+};
+
+SizedInput.defaultProps = {
+  size: {
+    xs: '6',
+  },
+};
+
+SizedInput.propTypes = {
+  size: PropTypes.object,
+};
+
+export default SizedInput;

package/admin/src/components/UpgradePlanModal/components/Arrow/index.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import logo from './arrow.png';
+
+const Img = styled.img`
+  position: absolute;
+  top: 130px;
+  right: 195px;
+  height: 82px;
+`;
+
+Img.defaultProps = {
+  alt: 'arrow',
+  src: logo,
+};
+
+export default Img;

package/admin/src/components/UpgradePlanModal/components/Download/index.js

@@ -0,0 +1,13 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styled from 'styled-components';
+
+const Download = styled(FontAwesomeIcon)`
+  margin-left: 10px;
+  transform: rotate(-45deg);
+`;
+
+Download.defaultProps = {
+  icon: 'arrow-right',
+};
+
+export default Download;

package/admin/src/components/UpgradePlanModal/components/Option/Wrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  height: 25px;
+  max-width: fit-content;
+  padding: 0 15px;
+  background: rgba(0, 126, 255, 0.08);
+  border: 1px solid rgba(0, 126, 255, 0.24);
+  border-radius: 2px;
+`;
+
+export default Wrapper;

package/admin/src/components/UpgradePlanModal/components/Option/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+import Wrapper from './Wrapper';
+
+const Option = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Wrapper left right size="xs">
+      <Text color="mediumBlue" lineHeight="23px">
+        {formatMessage({ id: 'app.components.UpgradePlanModal.text-ce' })}
+      </Text>
+    </Wrapper>
+  );
+};
+
+export default Option;

package/admin/src/components/UpgradePlanModal/components/Wrapper/index.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import Balloon from './balloon.png';
+
+const Wrapper = styled.div`
+  height: 390px;
+  width: 100%;
+  padding-top: 89px;
+  padding-left: 65px;
+  background-image: url(${Balloon});
+  background-size: contain;
+  background-position: right;
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,4 @@
+export { default as Arrow } from './Arrow';
+export { default as Download } from './Download';
+export { default as Option } from './Option';
+export { default as Wrapper } from './Wrapper';

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

@@ -0,0 +1,76 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Padded, Text } from '@buffetjs/core';
+import { Modal } from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+import { Arrow, Download, Option, Wrapper } from './components';
+
+const UpgradePlanModal = ({ isOpen, onToggle }) => {
+  const ref = useRef();
+  const { formatMessage } = useIntl();
+
+  const handleClick = () => {
+    ref.current.click();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onToggle={onToggle} closeButtonColor="#fff">
+      <Wrapper>
+        <Padded>
+          <Option />
+          <Padded top size="smd">
+            <Padded top size="xs">
+              <Text fontSize="xl" fontWeight="bold" lineHeight="24px">
+                {formatMessage({ id: 'app.components.UpgradePlanModal.limit-reached' })}
+              </Text>
+            </Padded>
+          </Padded>
+          <Padded style={{ maxWidth: 405 }} top size="smd">
+            <Text color="black" lineHeight="18px">
+              <Text as="span" fontSize="md" fontWeight="semiBold">
+                {formatMessage({ id: 'app.components.UpgradePlanModal.text-power' })}
+              </Text>
+              &nbsp;
+              <Text as="span" fontSize="md">
+                {formatMessage({ id: 'app.components.UpgradePlanModal.text-strapi' })}
+              </Text>
+              <br />
+              <Text as="span" fontSize="md" fontWeight="semiBold">
+                {formatMessage({ id: 'app.components.UpgradePlanModal.text-ee' })}
+              </Text>
+            </Text>
+          </Padded>
+          <Padded top size="md">
+            <Button color="primary" onClick={handleClick} style={{ paddingRight: 0 }}>
+              {formatMessage({ id: 'app.components.UpgradePlanModal.button' })}
+              <Download />
+            </Button>
+          </Padded>
+        </Padded>
+        <Arrow />
+      </Wrapper>
+
+      <a
+        href="https://strapi.akemona.com/pricing"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ display: 'none' }}
+        ref={ref}
+      />
+    </Modal>
+  );
+};
+
+UpgradePlanModal.defaultProps = {
+  isOpen: false,
+  onToggle: () => {},
+};
+
+UpgradePlanModal.propTypes = {
+  isOpen: PropTypes.bool,
+  onToggle: PropTypes.func,
+};
+
+export default UpgradePlanModal;