@pranaysahith/decap-cms-core 3.9.1

package/src/components/Collection/Collection.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import styled from '@emotion/styled';
+import { connect } from 'react-redux';
+import { translate } from 'react-polyglot';
+import { lengths, components } from 'decap-cms-ui-default';
+
+import { getNewEntryUrl } from '../../lib/urlHelper';
+import Sidebar from './Sidebar';
+import CollectionTop from './CollectionTop';
+import EntriesCollection from './Entries/EntriesCollection';
+import EntriesSearch from './Entries/EntriesSearch';
+import CollectionControls from './CollectionControls';
+import { sortByField, filterByField, changeViewStyle, groupByField } from '../../actions/entries';
+import {
+  selectSortableFields,
+  selectViewFilters,
+  selectViewGroups,
+} from '../../reducers/collections';
+import {
+  selectEntriesSort,
+  selectEntriesFilter,
+  selectEntriesGroup,
+  selectViewStyle,
+} from '../../reducers/entries';
+
+const CollectionContainer = styled.div`
+  margin: ${lengths.pageMargin};
+`;
+
+const CollectionMain = styled.main`
+  padding-left: 280px;
+`;
+
+const SearchResultContainer = styled.div`
+  ${components.cardTop};
+  margin-bottom: 22px;
+`;
+
+const SearchResultHeading = styled.h1`
+  ${components.cardTopHeading};
+`;
+
+export class Collection extends React.Component {
+  static propTypes = {
+    searchTerm: PropTypes.string,
+    collectionName: PropTypes.string,
+    isSearchResults: PropTypes.bool,
+    isSingleSearchResult: PropTypes.bool,
+    collection: ImmutablePropTypes.map.isRequired,
+    collections: ImmutablePropTypes.map.isRequired,
+    sortableFields: PropTypes.array,
+    sort: ImmutablePropTypes.orderedMap,
+    onSortClick: PropTypes.func.isRequired,
+  };
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(Collection.propTypes, this.props, 'prop', 'Collection');
+  }
+
+  renderEntriesCollection = () => {
+    const { collection, filterTerm, viewStyle } = this.props;
+    return (
+      <EntriesCollection collection={collection} viewStyle={viewStyle} filterTerm={filterTerm} />
+    );
+  };
+
+  renderEntriesSearch = () => {
+    const { searchTerm, collections, collection, isSingleSearchResult } = this.props;
+    return (
+      <EntriesSearch
+        collections={isSingleSearchResult ? collections.filter(c => c === collection) : collections}
+        searchTerm={searchTerm}
+      />
+    );
+  };
+
+  render() {
+    const {
+      collection,
+      collections,
+      collectionName,
+      isSearchEnabled,
+      isSearchResults,
+      isSingleSearchResult,
+      searchTerm,
+      sortableFields,
+      onSortClick,
+      sort,
+      viewFilters,
+      viewGroups,
+      filterTerm,
+      t,
+      onFilterClick,
+      onGroupClick,
+      filter,
+      group,
+      onChangeViewStyle,
+      viewStyle,
+    } = this.props;
+
+    let newEntryUrl = collection.get('create') ? getNewEntryUrl(collectionName) : '';
+    if (newEntryUrl && filterTerm) {
+      newEntryUrl = getNewEntryUrl(collectionName);
+      if (filterTerm) {
+        newEntryUrl = `${newEntryUrl}?path=${filterTerm}`;
+      }
+    }
+
+    const searchResultKey =
+      'collection.collectionTop.searchResults' + (isSingleSearchResult ? 'InCollection' : '');
+
+    return (
+      <CollectionContainer>
+        <Sidebar
+          collections={collections}
+          collection={(!isSearchResults || isSingleSearchResult) && collection}
+          isSearchEnabled={isSearchEnabled}
+          searchTerm={searchTerm}
+          filterTerm={filterTerm}
+        />
+        <CollectionMain>
+          {isSearchResults ? (
+            <SearchResultContainer>
+              <SearchResultHeading>
+                {t(searchResultKey, { searchTerm, collection: collection.get('label') })}
+              </SearchResultHeading>
+            </SearchResultContainer>
+          ) : (
+            <>
+              <CollectionTop collection={collection} newEntryUrl={newEntryUrl} />
+              <CollectionControls
+                viewStyle={viewStyle}
+                onChangeViewStyle={onChangeViewStyle}
+                sortableFields={sortableFields}
+                onSortClick={onSortClick}
+                sort={sort}
+                viewFilters={viewFilters}
+                viewGroups={viewGroups}
+                t={t}
+                onFilterClick={onFilterClick}
+                onGroupClick={onGroupClick}
+                filter={filter}
+                group={group}
+              />
+            </>
+          )}
+          {isSearchResults ? this.renderEntriesSearch() : this.renderEntriesCollection()}
+        </CollectionMain>
+      </CollectionContainer>
+    );
+  }
+}
+
+function mapStateToProps(state, ownProps) {
+  const { collections } = state;
+  const isSearchEnabled = state.config && state.config.search != false;
+  const { isSearchResults, match, t } = ownProps;
+  const { name, searchTerm = '', filterTerm = '' } = match.params;
+  const collection = name ? collections.get(name) : collections.first();
+  const sort = selectEntriesSort(state.entries, collection.get('name'));
+  const sortableFields = selectSortableFields(collection, t);
+  const viewFilters = selectViewFilters(collection);
+  const viewGroups = selectViewGroups(collection);
+  const filter = selectEntriesFilter(state.entries, collection.get('name'));
+  const group = selectEntriesGroup(state.entries, collection.get('name'));
+  const viewStyle = selectViewStyle(state.entries);
+
+  return {
+    collection,
+    collections,
+    collectionName: name,
+    isSearchEnabled,
+    isSearchResults,
+    searchTerm,
+    filterTerm,
+    sort,
+    sortableFields,
+    viewFilters,
+    viewGroups,
+    filter,
+    group,
+    viewStyle,
+  };
+}
+
+const mapDispatchToProps = {
+  sortByField,
+  filterByField,
+  changeViewStyle,
+  groupByField,
+};
+
+function mergeProps(stateProps, dispatchProps, ownProps) {
+  return {
+    ...stateProps,
+    ...ownProps,
+    onSortClick: (key, direction) =>
+      dispatchProps.sortByField(stateProps.collection, key, direction),
+    onFilterClick: filter => dispatchProps.filterByField(stateProps.collection, filter),
+    onGroupClick: group => dispatchProps.groupByField(stateProps.collection, group),
+    onChangeViewStyle: viewStyle => dispatchProps.changeViewStyle(viewStyle),
+  };
+}
+
+const ConnectedCollection = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Collection);
+
+export default translate()(ConnectedCollection);

package/src/components/Collection/CollectionControls.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { lengths } from 'decap-cms-ui-default';
+
+import ViewStyleControl from './ViewStyleControl';
+import SortControl from './SortControl';
+import FilterControl from './FilterControl';
+import GroupControl from './GroupControl';
+
+const CollectionControlsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  margin-top: 22px;
+  width: ${lengths.topCardWidth};
+  max-width: 100%;
+
+  & > div {
+    margin-left: 6px;
+  }
+`;
+
+function CollectionControls({
+  viewStyle,
+  onChangeViewStyle,
+  sortableFields,
+  onSortClick,
+  sort,
+  viewFilters,
+  viewGroups,
+  onFilterClick,
+  onGroupClick,
+  t,
+  filter,
+  group,
+}) {
+  return (
+    <CollectionControlsContainer>
+      <ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={onChangeViewStyle} />
+      {viewGroups.length > 0 && (
+        <GroupControl viewGroups={viewGroups} onGroupClick={onGroupClick} t={t} group={group} />
+      )}
+      {viewFilters.length > 0 && (
+        <FilterControl
+          viewFilters={viewFilters}
+          onFilterClick={onFilterClick}
+          t={t}
+          filter={filter}
+        />
+      )}
+      {sortableFields.length > 0 && (
+        <SortControl fields={sortableFields} sort={sort} onSortClick={onSortClick} />
+      )}
+    </CollectionControlsContainer>
+  );
+}
+
+export default CollectionControls;

package/src/components/Collection/CollectionSearch.js

@@ -0,0 +1,243 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { colorsRaw, colors, Icon, lengths, zIndex } from 'decap-cms-ui-default';
+import { translate } from 'react-polyglot';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+const SearchContainer = styled.div`
+  margin: 0 12px;
+  position: relative;
+
+  ${Icon} {
+    position: absolute;
+    top: 0;
+    left: 6px;
+    z-index: ${zIndex.zIndex2};
+    height: 100%;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+`;
+
+const InputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
+const SearchInput = styled.input`
+  background-color: #eff0f4;
+  border-radius: ${lengths.borderRadius};
+  font-size: 14px;
+  padding: 10px 6px 10px 34px;
+  width: 100%;
+  position: relative;
+  z-index: ${zIndex.zIndex1};
+
+  &:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px ${colorsRaw.blue};
+  }
+`;
+
+const SuggestionsContainer = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const Suggestions = styled.ul`
+  position: absolute;
+  top: 6px;
+  left: 0;
+  right: 0;
+  padding: 10px 0;
+  margin: 0;
+  list-style: none;
+  background-color: #fff;
+  border-radius: ${lengths.borderRadius};
+  border: 1px solid ${colors.textFieldBorder};
+  z-index: ${zIndex.zIndex1};
+`;
+
+const SuggestionHeader = styled.li`
+  padding: 0 6px 6px 34px;
+  font-size: 12px;
+  color: ${colors.text};
+`;
+
+const SuggestionItem = styled.li(
+  ({ isActive }) => `
+  color: ${isActive ? colors.active : colorsRaw.grayDark};
+  background-color: ${isActive ? colors.activeBackground : 'inherit'};
+  padding: 6px 6px 6px 34px;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    color: ${colors.active};
+    background-color: ${colors.activeBackground};
+  }
+`,
+);
+
+const SuggestionDivider = styled.div`
+  width: 100%;
+`;
+
+class CollectionSearch extends React.Component {
+  static propTypes = {
+    collections: ImmutablePropTypes.map.isRequired,
+    collection: ImmutablePropTypes.map,
+    searchTerm: PropTypes.string.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
+  };
+
+  state = {
+    query: this.props.searchTerm,
+    suggestionsVisible: false,
+    // default to the currently selected
+    selectedCollectionIdx: this.getSelectedSelectionBasedOnProps(),
+  };
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(CollectionSearch.propTypes, this.props, 'prop', 'CollectionSearch');
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.collection !== this.props.collection) {
+      const selectedCollectionIdx = this.getSelectedSelectionBasedOnProps();
+      this.setState({ selectedCollectionIdx });
+    }
+  }
+
+  getSelectedSelectionBasedOnProps() {
+    const { collection, collections } = this.props;
+    return collection ? collections.keySeq().indexOf(collection.get('name')) : -1;
+  }
+
+  toggleSuggestions(visible) {
+    this.setState({ suggestionsVisible: visible });
+  }
+
+  selectNextSuggestion() {
+    const { collections } = this.props;
+    const { selectedCollectionIdx } = this.state;
+    this.setState({
+      selectedCollectionIdx: Math.min(selectedCollectionIdx + 1, collections.size - 1),
+    });
+  }
+
+  selectPreviousSuggestion() {
+    const { selectedCollectionIdx } = this.state;
+    this.setState({
+      selectedCollectionIdx: Math.max(selectedCollectionIdx - 1, -1),
+    });
+  }
+
+  resetSelectedSuggestion() {
+    this.setState({
+      selectedCollectionIdx: -1,
+    });
+  }
+
+  submitSearch = () => {
+    const { onSubmit, collections } = this.props;
+    const { selectedCollectionIdx, query } = this.state;
+
+    this.toggleSuggestions(false);
+    if (selectedCollectionIdx !== -1) {
+      onSubmit(query, collections.toIndexedSeq().getIn([selectedCollectionIdx, 'name']));
+    } else {
+      onSubmit(query);
+    }
+  };
+
+  handleKeyDown = event => {
+    const { suggestionsVisible } = this.state;
+
+    if (event.key === 'Enter') {
+      this.submitSearch();
+    }
+
+    if (suggestionsVisible) {
+      // allow closing of suggestions with escape key
+      if (event.key === 'Escape') {
+        this.toggleSuggestions(false);
+      }
+
+      if (event.key === 'ArrowDown') {
+        this.selectNextSuggestion();
+        event.preventDefault();
+      } else if (event.key === 'ArrowUp') {
+        this.selectPreviousSuggestion();
+        event.preventDefault();
+      }
+    }
+  };
+
+  handleQueryChange = query => {
+    this.setState({ query });
+    this.toggleSuggestions(query !== '');
+    if (query === '') {
+      this.resetSelectedSuggestion();
+    }
+  };
+
+  handleSuggestionClick = (event, idx) => {
+    this.setState({ selectedCollectionIdx: idx }, this.submitSearch);
+    event.preventDefault();
+  };
+
+  render() {
+    const { collections, t } = this.props;
+    const { suggestionsVisible, selectedCollectionIdx, query } = this.state;
+    return (
+      <SearchContainer
+        onBlur={() => this.toggleSuggestions(false)}
+        onFocus={() => this.toggleSuggestions(query !== '')}
+      >
+        <InputContainer>
+          <Icon type="search" />
+          <SearchInput
+            onChange={e => this.handleQueryChange(e.target.value)}
+            onKeyDown={this.handleKeyDown}
+            onClick={() => this.toggleSuggestions(true)}
+            placeholder={t('collection.sidebar.searchAll')}
+            value={query}
+          />
+        </InputContainer>
+        {suggestionsVisible && (
+          <SuggestionsContainer>
+            <Suggestions>
+              <SuggestionHeader>{t('collection.sidebar.searchIn')}</SuggestionHeader>
+              <SuggestionItem
+                isActive={selectedCollectionIdx === -1}
+                onClick={e => this.handleSuggestionClick(e, -1)}
+                onMouseDown={e => e.preventDefault()}
+              >
+                {t('collection.sidebar.allCollections')}
+              </SuggestionItem>
+              <SuggestionDivider />
+              {collections.toIndexedSeq().map((collection, idx) => (
+                <SuggestionItem
+                  key={idx}
+                  isActive={idx === selectedCollectionIdx}
+                  onClick={e => this.handleSuggestionClick(e, idx)}
+                  onMouseDown={e => e.preventDefault()}
+                >
+                  {collection.get('label')}
+                </SuggestionItem>
+              ))}
+            </Suggestions>
+          </SuggestionsContainer>
+        )}
+      </SearchContainer>
+    );
+  }
+}
+
+export default translate()(CollectionSearch);

package/src/components/Collection/CollectionTop.js

@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import React from 'react';
+import styled from '@emotion/styled';
+import { translate } from 'react-polyglot';
+import { Link } from 'react-router-dom';
+import { components, buttons, shadows } from 'decap-cms-ui-default';
+
+const CollectionTopContainer = styled.div`
+  ${components.cardTop};
+  margin-bottom: 22px;
+`;
+
+const CollectionTopRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const CollectionTopHeading = styled.h1`
+  ${components.cardTopHeading};
+`;
+
+const CollectionTopNewButton = styled(Link)`
+  ${buttons.button};
+  ${shadows.dropDeep};
+  ${buttons.default};
+  ${buttons.gray};
+
+  padding: 0 30px;
+`;
+
+const CollectionTopDescription = styled.p`
+  ${components.cardTopDescription};
+  margin-bottom: 0;
+`;
+
+function getCollectionProps(collection) {
+  const collectionLabel = collection.get('label');
+  const collectionLabelSingular = collection.get('label_singular');
+  const collectionDescription = collection.get('description');
+
+  return {
+    collectionLabel,
+    collectionLabelSingular,
+    collectionDescription,
+  };
+}
+
+function CollectionTop({ collection, newEntryUrl, t }) {
+  const { collectionLabel, collectionLabelSingular, collectionDescription } = getCollectionProps(
+    collection,
+    t,
+  );
+
+  return (
+    <CollectionTopContainer>
+      <CollectionTopRow>
+        <CollectionTopHeading>{collectionLabel}</CollectionTopHeading>
+        {newEntryUrl ? (
+          <CollectionTopNewButton to={newEntryUrl}>
+            {t('collection.collectionTop.newButton', {
+              collectionLabel: collectionLabelSingular || collectionLabel,
+            })}
+          </CollectionTopNewButton>
+        ) : null}
+      </CollectionTopRow>
+      {collectionDescription ? (
+        <CollectionTopDescription>{collectionDescription}</CollectionTopDescription>
+      ) : null}
+    </CollectionTopContainer>
+  );
+}
+
+CollectionTop.propTypes = {
+  collection: ImmutablePropTypes.map.isRequired,
+  newEntryUrl: PropTypes.string,
+  t: PropTypes.func.isRequired,
+};
+
+export default translate()(CollectionTop);

package/src/components/Collection/ControlButton.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { buttons, StyledDropdownButton, colors } from 'decap-cms-ui-default';
+
+const Button = styled(StyledDropdownButton)`
+  ${buttons.button};
+  ${buttons.medium};
+  ${buttons.grayText};
+  font-size: 14px;
+
+  &:after {
+    top: 11px;
+  }
+`;
+
+export function ControlButton({ active, title }) {
+  return (
+    <Button
+      css={css`
+        color: ${active ? colors.active : undefined};
+      `}
+    >
+      {title}
+    </Button>
+  );
+}

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

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from '@emotion/styled';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { translate } from 'react-polyglot';
+import { Loader, lengths } from 'decap-cms-ui-default';
+
+import EntryListing from './EntryListing';
+
+const PaginationMessage = styled.div`
+  width: ${lengths.topCardWidth};
+  padding: 16px;
+  text-align: center;
+`;
+
+const NoEntriesMessage = styled(PaginationMessage)`
+  margin-top: 16px;
+`;
+
+function Entries({
+  collections,
+  entries,
+  isFetching,
+  viewStyle,
+  cursor,
+  handleCursorActions,
+  t,
+  page,
+  getWorkflowStatus,
+  getUnpublishedEntries,
+  filterTerm,
+}) {
+  const loadingMessages = [
+    t('collection.entries.loadingEntries'),
+    t('collection.entries.cachingEntries'),
+    t('collection.entries.longerLoading'),
+  ];
+
+  if (isFetching && page === undefined) {
+    return <Loader active>{loadingMessages}</Loader>;
+  }
+
+  const hasEntries = (entries && entries.size > 0) || cursor?.actions?.has('append_next');
+  if (hasEntries) {
+    return (
+      <>
+        <EntryListing
+          collections={collections}
+          entries={entries}
+          viewStyle={viewStyle}
+          cursor={cursor}
+          handleCursorActions={handleCursorActions}
+          page={page}
+          getWorkflowStatus={getWorkflowStatus}
+          getUnpublishedEntries={getUnpublishedEntries}
+          filterTerm={filterTerm}
+        />
+        {isFetching && page !== undefined && entries.size > 0 ? (
+          <PaginationMessage>{t('collection.entries.loadingEntries')}</PaginationMessage>
+        ) : null}
+      </>
+    );
+  }
+
+  return <NoEntriesMessage>{t('collection.entries.noEntries')}</NoEntriesMessage>;
+}
+
+Entries.propTypes = {
+  collections: ImmutablePropTypes.iterable.isRequired,
+  entries: ImmutablePropTypes.list,
+  page: PropTypes.number,
+  isFetching: PropTypes.bool,
+  viewStyle: PropTypes.string,
+  cursor: PropTypes.any.isRequired,
+  handleCursorActions: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+  getWorkflowStatus: PropTypes.func,
+  getUnpublishedEntries: PropTypes.func,
+  filterTerm: PropTypes.string,
+};
+
+export default translate()(Entries);