@pranaysahith/decap-cms-core 3.9.1

package/src/components/Collection/Entries/EntryListing.js

@@ -0,0 +1,151 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import styled from '@emotion/styled';
+import { Waypoint } from 'react-waypoint';
+import { Map, List } from 'immutable';
+
+import { selectFields, selectInferredField } from '../../../reducers/collections';
+import { filterNestedEntries } from './EntriesCollection';
+import EntryCard from './EntryCard';
+
+const CardsGrid = styled.ul`
+  display: flex;
+  flex-flow: row wrap;
+  list-style-type: none;
+  margin-left: -12px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+`;
+
+class EntryListing extends React.Component {
+  static propTypes = {
+    collections: ImmutablePropTypes.iterable.isRequired,
+    entries: ImmutablePropTypes.list,
+    viewStyle: PropTypes.string,
+    cursor: PropTypes.any.isRequired,
+    handleCursorActions: PropTypes.func.isRequired,
+    page: PropTypes.number,
+    getUnpublishedEntries: PropTypes.func.isRequired,
+    getWorkflowStatus: PropTypes.func.isRequired,
+    filterTerm: PropTypes.string,
+  };
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(EntryListing.propTypes, this.props, 'prop', 'EntryListing');
+  }
+
+  hasMore = () => {
+    const hasMore = this.props.cursor?.actions?.has('append_next');
+    return hasMore;
+  };
+
+  handleLoadMore = () => {
+    if (this.hasMore()) {
+      this.props.handleCursorActions('append_next');
+    }
+  };
+
+  inferFields = collection => {
+    const titleField = selectInferredField(collection, 'title');
+    const descriptionField = selectInferredField(collection, 'description');
+    const imageField = selectInferredField(collection, 'image');
+    const fields = selectFields(collection);
+    const inferredFields = [titleField, descriptionField, imageField];
+    const remainingFields =
+      fields && fields.filter(f => inferredFields.indexOf(f.get('name')) === -1);
+    return { titleField, descriptionField, imageField, remainingFields };
+  };
+
+  getAllEntries = () => {
+    const { entries, collections, filterTerm } = this.props;
+    const collectionName = Map.isMap(collections) ? collections.get('name') : null;
+
+    if (!collectionName) {
+      return entries;
+    }
+
+    const unpublishedEntries = this.props.getUnpublishedEntries(collectionName);
+
+    if (!unpublishedEntries || unpublishedEntries.length === 0) {
+      return entries;
+    }
+
+    let unpublishedList = List(unpublishedEntries.map(entry => entry));
+
+    if (collections.has('nested') && filterTerm) {
+      const collectionFolder = collections.get('folder');
+      const subfolders = collections.get('nested').get('subfolders') !== false;
+
+      unpublishedList = filterNestedEntries(
+        filterTerm,
+        collectionFolder,
+        unpublishedList,
+        subfolders,
+      );
+    }
+
+    const publishedSlugs = entries.map(entry => entry.get('slug')).toSet();
+    const uniqueUnpublished = unpublishedList.filterNot(entry =>
+      publishedSlugs.has(entry.get('slug')),
+    );
+
+    return entries.concat(uniqueUnpublished);
+  };
+
+  renderCardsForSingleCollection = () => {
+    const { collections, viewStyle } = this.props;
+    const allEntries = this.getAllEntries();
+    const inferredFields = this.inferFields(collections);
+    const entryCardProps = { collection: collections, inferredFields, viewStyle };
+
+    return allEntries.map((entry, idx) => {
+      const workflowStatus = this.props.getWorkflowStatus(
+        collections.get('name'),
+        entry.get('slug'),
+      );
+
+      return (
+        <EntryCard {...entryCardProps} entry={entry} workflowStatus={workflowStatus} key={idx} />
+      );
+    });
+  };
+
+  renderCardsForMultipleCollections = () => {
+    const { collections, entries } = this.props;
+    const isSingleCollectionInList = collections.size === 1;
+    return entries.map((entry, idx) => {
+      const collectionName = entry.get('collection');
+      const collection = collections.find(coll => coll.get('name') === collectionName);
+      const collectionLabel = !isSingleCollectionInList && collection.get('label');
+      const inferredFields = this.inferFields(collection);
+      const workflowStatus = this.props.getWorkflowStatus(collectionName, entry.get('slug'));
+      const entryCardProps = {
+        collection,
+        entry,
+        inferredFields,
+        collectionLabel,
+        workflowStatus,
+      };
+      return <EntryCard {...entryCardProps} key={idx} />;
+    });
+  };
+
+  render() {
+    const { collections, page } = this.props;
+
+    return (
+      <div>
+        <CardsGrid>
+          {Map.isMap(collections)
+            ? this.renderCardsForSingleCollection()
+            : this.renderCardsForMultipleCollections()}
+          {this.hasMore() && <Waypoint key={page} onEnter={this.handleLoadMore} />}
+        </CardsGrid>
+      </div>
+    );
+  }
+}
+
+export default EntryListing;

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

@@ -0,0 +1,163 @@
+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 ConnectedEntriesCollection, {
+  EntriesCollection,
+  filterNestedEntries,
+} from '../EntriesCollection';
+
+jest.mock('../Entries', () => 'mock-entries');
+
+const middlewares = [];
+const mockStore = configureStore(middlewares);
+
+function createMockStore(collection, entriesArray, additionalState = {}) {
+  return mockStore({
+    entries: toEntriesState(collection, entriesArray),
+    cursors: fromJS({}),
+    config: fromJS({ publish_mode: 'simple' }),
+    collections: fromJS({ [collection.get('name')]: collection }),
+    editorialWorkflow: fromJS({
+      pages: { ids: [] },
+    }),
+    ...additionalState,
+  });
+}
+
+function renderWithRedux(component, { store } = {}) {
+  function Wrapper({ children }) {
+    return <Provider store={store}>{children}</Provider>;
+  }
+
+  return render(component, { wrapper: Wrapper });
+}
+
+function toEntriesState(collection, entriesArray) {
+  const entries = entriesArray.reduce(
+    (acc, entry) => {
+      acc.entities[`${collection.get('name')}.${entry.slug}`] = entry;
+      acc.pages[collection.get('name')].ids.push(entry.slug);
+      return acc;
+    },
+    { pages: { [collection.get('name')]: { ids: [] } }, entities: {} },
+  );
+  return fromJS(entries);
+}
+
+describe('filterNestedEntries', () => {
+  it('should return only immediate children for non root path', () => {
+    const entriesArray = [
+      { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
+      { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },
+      { slug: 'dir1/dir2/index', path: 'src/pages/dir1/dir2/index.md', data: { title: 'File 2' } },
+      { slug: 'dir3/index', path: 'src/pages/dir3/index.md', data: { title: 'File 3' } },
+      { slug: 'dir3/dir4/index', path: 'src/pages/dir3/dir4/index.md', data: { title: 'File 4' } },
+    ];
+    const entries = fromJS(entriesArray);
+    expect(filterNestedEntries('dir3', 'src/pages', entries).toJS()).toEqual([
+      { slug: 'dir3/index', path: 'src/pages/dir3/index.md', data: { title: 'File 3' } },
+    ]);
+  });
+
+  it('should return only immediate children for root path', () => {
+    const entriesArray = [
+      { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
+      { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },
+      { slug: 'dir1/dir2/index', path: 'src/pages/dir1/dir2/index.md', data: { title: 'File 2' } },
+      { slug: 'dir3/index', path: 'src/pages/dir3/index.md', data: { title: 'File 3' } },
+      { slug: 'dir3/dir4/index', path: 'src/pages/dir3/dir4/index.md', data: { title: 'File 4' } },
+    ];
+    const entries = fromJS(entriesArray);
+    expect(filterNestedEntries('', 'src/pages', entries).toJS()).toEqual([
+      { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
+    ]);
+  });
+});
+
+describe('EntriesCollection', () => {
+  const collection = fromJS({ name: 'pages', label: 'Pages', folder: 'src/pages' });
+  const props = {
+    t: jest.fn(),
+    loadEntries: jest.fn(),
+    traverseCollectionCursor: jest.fn(),
+    loadUnpublishedEntries: jest.fn(),
+    isFetching: false,
+    cursor: {},
+    collection,
+    collections: fromJS({ pages: collection }),
+    entriesLoaded: true,
+    unpublishedEntriesLoaded: true,
+    isEditorialWorkflowEnabled: false,
+    getWorkflowStatus: jest.fn(),
+    getUnpublishedEntries: jest.fn(() => []),
+  };
+
+  it('should render with entries', () => {
+    const entries = fromJS([{ slug: 'index' }]);
+    const { asFragment } = render(<EntriesCollection {...props} entries={entries} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render connected component', () => {
+    const entriesArray = [
+      { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
+      { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },
+      { slug: 'dir2/index', path: 'src/pages/dir2/index.md', data: { title: 'File 2' } },
+    ];
+
+    const store = createMockStore(collection, entriesArray);
+
+    const { asFragment } = renderWithRedux(<ConnectedEntriesCollection collection={collection} />, {
+      store,
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render show only immediate children for nested collection', () => {
+    const entriesArray = [
+      { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
+      { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },
+      { slug: 'dir1/dir2/index', path: 'src/pages/dir1/dir2/index.md', data: { title: 'File 2' } },
+      { slug: 'dir3/index', path: 'src/pages/dir3/index.md', data: { title: 'File 3' } },
+      { slug: 'dir3/dir4/index', path: 'src/pages/dir3/dir4/index.md', data: { title: 'File 4' } },
+    ];
+
+    const store = createMockStore(collection, entriesArray);
+
+    const { asFragment } = renderWithRedux(
+      <ConnectedEntriesCollection
+        collection={collection.set('nested', fromJS({ depth: 10, subfolders: false }))}
+      />,
+      { store },
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render with applied filter term for nested collections', () => {
+    const entriesArray = [
+      { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
+      { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },
+      { slug: 'dir1/dir2/index', path: 'src/pages/dir1/dir2/index.md', data: { title: 'File 2' } },
+      { slug: 'dir3/index', path: 'src/pages/dir3/index.md', data: { title: 'File 3' } },
+      { slug: 'dir3/dir4/index', path: 'src/pages/dir3/dir4/index.md', data: { title: 'File 4' } },
+    ];
+
+    const store = createMockStore(collection, entriesArray);
+
+    const { asFragment } = renderWithRedux(
+      <ConnectedEntriesCollection
+        collection={collection.set('nested', fromJS({ depth: 10, subfolders: false }))}
+        filterTerm="dir3/dir4"
+      />,
+      { store },
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/Collection/Entries/__tests__/__snapshots__/EntriesCollection.spec.js.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EntriesCollection should render connected component 1`] = `
+<DocumentFragment>
+  <mock-entries
+    collectionname="Pages"
+    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\" }"
+    cursor="[object Object]"
+    entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } }, Map { \\"slug\\": \\"dir1/index\\", \\"path\\": \\"src/pages/dir1/index.md\\", \\"data\\": Map { \\"title\\": \\"File 1\\" } }, Map { \\"slug\\": \\"dir2/index\\", \\"path\\": \\"src/pages/dir2/index.md\\", \\"data\\": Map { \\"title\\": \\"File 2\\" } } ]"
+  />
+</DocumentFragment>
+`;
+
+exports[`EntriesCollection should render show only immediate children for nested collection 1`] = `
+<DocumentFragment>
+  <mock-entries
+    collectionname="Pages"
+    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10, \\"subfolders\\": false } }"
+    cursor="[object Object]"
+    entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } } ]"
+  />
+</DocumentFragment>
+`;
+
+exports[`EntriesCollection should render with applied filter term for nested collections 1`] = `
+<DocumentFragment>
+  <mock-entries
+    collectionname="Pages"
+    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10, \\"subfolders\\": false } }"
+    cursor="[object Object]"
+    entries="List [ Map { \\"slug\\": \\"dir3/dir4/index\\", \\"path\\": \\"src/pages/dir3/dir4/index.md\\", \\"data\\": Map { \\"title\\": \\"File 4\\" } } ]"
+    filterterm="dir3/dir4"
+  />
+</DocumentFragment>
+`;
+
+exports[`EntriesCollection should render with entries 1`] = `
+<DocumentFragment>
+  <mock-entries
+    collectionname="Pages"
+    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\" }"
+    cursor="[object Object]"
+    entries="List [ Map { \\"slug\\": \\"index\\" } ]"
+  />
+</DocumentFragment>
+`;

package/src/components/Collection/FilterControl.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { translate } from 'react-polyglot';
+import { Dropdown, DropdownCheckedItem } from 'decap-cms-ui-default';
+
+import { ControlButton } from './ControlButton';
+
+function FilterControl({ viewFilters, t, onFilterClick, filter }) {
+  const hasActiveFilter = filter
+    ?.valueSeq()
+    .toJS()
+    .some(f => f.active === true);
+
+  return (
+    <Dropdown
+      renderButton={() => {
+        return (
+          <ControlButton active={hasActiveFilter} title={t('collection.collectionTop.filterBy')} />
+        );
+      }}
+      closeOnSelection={false}
+      dropdownTopOverlap="30px"
+      dropdownPosition="left"
+    >
+      {viewFilters.map(viewFilter => {
+        return (
+          <DropdownCheckedItem
+            key={viewFilter.id}
+            label={viewFilter.label}
+            id={viewFilter.id}
+            checked={filter.getIn([viewFilter.id, 'active'], false)}
+            onClick={() => onFilterClick(viewFilter)}
+          />
+        );
+      })}
+    </Dropdown>
+  );
+}
+
+export default translate()(FilterControl);

package/src/components/Collection/GroupControl.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { translate } from 'react-polyglot';
+import { Dropdown, DropdownItem } from 'decap-cms-ui-default';
+
+import { ControlButton } from './ControlButton';
+
+function GroupControl({ viewGroups, t, onGroupClick, group }) {
+  const hasActiveGroup = group
+    ?.valueSeq()
+    .toJS()
+    .some(f => f.active === true);
+
+  return (
+    <Dropdown
+      renderButton={() => {
+        return (
+          <ControlButton active={hasActiveGroup} title={t('collection.collectionTop.groupBy')} />
+        );
+      }}
+      closeOnSelection={false}
+      dropdownTopOverlap="30px"
+      dropdownWidth="160px"
+      dropdownPosition="left"
+    >
+      {viewGroups.map(viewGroup => {
+        return (
+          <DropdownItem
+            key={viewGroup.id}
+            label={viewGroup.label}
+            onClick={() => onGroupClick(viewGroup)}
+            isActive={group.getIn([viewGroup.id, 'active'], false)}
+          />
+        );
+      })}
+    </Dropdown>
+  );
+}
+
+export default translate()(GroupControl);