@pranaysahith/decap-cms-core 3.9.1

package/src/components/Collection/NestedCollection.js

@@ -0,0 +1,330 @@
+import React from 'react';
+import { List } from 'immutable';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { connect } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+import { dirname, sep } from 'path';
+import { stringTemplate } from 'decap-cms-lib-widgets';
+import { Icon, colors, components } from 'decap-cms-ui-default';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import sortBy from 'lodash/sortBy';
+
+import { selectEntries } from '../../reducers/entries';
+import { selectEntryCollectionTitle } from '../../reducers/collections';
+
+const { addFileTemplateFields } = stringTemplate;
+
+const NodeTitleContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const NodeTitle = styled.div`
+  margin-right: 4px;
+`;
+
+const Caret = styled.div`
+  position: relative;
+  top: 2px;
+`;
+
+const CaretDown = styled(Caret)`
+  ${components.caretDown};
+  color: currentColor;
+`;
+
+const CaretRight = styled(Caret)`
+  ${components.caretRight};
+  color: currentColor;
+  left: 2px;
+`;
+
+const TreeNavLink = styled(NavLink)`
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  align-items: center;
+  padding: 8px;
+  padding-left: ${props => props.depth * 16 + 18}px;
+  border-left: 2px solid #fff;
+
+  ${Icon} {
+    margin-right: 4px;
+    flex-shrink: 0;
+  }
+
+  ${props => css`
+    &:hover,
+    &:active,
+    &.${props.activeClassName} {
+      color: ${colors.active};
+      background-color: ${colors.activeBackground};
+      border-left-color: #4863c6;
+    }
+  `};
+`;
+
+function getNodeTitle(node, collection) {
+  // Backward compatibility: when `nested.subfolders` is true(default) or undefined,
+  // directory nodes should use the title of their index entry.
+  // Otherwise, use the folder name already stored in `node.title`.
+  const subfolders = collection.getIn(['nested', 'subfolders']) !== false;
+  if (!node.isRoot && node.isDir && subfolders) {
+    const indexChild = node.children.find(child => !child.isDir);
+    if (indexChild && indexChild.title) {
+      return indexChild.title;
+    }
+  }
+  return node.title;
+}
+
+function TreeNode(props) {
+  const { collection, treeData, depth = 0, onToggle } = props;
+  const collectionName = collection.get('name');
+
+  const sortedData = sortBy(treeData, node => getNodeTitle(node, collection));
+  const subfolders = collection.get('nested')?.get('subfolders') !== false;
+  return sortedData.map(node => {
+    const leaf =
+      depth > 0 &&
+      (subfolders
+        ? node.children.length <= 1 && !node.children[0]?.isDir
+        : node.children.length === 0);
+    if (leaf) {
+      return null;
+    }
+    let to = `/collections/${collectionName}`;
+    if (depth > 0) {
+      to = `${to}/filter${node.path}`;
+    }
+    const title = getNodeTitle(node, collection);
+
+    const hasChildren =
+      depth === 0 ||
+      (subfolders
+        ? node.children.some(c => c.children.some(c => c.isDir))
+        : node.children.some(c => c.isDir));
+
+    return (
+      <React.Fragment key={node.path}>
+        <TreeNavLink
+          exact
+          to={to}
+          activeClassName="sidebar-active"
+          onClick={() => onToggle({ node, expanded: !node.expanded })}
+          depth={depth}
+          data-testid={node.path}
+        >
+          <Icon type="write" />
+          <NodeTitleContainer>
+            <NodeTitle>{title}</NodeTitle>
+            {hasChildren && (node.expanded ? <CaretDown /> : <CaretRight />)}
+          </NodeTitleContainer>
+        </TreeNavLink>
+        {node.expanded && (
+          <TreeNode
+            collection={collection}
+            depth={depth + 1}
+            treeData={node.children}
+            onToggle={onToggle}
+          />
+        )}
+      </React.Fragment>
+    );
+  });
+}
+
+TreeNode.propTypes = {
+  collection: ImmutablePropTypes.map.isRequired,
+  depth: PropTypes.number,
+  treeData: PropTypes.array.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export function walk(treeData, callback) {
+  function traverse(children) {
+    for (const child of children) {
+      callback(child);
+      traverse(child.children);
+    }
+  }
+
+  return traverse(treeData);
+}
+
+export function getTreeData(collection, entries) {
+  const collectionFolder = collection.get('folder');
+  const rootFolder = '/';
+  const entriesObj = entries
+    .toJS()
+    .map(e => ({ ...e, path: e.path.slice(collectionFolder.length) }));
+
+  const dirs = entriesObj.reduce((acc, entry) => {
+    let dir = dirname(entry.path);
+    while (!acc[dir] && dir && dir !== rootFolder) {
+      const parts = dir.split(sep);
+      acc[dir] = parts.pop();
+      dir = parts.length && parts.join(sep);
+    }
+    return acc;
+  }, {});
+
+  if (collection.getIn(['nested', 'summary'])) {
+    collection = collection.set('summary', collection.getIn(['nested', 'summary']));
+  } else {
+    collection = collection.delete('summary');
+  }
+
+  const flatData = [
+    {
+      title: collection.get('label'),
+      path: rootFolder,
+      isDir: true,
+      isRoot: true,
+    },
+    ...Object.entries(dirs).map(([key, value]) => ({
+      title: value,
+      path: key,
+      isDir: true,
+      isRoot: false,
+    })),
+    ...entriesObj.map((e, index) => {
+      let entryMap = entries.get(index);
+      entryMap = entryMap.set(
+        'data',
+        addFileTemplateFields(entryMap.get('path'), entryMap.get('data')),
+      );
+      const title = selectEntryCollectionTitle(collection, entryMap);
+      return {
+        ...e,
+        title,
+        isDir: false,
+        isRoot: false,
+      };
+    }),
+  ];
+
+  const parentsToChildren = flatData.reduce((acc, node) => {
+    const parent = node.path === rootFolder ? '' : dirname(node.path);
+    if (acc[parent]) {
+      acc[parent].push(node);
+    } else {
+      acc[parent] = [node];
+    }
+    return acc;
+  }, {});
+
+  function reducer(acc, value) {
+    const node = value;
+    let children = [];
+    if (parentsToChildren[node.path]) {
+      children = parentsToChildren[node.path].reduce(reducer, []);
+    }
+
+    acc.push({ ...node, children });
+    return acc;
+  }
+
+  const treeData = parentsToChildren[''].reduce(reducer, []);
+
+  return treeData;
+}
+
+export function updateNode(treeData, node, callback) {
+  let stop = false;
+
+  function updater(nodes) {
+    if (stop) {
+      return nodes;
+    }
+    for (let i = 0; i < nodes.length; i++) {
+      if (nodes[i].path === node.path) {
+        nodes[i] = callback(node);
+        stop = true;
+        return nodes;
+      }
+    }
+    nodes.forEach(node => updater(node.children));
+    return nodes;
+  }
+
+  return updater([...treeData]);
+}
+
+export class NestedCollection extends React.Component {
+  static propTypes = {
+    collection: ImmutablePropTypes.map.isRequired,
+    entries: ImmutablePropTypes.list.isRequired,
+    filterTerm: PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      treeData: getTreeData(this.props.collection, this.props.entries),
+      selected: null,
+      useFilter: true,
+    };
+  }
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(NestedCollection.propTypes, this.props, 'prop', 'NestedCollection');
+  }
+
+  componentDidUpdate(prevProps) {
+    const { collection, entries, filterTerm } = this.props;
+    if (
+      collection !== prevProps.collection ||
+      entries !== prevProps.entries ||
+      filterTerm !== prevProps.filterTerm
+    ) {
+      const expanded = {};
+      walk(this.state.treeData, node => {
+        if (node.expanded) {
+          expanded[node.path] = true;
+        }
+      });
+      const treeData = getTreeData(collection, entries);
+
+      const path = `/${filterTerm}`;
+      walk(treeData, node => {
+        if (expanded[node.path] || (this.state.useFilter && path.startsWith(node.path))) {
+          node.expanded = true;
+        }
+      });
+      this.setState({ treeData });
+    }
+  }
+
+  onToggle = ({ node, expanded }) => {
+    if (!this.state.selected || this.state.selected.path === node.path || expanded) {
+      const treeData = updateNode(this.state.treeData, node, node => ({
+        ...node,
+        expanded,
+      }));
+      this.setState({ treeData, selected: node, useFilter: false });
+    } else {
+      // don't collapse non selected nodes when clicked
+      this.setState({ selected: node, useFilter: false });
+    }
+  };
+
+  render() {
+    const { treeData } = this.state;
+    const { collection } = this.props;
+
+    return <TreeNode collection={collection} treeData={treeData} onToggle={this.onToggle} />;
+  }
+}
+
+function mapStateToProps(state, ownProps) {
+  const { collection } = ownProps;
+  const entries = selectEntries(state.entries, collection) || List();
+  return { entries };
+}
+
+export default connect(mapStateToProps, null)(NestedCollection);

package/src/components/Collection/Sidebar.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { translate } from 'react-polyglot';
+import { NavLink } from 'react-router-dom';
+import { Icon, components, colors } from 'decap-cms-ui-default';
+
+import { searchCollections } from '../../actions/collections';
+import CollectionSearch from './CollectionSearch';
+import NestedCollection from './NestedCollection';
+
+const styles = {
+  sidebarNavLinkActive: css`
+    color: ${colors.active};
+    background-color: ${colors.activeBackground};
+    border-left-color: #4863c6;
+  `,
+};
+
+const SidebarContainer = styled.aside`
+  ${components.card};
+  width: 250px;
+  padding: 8px 0 12px;
+  position: fixed;
+  max-height: calc(100vh - 112px);
+  display: flex;
+  flex-direction: column;
+`;
+
+const SidebarHeading = styled.h2`
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 37px;
+  padding: 0;
+  margin: 10px 20px;
+  color: ${colors.textLead};
+`;
+
+const SidebarNavList = styled.ul`
+  margin: 12px 0 0;
+  list-style: none;
+  overflow: auto;
+`;
+
+const SidebarNavLink = styled(NavLink)`
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  align-items: center;
+  padding: 8px 18px;
+  border-left: 2px solid #fff;
+  z-index: -1;
+
+  ${Icon} {
+    margin-right: 4px;
+    flex-shrink: 0;
+  }
+
+  ${props => css`
+    &:hover,
+    &:active,
+    &.${props.activeClassName} {
+      ${styles.sidebarNavLinkActive};
+    }
+  `};
+`;
+
+export class Sidebar extends React.Component {
+  static propTypes = {
+    collections: ImmutablePropTypes.map.isRequired,
+    collection: ImmutablePropTypes.map,
+    isSearchEnabled: PropTypes.bool,
+    searchTerm: PropTypes.string,
+    filterTerm: PropTypes.string,
+    t: PropTypes.func.isRequired,
+  };
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(Sidebar.propTypes, this.props, 'prop', 'Sidebar');
+  }
+
+  renderLink = (collection, filterTerm) => {
+    const collectionName = collection.get('name');
+    if (collection.has('nested')) {
+      return (
+        <li key={collectionName}>
+          <NestedCollection
+            collection={collection}
+            filterTerm={filterTerm}
+            data-testid={collectionName}
+          />
+        </li>
+      );
+    }
+    return (
+      <li key={collectionName}>
+        <SidebarNavLink
+          to={`/collections/${collectionName}`}
+          activeClassName="sidebar-active"
+          data-testid={collectionName}
+        >
+          <Icon type="write" />
+          {collection.get('label')}
+        </SidebarNavLink>
+      </li>
+    );
+  };
+
+  render() {
+    const { collections, collection, isSearchEnabled, searchTerm, t, filterTerm } = this.props;
+    return (
+      <SidebarContainer>
+        <SidebarHeading>{t('collection.sidebar.collections')}</SidebarHeading>
+        {isSearchEnabled && (
+          <CollectionSearch
+            searchTerm={searchTerm}
+            collections={collections}
+            collection={collection}
+            onSubmit={(query, collection) => searchCollections(query, collection)}
+          />
+        )}
+        <SidebarNavList>
+          {collections
+            .toList()
+            .filter(collection => collection.get('hide') !== true)
+            .map(collection => this.renderLink(collection, filterTerm))}
+        </SidebarNavList>
+      </SidebarContainer>
+    );
+  }
+}
+
+export default translate()(Sidebar);

package/src/components/Collection/SortControl.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { translate } from 'react-polyglot';
+import { Dropdown, DropdownItem } from 'decap-cms-ui-default';
+
+import { SortDirection } from '../../types/redux';
+import { ControlButton } from './ControlButton';
+
+function nextSortDirection(direction) {
+  switch (direction) {
+    case SortDirection.Ascending:
+      return SortDirection.Descending;
+    case SortDirection.Descending:
+      return SortDirection.None;
+    default:
+      return SortDirection.Ascending;
+  }
+}
+
+function sortIconProps(sortDir) {
+  return {
+    icon: 'chevron',
+    iconDirection: sortIconDirections[sortDir],
+    iconSmall: true,
+  };
+}
+
+const sortIconDirections = {
+  [SortDirection.Ascending]: 'up',
+  [SortDirection.Descending]: 'down',
+};
+
+function SortControl({ t, fields, onSortClick, sort }) {
+  const hasActiveSort = sort
+    ?.valueSeq()
+    .toJS()
+    .some(s => s.direction !== SortDirection.None);
+
+  return (
+    <Dropdown
+      renderButton={() => {
+        return (
+          <ControlButton active={hasActiveSort} title={t('collection.collectionTop.sortBy')} />
+        );
+      }}
+      closeOnSelection={false}
+      dropdownTopOverlap="30px"
+      dropdownWidth="160px"
+      dropdownPosition="left"
+    >
+      {fields.map(field => {
+        const sortDir = sort?.getIn([field.key, 'direction']);
+        const isActive = sortDir && sortDir !== SortDirection.None;
+        const nextSortDir = nextSortDirection(sortDir);
+        return (
+          <DropdownItem
+            key={field.key}
+            label={field.label}
+            onClick={() => onSortClick(field.key, nextSortDir)}
+            isActive={isActive}
+            {...(isActive && sortIconProps(sortDir))}
+          />
+        );
+      })}
+    </Dropdown>
+  );
+}
+
+export default translate()(SortControl);

package/src/components/Collection/ViewStyleControl.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Icon, buttons, colors } from 'decap-cms-ui-default';
+
+import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from '../../constants/collectionViews';
+
+const ViewControlsSection = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 500px;
+`;
+
+const ViewControlsButton = styled.button`
+  ${buttons.button};
+  color: ${props => (props.isActive ? colors.active : '#b3b9c4')};
+  background-color: transparent;
+  display: block;
+  padding: 0;
+  margin: 0 4px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  ${Icon} {
+    display: block;
+  }
+`;
+
+function ViewStyleControl({ viewStyle, onChangeViewStyle }) {
+  return (
+    <ViewControlsSection>
+      <ViewControlsButton
+        isActive={viewStyle === VIEW_STYLE_LIST}
+        onClick={() => onChangeViewStyle(VIEW_STYLE_LIST)}
+      >
+        <Icon type="list" />
+      </ViewControlsButton>
+      <ViewControlsButton
+        isActive={viewStyle === VIEW_STYLE_GRID}
+        onClick={() => onChangeViewStyle(VIEW_STYLE_GRID)}
+      >
+        <Icon type="grid" />
+      </ViewControlsButton>
+    </ViewControlsSection>
+  );
+}
+
+export default ViewStyleControl;

package/src/components/Collection/__tests__/Collection.spec.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { fromJS } from 'immutable';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+
+import ConnectedCollection, { Collection } from '../Collection';
+
+jest.mock('../Entries/EntriesCollection', () => 'mock-entries-collection');
+jest.mock('../CollectionTop', () => 'mock-collection-top');
+jest.mock('../CollectionControls', () => 'mock-collection-controls');
+jest.mock('../Sidebar', () => 'mock-sidebar');
+
+const middlewares = [];
+const mockStore = configureStore(middlewares);
+
+function renderWithRedux(component, { store } = {}) {
+  function Wrapper({ children }) {
+    return <Provider store={store}>{children}</Provider>;
+  }
+
+  return render(component, { wrapper: Wrapper });
+}
+
+describe('Collection', () => {
+  const collection = fromJS({
+    name: 'pages',
+    sortable_fields: [],
+    view_filters: [],
+    view_groups: [],
+  });
+  const props = {
+    collections: fromJS([collection]).toOrderedMap(),
+    collection,
+    collectionName: collection.get('name'),
+    t: jest.fn(key => key),
+    onSortClick: jest.fn(),
+  };
+
+  it('should render with collection without create url', () => {
+    const { asFragment } = render(
+      <Collection {...props} collection={collection.set('create', false)} />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render with collection with create url', () => {
+    const { asFragment } = render(
+      <Collection {...props} collection={collection.set('create', true)} />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render with collection with create url and path', () => {
+    const { asFragment } = render(
+      <Collection {...props} collection={collection.set('create', true)} filterTerm="dir1/dir2" />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render connected component', () => {
+    const store = mockStore({
+      collections: props.collections,
+      entries: fromJS({}),
+    });
+
+    const { asFragment } = renderWithRedux(<ConnectedCollection match={{ params: {} }} />, {
+      store,
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});