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

package/admin/src/content-manager/pages/EditView/components.js

@@ -1,74 +0,0 @@
-import styled from 'styled-components';
-import { Flex, Text } from '@buffetjs/core';
-
-const SubWrapper = styled.div`
-  background: #ffffff;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #e3e9f3;
-`;
-
-const MainWrapper = styled(SubWrapper)`
-  > div {
-    margin-right: 0;
-    margin-left: 0;
-  }
-  padding: 22px 10px;
-`;
-
-const LinkWrapper = styled(SubWrapper)`
-  background: #ffffff;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #e3e9f3;
-  ul {
-    list-style: none;
-    padding: 0;
-  }
-  li {
-    padding: 7px 20px;
-    border-top: 1px solid #f6f6f6;
-    &:first-of-type {
-      border-color: transparent;
-    }
-    &:not(:first-of-type) {
-      margin-top: 0;
-    }
-  }
-`;
-
-const DeleteButton = styled(Flex)`
-  color: ${({ theme }) => theme.main.colors.lightOrange};
-  align-items: center;
-  cursor: pointer;
-  margin-left: 0.2rem;
-  svg {
-    width: 1.1rem !important;
-    margin-right: 1rem;
-  }
-`;
-
-const StatusWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  border-radius: 2px;
-
-  height: 36px;
-  padding: 0 15px;
-  ${({ theme, isGreen }) =>
-    isGreen
-      ? `
-      ${Text} {
-        color: ${theme.main.colors.green};
-      }
-      background-color: #E6F8D4;
-      border: 1px solid #AAD67C;
-    `
-      : `
-      ${Text} {
-        color: ${theme.main.colors.mediumBlue};
-      }
-      background-color: ${theme.main.colors.lightBlue};
-      border: 1px solid #a5d5ff;
-  `}
-`;
-
-export { LinkWrapper, MainWrapper, SubWrapper, DeleteButton, StatusWrapper };

package/admin/src/content-manager/pages/ListView/FieldPicker/ConfigureLink/StyledLink.js

@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-
-const StyledLink = styled(Link)`
-  display: block;
-  width: 100%;
-
-  text-decoration: none;
-  color: #333740;
-  font-size: 13px;
-  svg {
-    margin-right: 10px;
-    vertical-align: middle;
-  }
-  &:hover {
-    text-decoration: none;
-    span {
-      color: #007eff;
-    }
-    svg {
-      g {
-        fill: #007eff;
-      }
-    }
-  }
-`;
-
-export default StyledLink;

package/admin/src/content-manager/pages/ListView/FieldPicker/ConfigureLink/Wrapper.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  padding: 10px 15px;
-  border-bottom: 1px solid ${({ theme }) => theme.main.colors.pale};
-`;
-
-export default Wrapper;

package/admin/src/content-manager/pages/ListView/FieldPicker/ConfigureLink/index.js

@@ -1,34 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { LayoutIcon, useTracking } from '@strapi/helper-plugin';
-import { FormattedMessage } from 'react-intl';
-import Link from './StyledLink';
-import Wrapper from './Wrapper';
-import { usePluginsQueryParams } from '../../../../hooks';
-
-const ConfigureLink = ({ slug }) => {
-  const { trackUsage } = useTracking();
-  const pluginsQueryParams = usePluginsQueryParams();
-
-  const handleClick = () => {
-    trackUsage('willEditListLayout');
-  };
-
-  return (
-    <Wrapper>
-      <Link
-        to={{ pathname: `${slug}/configurations/list`, search: pluginsQueryParams }}
-        onClick={handleClick}
-      >
-        <LayoutIcon />
-        <FormattedMessage id="app.links.configure-view" />
-      </Link>
-    </Wrapper>
-  );
-};
-
-ConfigureLink.propTypes = {
-  slug: PropTypes.string.isRequired,
-};
-
-export default memo(ConfigureLink);

package/admin/src/content-manager/pages/ListView/FieldPicker/Field/Wrapper.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.li`
-  padding: 0 16px;
-  height: 36px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  &:hover {
-    cursor: pointer;
-    background-color: ${({ theme }) => theme.main.colors.mediumGrey};
-  }
-`;
-
-export default Wrapper;

package/admin/src/content-manager/pages/ListView/FieldPicker/Field/index.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Checkbox } from '@buffetjs/core';
-import Wrapper from './Wrapper';
-
-const Field = ({ name, onChange, value }) => {
-  const handleChange = ({ target: { name, value } }) => {
-    onChange({ name, value: !value });
-  };
-
-  return (
-    <Wrapper>
-      <Checkbox name={name} message={name} onChange={handleChange} value={value} />
-    </Wrapper>
-  );
-};
-
-Field.propTypes = {
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.bool.isRequired,
-};
-
-export default Field;

package/admin/src/content-manager/pages/ListView/FieldPicker/Fields/Wrapper.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { themePropTypes } from '@strapi/helper-plugin';
-import { Text } from '@buffetjs/core';
-
-const Wrapper = styled(props => <Text as="ul" fontSize="md" {...props} />)`
-  margin-bottom: 0;
-  padding: 9px 0 0 0;
-  min-width: 228px;
-  list-style-type: none;
-  background-color: ${({ theme }) => theme.main.colors.white};
-`;
-
-Wrapper.propTypes = {
-  ...themePropTypes,
-};
-
-export default Wrapper;

package/admin/src/content-manager/pages/ListView/FieldPicker/Fields/index.js

@@ -1,27 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import Field from '../Field';
-import Wrapper from './Wrapper';
-
-const Fields = ({ displayedHeaders, items, onChange }) => {
-  const getInputValue = useCallback(
-    headerName => displayedHeaders.findIndex(({ name }) => name === headerName) !== -1,
-    [displayedHeaders]
-  );
-
-  return (
-    <Wrapper>
-      {items.map(header => (
-        <Field key={header} name={header} onChange={onChange} value={getInputValue(header)} />
-      ))}
-    </Wrapper>
-  );
-};
-
-Fields.propTypes = {
-  displayedHeaders: PropTypes.array.isRequired,
-  items: PropTypes.array.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default Fields;

package/admin/src/content-manager/pages/ListView/FieldPicker/Header/Reset.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import { Text } from '@buffetjs/core';
-
-const Reset = styled(Text)`
-  cursor: pointer;
-`;
-
-export default Reset;

package/admin/src/content-manager/pages/ListView/FieldPicker/Header/index.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { Flex, Padded, Text } from '@buffetjs/core';
-import { BaselineAlignment, useTracking } from '@strapi/helper-plugin';
-import { getTrad } from '../../../../utils';
-import Reset from './Reset';
-
-const Header = ({ onClick, onToggle }) => {
-  const { trackUsage } = useTracking();
-
-  const handleClick = () => {
-    onClick();
-    onToggle();
-
-    trackUsage('willChangeListFieldsSettings');
-  };
-
-  return (
-    <BaselineAlignment top size="19px">
-      <Padded left right size="xs">
-        <Padded left right size="sm">
-          <Flex justifyContent="space-between">
-            <Text fontWeight="bold">
-              <FormattedMessage id={getTrad('containers.ListPage.displayedFields')} />
-            </Text>
-            <Reset color="mediumBlue" cursor="pointer" onClick={handleClick}>
-              <FormattedMessage id={getTrad('containers.Edit.reset')} />
-            </Reset>
-          </Flex>
-        </Padded>
-      </Padded>
-    </BaselineAlignment>
-  );
-};
-
-Header.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  onToggle: PropTypes.func.isRequired,
-};
-
-export default Header;

package/admin/src/content-manager/pages/ListView/FieldPicker/Wrapper.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  display: flex;
-  margin-bottom: 6px;
-  justify-content: flex-end;
-`;
-
-export default Wrapper;

package/admin/src/content-manager/pages/ListView/Filter.js

@@ -1,83 +0,0 @@
-import React, { memo, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { get, toString } from 'lodash';
-import moment from 'moment';
-import { FilterButton } from '@strapi/helper-plugin';
-import { dateFormats, formatFiltersToQuery } from '../../utils';
-
-function Filter({
-  contentType,
-  filterName,
-  filters,
-  index,
-  metadatas,
-  name,
-  value,
-  toggleFilterPickerState,
-  isFilterPickerOpen,
-  setQuery,
-}) {
-  const attributeType = get(contentType, ['attributes', name, 'type'], 'string');
-  let type = attributeType;
-
-  if (attributeType === 'relation') {
-    type = get(contentType, ['metadatas', name, 'list', 'mainField', 'schema', 'type'], 'string');
-  }
-  let displayedValue = toString(value);
-
-  if (type.includes('date') || type.includes('timestamp')) {
-    const date = moment(value, moment.ISO_8601);
-
-    let format;
-
-    if (type === 'date' || type === 'timestamp') {
-      format = dateFormats.date;
-    } else {
-      format = dateFormats.datetime;
-    }
-
-    displayedValue = moment
-      .parseZone(date)
-      .utc()
-      .format(format);
-  }
-  const displayedName = name.split('.')[0];
-
-  const label = {
-    name: displayedName,
-    filter: filterName,
-    value: displayedValue,
-  };
-
-  const handleClick = useCallback(() => {
-    const updatedFilters = filters.slice().filter((_, i) => i !== index);
-
-    if (isFilterPickerOpen) {
-      toggleFilterPickerState();
-    }
-
-    setQuery({ page: 1, ...formatFiltersToQuery(updatedFilters, metadatas) });
-  }, [filters, index, isFilterPickerOpen, metadatas, setQuery, toggleFilterPickerState]);
-
-  return <FilterButton onClick={handleClick} label={label} type={type} />;
-}
-
-Filter.defaultProps = {
-  name: '',
-  value: '',
-};
-
-Filter.propTypes = {
-  contentType: PropTypes.shape({ attributes: PropTypes.object.isRequired }).isRequired,
-  filterName: PropTypes.string.isRequired,
-  filters: PropTypes.array.isRequired,
-  index: PropTypes.number.isRequired,
-  isFilterPickerOpen: PropTypes.bool.isRequired,
-  metadatas: PropTypes.object.isRequired,
-  name: PropTypes.string,
-  setQuery: PropTypes.func.isRequired,
-  toggleFilterPickerState: PropTypes.func.isRequired,
-  value: PropTypes.any,
-};
-
-export default memo(Filter);

package/admin/src/content-manager/pages/ListView/Footer.js

@@ -1,60 +0,0 @@
-import React, { memo } from 'react';
-import { FormattedMessage } from 'react-intl';
-import PropTypes from 'prop-types';
-import { GlobalPagination, InputSelect, useTracking } from '@strapi/helper-plugin';
-
-import { FooterWrapper, SelectWrapper, Label } from './components';
-
-function Footer({ count, onChange, params }) {
-  const { trackUsage } = useTracking();
-  const _limit = parseInt(params.pageSize, 10);
-  const _page = parseInt(params.page, 10);
-
-  const handleChangePage = ({ target: { value } }) => {
-    onChange({ page: value });
-  };
-
-  const handleChangeLimit = ({ target: { value } }) => {
-    trackUsage('willChangeNumberOfEntriesPerPage');
-
-    onChange({ pageSize: value });
-  };
-
-  return (
-    <FooterWrapper className="row">
-      <div className="col-6">
-        <SelectWrapper>
-          <InputSelect
-            style={{ width: '75px', height: '32px', marginTop: '-1px' }}
-            name="_limit"
-            onChange={handleChangeLimit}
-            selectOptions={['10', '20', '50', '100']}
-            value={_limit}
-          />
-          <Label htmlFor="_limit">
-            <FormattedMessage id="components.PageFooter.select" />
-          </Label>
-        </SelectWrapper>
-      </div>
-      <div className="col-6">
-        <GlobalPagination
-          count={count}
-          onChangeParams={handleChangePage}
-          params={{
-            currentPage: _page,
-            _limit,
-            _page,
-          }}
-        />
-      </div>
-    </FooterWrapper>
-  );
-}
-
-Footer.propTypes = {
-  count: PropTypes.number.isRequired,
-  onChange: PropTypes.func.isRequired,
-  params: PropTypes.object.isRequired,
-};
-
-export default memo(Footer);

package/admin/src/content-manager/pages/ListView/components.js

@@ -1,91 +0,0 @@
-import styled from 'styled-components';
-import RemoveIcon from '../../assets/images/icon-cross-blue.svg';
-
-const Wrapper = styled.div`
-  padding-top: 1px;
-`;
-
-const Img = styled.img`
-  height: 7px;
-  margin: auto;
-  margin-right: 0px;
-  font-size: 12px;
-`;
-
-const FooterWrapper = styled.div`
-  padding-top: 3rem;
-`;
-
-const Label = styled.label`
-  display: inline-block;
-  height: 32px;
-  margin-left: 10px;
-  line-height: 32px;
-  color: #787e8f;
-  font-size: 13px;
-  font-style: italic;
-`;
-
-const SelectWrapper = styled.div`
-  display: flex;
-`;
-
-const FilterWrapper = styled.div`
-  display: inline-block;
-  height: 30px;
-  margin-bottom: 6px;
-  margin-right: 10px;
-  padding: 0 10px;
-  background: rgba(0, 126, 255, 0.08);
-  border: 1px solid rgba(0, 126, 255, 0.24);
-  border-radius: 2px;
-  line-height: 28px;
-  color: #007eff;
-  font-size: 13px;
-
-  > span {
-    display: inline-block;
-    margin-top: -1px;
-  }
-
-  > span:nth-child(2) {
-    font-weight: 700;
-  }
-
-  > span:nth-child(3) {
-    cursor: pointer;
-  }
-
-  -webkit-font-smoothing: antialiased;
-`;
-
-const Separator = styled.span`
-  height: 30px;
-  margin-left: 10px;
-  margin-right: 10px;
-  line-height: 30px;
-  &:after {
-    content: '';
-    height: 15px;
-    border-left: 1px solid #007eff;
-    opacity: 0.1;
-  }
-`;
-
-const Remove = styled.span`
-  height: 28px;
-  cursor: pointer;
-  vertical-align: middle;
-
-  &:after {
-    display: inline-block;
-    content: '';
-    width: 8px;
-    height: 8px;
-    margin: auto;
-    margin-top: -3px;
-    background-image: url(${RemoveIcon});
-  }
-`;
-
-export { FooterWrapper, Img, Label, SelectWrapper, FilterWrapper, Separator, Remove, Wrapper };

package/admin/src/content-manager/pages/ListView/utils/getAllAllowedHeaders.js

@@ -1,17 +0,0 @@
-import { checkIfAttributeIsDisplayable } from '../../../utils';
-
-const getAllAllowedHeaders = attributes => {
-  const allowedAttributes = Object.keys(attributes).reduce((acc, current) => {
-    const attribute = attributes[current];
-
-    if (checkIfAttributeIsDisplayable(attribute)) {
-      acc.push(current);
-    }
-
-    return acc;
-  }, []);
-
-  return allowedAttributes.sort();
-};
-
-export default getAllAllowedHeaders;

package/admin/src/content-manager/pages/ListView/utils/getFirstSortableHeader.js

@@ -1,14 +0,0 @@
-import { get } from 'lodash';
-
-const getFirstSortableHeader = headers => {
-  const matched = headers.find(header => header.metadatas.sortable === true);
-  const fieldName = get(matched, 'name', 'id');
-
-  if (get(matched, 'fieldSchema.type', '') === 'relation') {
-    return `${fieldName}.${matched.metadatas.mainField}`;
-  }
-
-  return fieldName;
-};
-
-export default getFirstSortableHeader;

package/admin/src/contexts/SettingsHeaderSearchContext/index.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const SettingsHeaderSearchContext = createContext({});
-
-export default SettingsHeaderSearchContext;

package/admin/src/hooks/useSettingsHeaderSearchContext/index.js

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import SettingsHeaderSearchContext from '../../contexts/SettingsHeaderSearchContext';
-
-const useSettingsHeaderSearchContext = () => useContext(SettingsHeaderSearchContext);
-
-export default useSettingsHeaderSearchContext;

package/admin/src/pages/Admin/Content.js

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-const Content = styled.div`
-  min-height: calc(100vh - ${props => props.theme.main.sizes.header.height});
-  width: calc(100vw - ${props => props.theme.main.sizes.leftMenu.width});
-  margin-top: ${props => props.theme.main.sizes.header.height};
-  margin-left: ${props => props.theme.main.sizes.leftMenu.width};
-  background: ${props => props.theme.main.colors.content['background-alpha']};
-`;
-
-Content.defaultProps = {
-  theme: {
-    main: {
-      colors: {
-        content: {},
-      },
-      sizes: {
-        header: {},
-        leftMenu: {},
-      },
-    },
-  },
-};
-
-Content.propTypes = {
-  theme: PropTypes.object,
-};
-
-export default Content;