decap-cms-core 3.13.0 → 3.15.0

package/src/actions/entries.ts

@@ -1,9 +1,14 @@
-import { fromJS, List, Map } from 'immutable';
+import { fromJS, List, Map, Set } from 'immutable';
 import isEqual from 'lodash/isEqual';
 import { Cursor } from 'decap-cms-lib-util';
 
 import { selectCollectionEntriesCursor } from '../reducers/cursors';
-import { selectFields, updateFieldByKey, selectDefaultSortField } from '../reducers/collections';
+import {
+  selectFields,
+  selectField,
+  updateFieldByKey,
+  selectDefaultSortField,
+} from '../reducers/collections';
 import { selectIntegration, selectPublishedSlugs } from '../reducers';
 import { getIntegrationProvider } from '../integrations';
 import { currentBackend } from '../backend';
@@ -38,7 +43,6 @@ import type {
 import type { EntryValue } from '../valueObjects/Entry';
 import type { Backend } from '../backend';
 import type AssetProxy from '../valueObjects/AssetProxy';
-import type { Set } from 'immutable';
 
 /*
  * Constant Declarations
@@ -740,10 +744,21 @@ function getMetaFields(fields: EntryFields) {
 export function createEmptyDraft(collection: Collection, search: string) {
   return async (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
     const params = new URLSearchParams(search);
-    params.forEach((value, key) => {
-      collection = updateFieldByKey(collection, key, field =>
-        field.set('default', processValue(value)),
-      );
+    const uniqueKeys = Set([...params.keys()]).toArray();
+
+    uniqueKeys.forEach(key => {
+      const field = selectField(collection, key);
+      const isMultiple = field?.get('multiple', false);
+      const values = params.getAll(key);
+
+      collection = updateFieldByKey(collection, key, field => {
+        if (isMultiple) {
+          const allValues = values.flatMap(v => v.split(',')).map(processValue);
+          return field.set('default', List(allValues));
+        } else {
+          return field.set('default', processValue(values[values.length - 1]));
+        }
+      });
     });
 
     const fields = collection.get('fields', List());

package/src/backend.ts

@@ -1184,6 +1184,7 @@ export class Backend {
     );
 
     const collectionName = collection.get('name');
+    const hasSubfolders = collection.get('nested')?.get('subfolders') !== false;
 
     const updatedOptions = { unpublished, status };
     const opts = {
@@ -1191,6 +1192,7 @@ export class Backend {
       commitMessage,
       collectionName,
       useWorkflow,
+      hasSubfolders,
       ...updatedOptions,
     };
 

package/src/components/App/App.js

@@ -32,7 +32,6 @@ TopBarProgress.config({
 });
 
 const AppMainContainer = styled.div`
-  min-width: 800px;
   max-width: 1440px;
   margin: 0 auto;
 `;
@@ -156,6 +155,7 @@ class App extends React.Component {
       openMediaLibrary,
       t,
       showMediaButton,
+      location,
     } = this.props;
 
     if (config === null) {
@@ -177,22 +177,30 @@ class App extends React.Component {
     const defaultPath = getDefaultPath(collections);
     const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
 
+    // Work out if this is an editor route, following the same URL matching as the router.
+    // - /collections/:name/entries/*
+    // - /collections/:name/new
+    const [, base, , view] = location.pathname.split('/');
+    const isEditorRoute = base === 'collections' && (view === 'entries' || view === 'new');
+
     return (
       <>
         <Notifications />
-        <Header
-          user={user}
-          collections={collections}
-          onCreateEntryClick={createNewEntry}
-          onLogoutClick={logoutUser}
-          openMediaLibrary={openMediaLibrary}
-          hasWorkflow={hasWorkflow}
-          displayUrl={config.display_url}
-          logoUrl={config.logo_url} // Deprecated, replaced by `logo.src`
-          logo={config.logo}
-          isTestRepo={config.backend.name === 'test-repo'}
-          showMediaButton={showMediaButton}
-        />
+        {!isEditorRoute && (
+          <Header
+            user={user}
+            collections={collections}
+            onCreateEntryClick={createNewEntry}
+            onLogoutClick={logoutUser}
+            openMediaLibrary={openMediaLibrary}
+            hasWorkflow={hasWorkflow}
+            displayUrl={config.display_url}
+            logoUrl={config.logo_url} // Deprecated, replaced by `logo.src`
+            logo={config.logo}
+            isTestRepo={config.backend.name === 'test-repo'}
+            showMediaButton={showMediaButton}
+          />
+        )}
         <AppMainContainer>
           {isFetching && <TopBarProgress />}
           <Switch>

package/src/components/App/Header.js

@@ -11,7 +11,6 @@ import {
   DropdownItem,
   StyledDropdownButton,
   colors,
-  lengths,
   shadows,
   buttons,
   zIndex,
@@ -32,12 +31,14 @@ function AppHeader(props) {
     <header
       css={css`
         ${shadows.dropMain};
-        position: sticky;
         width: 100%;
-        top: 0;
         background-color: ${colors.foreground};
         z-index: ${zIndex.zIndex300};
-        height: ${lengths.topBarHeight};
+
+        @media (min-height: 500px) {
+          position: sticky;
+          top: 0;
+        }
       `}
       {...props}
     />
@@ -46,11 +47,15 @@ function AppHeader(props) {
 
 const AppHeaderContent = styled.div`
   display: flex;
-  justify-content: space-between;
-  min-width: 800px;
-  max-width: 1440px;
+  flex-direction: column-reverse;
   padding: 0 12px;
   margin: 0 auto;
+
+  @media (min-width: 800px) {
+    max-width: 1440px;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 `;
 
 const AppHeaderButton = styled.button`
@@ -58,14 +63,27 @@ const AppHeaderButton = styled.button`
   background: none;
   color: #7b8290;
   font-family: inherit;
-  font-size: 16px;
+  font-size: 13px;
+  line-height: 1;
   font-weight: 500;
   display: inline-flex;
-  padding: 16px 20px;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 10px 10px;
   align-items: center;
+  text-align: center;
+
+  @media (min-width: 400px) {
+    flex-direction: row;
+    gap: 4px;
+  }
+
+  @media (min-width: 500px) {
+    font-size: 16px;
+    padding: 16px 20px;
+  }
 
   ${Icon} {
-    margin-right: 4px;
     color: #b3b9c4;
   }
 
@@ -93,14 +111,16 @@ const AppHeaderButton = styled.button`
 const AppHeaderNavLink = AppHeaderButton.withComponent(NavLink);
 
 const AppHeaderActions = styled.div`
-  display: inline-flex;
+  display: flex;
   align-items: center;
+  justify-content: space-between;
 `;
 
 const AppHeaderQuickNewButton = styled(StyledDropdownButton)`
   ${buttons.button};
   ${buttons.medium};
   ${buttons.gray};
+  white-space: nowrap;
   margin-right: 8px;
 
   &:after {
@@ -112,6 +132,11 @@ const AppHeaderNavList = styled.ul`
   display: flex;
   margin: 0;
   list-style: none;
+  justify-content: space-around;
+
+  @media (min-width: 800px) {
+    justify-content: flex-start;
+  }
 `;
 
 const AppHeaderLogo = styled.li`

package/src/components/Collection/Collection.js

@@ -26,16 +26,23 @@ import {
 } from '../../reducers/entries';
 
 const CollectionContainer = styled.div`
-  margin: ${lengths.pageMargin};
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin: ${lengths.pageMarginMobile};
+  @media (min-width: 500px) {
+    margin: ${lengths.pageMargin};
+  }
 `;
 
 const CollectionMain = styled.main`
-  padding-left: 280px;
+  @media (min-width: 800px) {
+    padding-left: 280px;
+  }
 `;
 
 const SearchResultContainer = styled.div`
   ${components.cardTop};
-  margin-bottom: 22px;
 `;
 
 const SearchResultHeading = styled.h1`

package/src/components/Collection/CollectionControls.js

@@ -9,14 +9,15 @@ import GroupControl from './GroupControl';
 
 const CollectionControlsContainer = styled.div`
   display: flex;
+  flex-flow: row-reverse wrap;
   align-items: center;
-  flex-direction: row-reverse;
+  gap: 6px 0;
   margin-top: 22px;
   width: ${lengths.topCardWidth};
   max-width: 100%;
 
-  & > div {
-    margin-left: 6px;
+  @media (min-width: 500px) {
+    gap: 6px;
   }
 `;
 

package/src/components/Collection/CollectionTop.js

@@ -8,11 +8,12 @@ import { components, buttons, shadows } from 'decap-cms-ui-default';
 
 const CollectionTopContainer = styled.div`
   ${components.cardTop};
-  margin-bottom: 22px;
 `;
 
 const CollectionTopRow = styled.div`
   display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
 `;
@@ -26,13 +27,13 @@ const CollectionTopNewButton = styled(Link)`
   ${shadows.dropDeep};
   ${buttons.default};
   ${buttons.gray};
+  white-space: nowrap;
 
   padding: 0 30px;
 `;
 
 const CollectionTopDescription = styled.p`
   ${components.cardTopDescription};
-  margin-bottom: 0;
 `;
 
 function getCollectionProps(collection) {

package/src/components/Collection/ControlButton.js

@@ -8,6 +8,7 @@ const Button = styled(StyledDropdownButton)`
   ${buttons.medium};
   ${buttons.grayText};
   font-size: 14px;
+  white-space: nowrap;
 
   &:after {
     top: 11px;

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

@@ -9,6 +9,7 @@ import EntryListing from './EntryListing';
 
 const PaginationMessage = styled.div`
   width: ${lengths.topCardWidth};
+  max-width: 100%;
   padding: 16px;
   text-align: center;
 `;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -86,7 +86,7 @@ const CardBody = styled.div`
   }
 `;
 
-const CardImage = styled.div`
+const StyledImage = styled.div`
   background-image: url(${props => props.src});
   background-position: center center;
   background-size: cover;
@@ -131,6 +131,16 @@ const WorkflowBadge = styled.span`
   }};
 `;
 
+function CardImage({ getAsset, value, field }) {
+  const [asset, setAsset] = useState(null);
+
+  useEffect(() => {
+    setAsset(value ? getAsset(value, field) : null);
+  }, [value, field, getAsset]);
+
+  return asset ? <StyledImage src={asset.toString()} /> : null;
+}
+
 function EntryCard({
   path,
   summary,
@@ -192,7 +202,7 @@ function EntryCard({
               </TitleIcons>
             </CardHeading>
           </CardBody>
-          {image ? <CardImage src={getAsset(image, imageField).toString()} /> : null}
+          {image ? <CardImage getAsset={getAsset} value={image} field={imageField} /> : null}
         </GridCardLink>
       </GridCard>
     );

package/src/components/Collection/NestedCollection.js

@@ -67,18 +67,25 @@ const TreeNavLink = styled(NavLink)`
   `};
 `;
 
-function getNodeTitle(node) {
-  const title = node.isRoot
-    ? node.title
-    : node.children.find(c => !c.isDir && c.title)?.title || node.title;
-  return title;
+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, getNodeTitle);
+  const sortedData = sortBy(treeData, node => getNodeTitle(node, collection));
   const subfolders = collection.get('nested')?.get('subfolders') !== false;
   return sortedData.map(node => {
     const leaf =
@@ -93,7 +100,7 @@ function TreeNode(props) {
     if (depth > 0) {
       to = `${to}/filter${node.path}`;
     }
-    const title = getNodeTitle(node);
+    const title = getNodeTitle(node, collection);
 
     const hasChildren =
       depth === 0 ||

package/src/components/Collection/Sidebar.js

@@ -5,7 +5,7 @@ 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 { Icon, components, colors, lengths } from 'decap-cms-ui-default';
 
 import { searchCollections } from '../../actions/collections';
 import CollectionSearch from './CollectionSearch';
@@ -21,19 +21,20 @@ const styles = {
 
 const SidebarContainer = styled.aside`
   ${components.card};
-  width: 250px;
+  width: ${lengths.topCardWidth};
+  max-width: 100%;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: flex;
   flex-direction: column;
+  @media (min-width: 800px) {
+    position: fixed;
+    width: 250px;
+  }
 `;
 
 const SidebarHeading = styled.h2`
-  font-size: 22px;
-  font-weight: 600;
-  line-height: 37px;
-  padding: 0;
+  ${components.cardTopHeading};
   margin: 10px 20px;
   color: ${colors.textLead};
 `;

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

@@ -38,7 +38,7 @@ describe('NestedCollection', () => {
     folder: 'src/pages',
     fields: [{ name: 'title', widget: 'string' }],
     nested: {
-      subfolders: false,
+      subfolders: true,
     },
   });
 

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

@@ -3,11 +3,27 @@
 exports[`Collection should render connected component 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 20px;
+  margin: 12px 8px;
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 500px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
@@ -45,11 +61,27 @@ exports[`Collection should render connected component 1`] = `
 exports[`Collection should render with collection with create url 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 20px;
+  margin: 12px 8px;
+}
+
+@media (min-width: 500px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
@@ -78,11 +110,27 @@ exports[`Collection should render with collection with create url 1`] = `
 exports[`Collection should render with collection with create url and path 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 20px;
+  margin: 12px 8px;
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 500px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
@@ -113,11 +161,27 @@ exports[`Collection should render with collection with create url and path 1`] =
 exports[`Collection should render with collection without create url 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 20px;
+  margin: 12px 8px;
+}
+
+@media (min-width: 500px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div