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

package/admin/src/content-manager/components/Wysiwyg/utils/continueList.js

@@ -0,0 +1,111 @@
+import CodeMirror from 'codemirror';
+
+// Disabling eslint on purpose
+/* eslint-disable */
+
+var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/,
+  emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/,
+  unorderedListRE = /[*+-]\s/;
+
+/* 
+  functions coming from CodeMirror addons continuelist.js
+  ===> https://github.com/codemirror/CodeMirror/blob/master/addon/edit/continuelist.js 
+
+  we imported it because the way the addon ask to use markdown mode
+  since we have our own markdown preview system we couldn't use it directly
+  only thing we changed is removing the part that enabled addon only with markdown mode
+*/
+
+function newlineAndIndentContinueMarkdownList(cm) {
+  if (cm.getOption('disableInput')) return CodeMirror.Pass;
+  var ranges = cm.listSelections(),
+    replacements = [];
+  for (var i = 0; i < ranges.length; i++) {
+    var pos = ranges[i].head;
+
+    var eolState = cm.getStateAfter(pos.line);
+    var inList = eolState.list !== false;
+    var inQuote = eolState.quote !== 0;
+
+    var line = cm.getLine(pos.line),
+      match = listRE.exec(line);
+    var cursorBeforeBullet = /^\s*$/.test(line.slice(0, pos.ch));
+    if (!ranges[i].empty() || (!inList && !inQuote) || !match || cursorBeforeBullet) {
+      cm.execCommand('newlineAndIndent');
+      return;
+    }
+    if (emptyListRE.test(line)) {
+      var endOfQuote = inQuote && />\s*$/.test(line);
+      var endOfList = !/>\s*$/.test(line);
+      if (endOfQuote || endOfList)
+        cm.replaceRange(
+          '',
+          {
+            line: pos.line,
+            ch: 0,
+          },
+          {
+            line: pos.line,
+            ch: pos.ch + 1,
+          }
+        );
+      replacements[i] = '\n';
+    } else {
+      var indent = match[1],
+        after = match[5];
+      var numbered = !(unorderedListRE.test(match[2]) || match[2].indexOf('>') >= 0);
+      var bullet = numbered ? parseInt(match[3], 10) + 1 + match[4] : match[2].replace('x', ' ');
+      replacements[i] = '\n' + indent + bullet + after;
+
+      if (numbered) incrementRemainingMarkdownListNumbers(cm, pos);
+    }
+  }
+
+  cm.replaceSelections(replacements);
+}
+
+function incrementRemainingMarkdownListNumbers(cm, pos) {
+  var startLine = pos.line,
+    lookAhead = 0,
+    skipCount = 0;
+  var startItem = listRE.exec(cm.getLine(startLine)),
+    startIndent = startItem[1];
+
+  do {
+    lookAhead += 1;
+    var nextLineNumber = startLine + lookAhead;
+    var nextLine = cm.getLine(nextLineNumber);
+    var nextItem = listRE.exec(nextLine);
+
+    if (nextItem) {
+      var nextIndent = nextItem[1];
+      var newNumber = parseInt(startItem[3], 10) + lookAhead - skipCount;
+      var nextNumber = parseInt(nextItem[3], 10),
+        itemNumber = nextNumber;
+
+      if (startIndent === nextIndent && !isNaN(nextNumber)) {
+        if (newNumber === nextNumber) itemNumber = nextNumber + 1;
+        if (newNumber > nextNumber) itemNumber = newNumber + 1;
+        cm.replaceRange(
+          nextLine.replace(listRE, nextIndent + itemNumber + nextItem[4] + nextItem[5]),
+          {
+            line: nextLineNumber,
+            ch: 0,
+          },
+          {
+            line: nextLineNumber,
+            ch: nextLine.length,
+          }
+        );
+      } else {
+        if (startIndent.length > nextIndent.length) return;
+        // This doesn't run if the next line immediately indents, as it is
+        // not clear of the users intention (new indented item or same level)
+        if (startIndent.length < nextIndent.length && lookAhead === 1) return;
+        skipCount += 1;
+      }
+    }
+  } while (nextItem);
+}
+
+export default newlineAndIndentContinueMarkdownList;

package/admin/src/content-manager/components/Wysiwyg/utils/utils.js

@@ -0,0 +1,271 @@
+export const replaceText = (markdownName, textToChange) => {
+  let editedText;
+
+  switch (markdownName) {
+    case 'Strikethrough':
+      editedText = `~~${textToChange}~~`;
+      break;
+    case 'Bold':
+      editedText = `**${textToChange}**`;
+      break;
+    case 'Italic':
+      editedText = `_${textToChange}_`;
+      break;
+    case 'Underline':
+      editedText = `<u>${textToChange}</u>`;
+      break;
+    case 'Code':
+      editedText = `\`\`\`\n${textToChange}\n\`\`\``;
+      break;
+    case 'Link':
+      editedText = `[${textToChange}](link)`;
+      break;
+    case 'Quote':
+      editedText = `>${textToChange}`;
+      break;
+    default:
+      editedText = textToChange;
+  }
+
+  return editedText;
+};
+
+export const insertText = markdownName => {
+  let editedText;
+  // object to calculate text that will be selected after insert of markdown
+  let selection = { start: markdownName.length, end: 0 };
+
+  switch (markdownName) {
+    case 'Strikethrough':
+      editedText = `~~${markdownName}~~`;
+      selection.end = 2;
+      break;
+    case 'Bold':
+      editedText = `**${markdownName}**`;
+      selection.end = 2;
+      break;
+    case 'Italic':
+      editedText = `_${markdownName}_`;
+      selection.end = 1;
+      break;
+    case 'alt':
+      editedText = `[${markdownName}]()`;
+      selection.end = 3;
+      break;
+    case 'Underline':
+      editedText = `<u>${markdownName}</u>`;
+      selection.end = 4;
+      break;
+    case 'Code':
+      editedText = `\`\`\`\n${markdownName}\n\`\`\``;
+      selection.end = 3;
+      break;
+    case 'Link':
+      editedText = `[${markdownName}](link)`;
+      selection.end = 7;
+      break;
+    case 'Quote':
+      editedText = `>${markdownName}`;
+      selection.end = 0;
+      break;
+    default:
+      editedText = '';
+  }
+
+  return { editedText, selection };
+};
+
+export const insertListOrTitle = markdown => {
+  let textToInsert;
+
+  switch (markdown) {
+    case 'BulletList':
+      textToInsert = '- ';
+      break;
+    case 'NumberList':
+      textToInsert = '1. ';
+      break;
+    case 'h1':
+      textToInsert = '# ';
+      break;
+    case 'h2':
+      textToInsert = '## ';
+      break;
+    case 'h3':
+      textToInsert = '### ';
+      break;
+    case 'h4':
+      textToInsert = '#### ';
+      break;
+    case 'h5':
+      textToInsert = '##### ';
+      break;
+    case 'h6':
+      textToInsert = '###### ';
+      break;
+    default:
+      return '';
+  }
+
+  return textToInsert;
+};
+
+// EDITOR ACTIONS FUNCTIONS
+
+export const markdownHandler = (editor, markdownType) => {
+  const textToEdit = editor.current.getSelection();
+  let textToInsert;
+
+  if (textToEdit) {
+    const editedText = replaceText(markdownType, textToEdit);
+    editor.current.replaceSelection(editedText);
+    editor.current.focus();
+  } else {
+    textToInsert = insertText(markdownType);
+    editor.current.replaceSelection(textToInsert.editedText);
+    editor.current.focus();
+    // set selection-focus to text to replace with content
+    const { line, ch } = editor.current.getCursor();
+    const endSelection = ch - textToInsert.selection.end;
+    const startSelection = ch - textToInsert.selection.end - textToInsert.selection.start;
+    editor.current.setSelection({ line, ch: startSelection }, { line, ch: endSelection });
+  }
+};
+
+export const listHandler = (editor, listType) => {
+  let { line: currentLine } = editor.current.getCursor();
+  const listToInsert = insertListOrTitle(listType);
+  const lineContent = editor.current.getLine(currentLine);
+
+  const textToInsert = listToInsert + lineContent;
+  editor.current.setSelection(
+    { line: currentLine, ch: 0 },
+    { line: currentLine, ch: lineContent.length }
+  );
+  editor.current.replaceSelection(textToInsert);
+  editor.current.focus();
+};
+
+export const titleHandler = (editor, titleType) => {
+  let { line: currentLine } = editor.current.getCursor();
+  const titleToInsert = insertListOrTitle(titleType);
+  const lineContent = editor.current.getLine(currentLine);
+
+  // replace hashtags followed by a space in case user want to change the type of title
+  const lineWithNoTitle = lineContent.replace(/#{1,6}\s/g, '').trim();
+
+  const textToInsert = titleToInsert + lineWithNoTitle;
+  editor.current.setSelection(
+    { line: currentLine, ch: 0 },
+    { line: currentLine, ch: lineContent.length }
+  );
+  editor.current.replaceSelection(textToInsert);
+  setTimeout(() => editor.current.focus(), 0);
+};
+
+export const insertImage = (editor, files) => {
+  let { line, ch } = editor.current.getCursor();
+
+  files.forEach((file, i) => {
+    let contentLength = editor.current.getLine(line).length;
+    editor.current.setCursor({ line, ch: contentLength });
+    // create a new line after first image markdown inserted
+    // or if there is content in current line
+
+    if (i > 0 || (i === 0 && ch !== 0)) {
+      contentLength = editor.current.getLine(line).length;
+      editor.current.setCursor({ line, ch: contentLength });
+      line++;
+      editor.current.replaceSelection('\n');
+    }
+    editor.current.replaceSelection(`[${file.alt}](${file.url})`);
+  });
+
+  setTimeout(() => editor.current.focus(), 0);
+};
+
+// NEXT FUNCTIONS FOR QUOTE OR CODE MARKDOWN
+
+const insertWithTextToEdit = (editor, markdownType, line, contentLength, textToEdit) => {
+  const textToInsert = replaceText(markdownType, textToEdit);
+
+  // remove content after current line
+  const contentToMove = editor.current.getRange(
+    { line: line + 1, ch: 0 },
+    { line: Infinity, ch: Infinity }
+  );
+  editor.current.replaceRange('', { line: line + 1, ch: 0 }, { line: Infinity, ch: Infinity });
+
+  // remove word that was selected
+  // set cursor end of line + move to next line
+  // add text to insert
+  editor.current.replaceSelection('');
+  editor.current.setCursor({ line, ch: contentLength });
+  editor.current.replaceSelection('\n');
+  editor.current.replaceSelection(textToInsert);
+
+  if (markdownType === 'Code') {
+    let { line: newLine } = editor.current.getCursor();
+    editor.current.setCursor({ line: newLine - 1, ch: textToEdit.length });
+  }
+
+  // add content we had to remove earlier
+  editor.current.replaceRange(
+    contentToMove,
+    { line: line + 4, ch: 0 },
+    { line: Infinity, ch: Infinity }
+  );
+
+  editor.current.focus();
+};
+
+const insertWithoutTextToEdit = (editor, markdownType, line, contentLength) => {
+  const textToInsert = insertText(markdownType);
+
+  // remove content after current line
+  const contentToMove = editor.current.getRange(
+    { line: line + 1, ch: 0 },
+    { line: Infinity, ch: Infinity }
+  );
+  editor.current.replaceRange('', { line: line + 1, ch: 0 }, { line: Infinity, ch: Infinity });
+
+  // replace cursor to next line
+  editor.current.setCursor({ line, ch: contentLength });
+  editor.current.replaceSelection('\n');
+  editor.current.replaceSelection(textToInsert.editedText);
+
+  // set selection on "Code" or "Quote" word
+
+  if (markdownType === 'Code') {
+    line += 2;
+
+    editor.current.setSelection({ line, ch: 0 }, { line, ch: 4 });
+  } else {
+    line += 1;
+
+    let { ch } = editor.current.getCursor();
+    let endSelection = ch - textToInsert.selection.end;
+    let startSelection = ch - textToInsert.selection.end - textToInsert.selection.start;
+    editor.current.setSelection({ line, ch: startSelection }, { line, ch: endSelection });
+  }
+
+  // add content we had to remove earlier
+  editor.current.replaceRange(
+    contentToMove,
+    { line: line + 2, ch: 0 },
+    { line: Infinity, ch: Infinity }
+  );
+  editor.current.focus();
+};
+
+export const quoteAndCodeHandler = (editor, markdownType) => {
+  const textToEdit = editor.current.getSelection();
+  let { line } = editor.current.getCursor();
+  let contentLength = editor.current.getLine(line).length;
+
+  if (textToEdit) {
+    insertWithTextToEdit(editor, markdownType, line, contentLength, textToEdit);
+  } else {
+    insertWithoutTextToEdit(editor, markdownType, line, contentLength);
+  }
+};

package/admin/src/content-manager/contexts/index.js

@@ -1,4 +1,3 @@
 export { default as ContentTypeLayoutContext } from './ContentTypeLayout';
 export { default as LayoutDndContext } from './LayoutDnd';
-export { default as ListViewContext } from './ListView';
 export { default as WysiwygContext } from './Wysiwyg';

package/admin/src/content-manager/hooks/index.js

@@ -2,7 +2,6 @@ export { default as useContentTypeLayout } from './useContentTypeLayout';
 export { default as useFetchContentTypeLayout } from './useFetchContentTypeLayout';
 export { default as useFindRedirectionLink } from './useFindRedirectionLink';
 export { default as useLayoutDnd } from './useLayoutDnd';
-export { default as useListView } from './useListView';
 export { default as usePluginsQueryParams } from './usePluginsQueryParams';
 export { default as useSyncRbac } from './useSyncRbac';
 export { default as useWysiwyg } from './useWysiwyg';

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -4,54 +4,123 @@
  *
  */
 
-import React, { useMemo } from 'react';
-import { LeftMenuList, colors, sizes } from '@strapi/helper-plugin';
-import styled from 'styled-components';
+import React, { useMemo, useState } from 'react';
+import {
+  SubNav,
+  SubNavHeader,
+  SubNavSection,
+  SubNavSections,
+  SubNavLink,
+} from '@strapi/parts/SubNav';
 import { useSelector, shallowEqual } from 'react-redux';
+import { useIntl } from 'react-intl';
+import matchSorter from 'match-sorter';
+import sortBy from 'lodash/sortBy';
+import toLower from 'lodash/toLower';
 import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';
 
-const Wrapper = styled.div`
-  width: 100%;
-  min-height: calc(100vh - ${sizes.header.height});
-  background-color: ${colors.leftMenu.mediumGrey};
-  padding-top: 3.1rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-`;
+const matchByTitle = (links, search) =>
+  matchSorter(links, toLower(search), { keys: [item => toLower(item.title)] });
 
 const LeftMenu = () => {
+  const [search, setSearch] = useState('');
+  const { formatMessage } = useIntl();
   const modelLinksSelector = useMemo(makeSelectModelLinks, []);
   const { collectionTypeLinks, singleTypeLinks } = useSelector(
     state => modelLinksSelector(state),
     shallowEqual
   );
 
-  const data = [
+  const toIntl = links =>
+    links.map(link => {
+      return {
+        ...link,
+        title: formatMessage({ id: link.title, defaultMessage: link.title }),
+      };
+    });
+
+  const intlCollectionTypeLinks = toIntl(
+    collectionTypeLinks.filter(({ isDisplayed }) => isDisplayed)
+  );
+  const intlSingleTypeLinks = toIntl(singleTypeLinks.filter(({ isDisplayed }) => isDisplayed));
+
+  const menu = [
     {
-      name: 'models',
+      id: 'collectionTypes',
       title: {
-        id: getTrad('components.LeftMenu.collection-types.'),
+        id: getTrad('components.LeftMenu.collection-types'),
+        defaultMessage:
+          '{number, plural, =0 {Collection Types} one {Collection Type } other {Collection Types}}',
+        values: { number: intlCollectionTypeLinks.length },
       },
       searchable: true,
-      links: collectionTypeLinks,
+      links: sortBy(matchByTitle(intlCollectionTypeLinks, search), 'title'),
     },
     {
-      name: 'singleTypes',
+      id: 'singleTypes',
       title: {
-        id: getTrad('components.LeftMenu.single-types.'),
+        id: getTrad('components.LeftMenu.single-types'),
+        defaultMessage:
+          '{number, plural, =0 {Single Types} one {Single Type } other {Single Types}}',
+        values: { number: intlSingleTypeLinks.length },
       },
       searchable: true,
-      links: singleTypeLinks,
+      links: sortBy(matchByTitle(intlSingleTypeLinks, search), 'title'),
     },
   ];
 
+  const handleClear = () => {
+    setSearch('');
+  };
+
+  const handleChangeSearch = ({ target: { value } }) => {
+    setSearch(value);
+  };
+
+  const label = formatMessage({
+    id: getTrad('header.name'),
+    defaultMessage: 'Content',
+  });
+
   return (
-    <Wrapper className="col-md-3">
-      {data.map(list => {
-        return <LeftMenuList {...list} key={list.name} />;
-      })}
-    </Wrapper>
+    <SubNav ariaLabel={label}>
+      <SubNavHeader
+        label={label}
+        searchable
+        value={search}
+        onChange={handleChangeSearch}
+        onClear={handleClear}
+        searchLabel={formatMessage({
+          id: 'content-manager.components.LeftMenu.Search.label',
+          defaultMessage: 'Search for a content type',
+        })}
+      />
+      <SubNavSections>
+        {menu.map(section => {
+          const label = formatMessage(
+            { id: section.title.id, defaultMessage: section.title.defaultMessage },
+            section.title.values
+          );
+
+          return (
+            <SubNavSection
+              key={section.id}
+              label={label}
+              badgeLabel={section.links.length.toString()}
+            >
+              {section.links.map(link => {
+                return (
+                  <SubNavLink key={link.uid} to={`${link.to}?${link.search}`}>
+                    {link.title}
+                  </SubNavLink>
+                );
+              })}
+            </SubNavSection>
+          );
+        })}
+      </SubNavSections>
+    </SubNav>
   );
 };
 

package/admin/src/content-manager/pages/App/index.js

@@ -1,12 +1,18 @@
 import React from 'react';
 import { Switch, Route, useRouteMatch, Redirect, useLocation } from 'react-router-dom';
 import { CheckPagePermissions, LoadingIndicatorPage, NotFound } from '@strapi/helper-plugin';
+import { Layout, HeaderLayout } from '@strapi/parts/Layout';
+import { Main } from '@strapi/parts/Main';
+import { useIntl } from 'react-intl';
+import sortBy from 'lodash/sortBy';
 import permissions from '../../../permissions';
+import getTrad from '../../utils/getTrad';
 import DragLayer from '../../components/DragLayer';
 import ModelsContext from '../../contexts/ModelsContext';
 import CollectionTypeRecursivePath from '../CollectionTypeRecursivePath';
 import ComponentSettingsView from '../ComponentSetttingsView';
 import NoContentType from '../NoContentType';
+import NoPermissions from '../NoPermissions';
 import SingleTypeRecursivePath from '../SingleTypeRecursivePath';
 import LeftMenu from './LeftMenu';
 import useModels from './useModels';
@@ -16,11 +22,22 @@ const cmPermissions = permissions.contentManager;
 const App = () => {
   const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
   const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } = useModels();
-  const authorisedModels = [...collectionTypeLinks, ...singleTypeLinks];
+  const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], 'title');
   const { pathname } = useLocation();
+  const { formatMessage } = useIntl();
 
   if (status === 'loading') {
-    return <LoadingIndicatorPage />;
+    return (
+      <Main aria-busy="true">
+        <HeaderLayout
+          title={formatMessage({
+            id: getTrad('header.name'),
+            defaultMessage: 'Content',
+          })}
+        />
+        <LoadingIndicatorPage />
+      </Main>
+    );
   }
 
   // Redirect the user to the 403 page
@@ -45,43 +62,31 @@ const App = () => {
   }
 
   return (
-    <>
+    <Layout sideNav={<LeftMenu />}>
       <DragLayer />
       <ModelsContext.Provider value={{ refetchData }}>
-        <div className="container-fluid">
-          <div className="row">
-            <LeftMenu />
-            <div className="col-md-9" style={{ padding: 0 }}>
-              <Switch>
-                <Route path="/content-manager/components/:uid/configurations/edit">
-                  <CheckPagePermissions permissions={cmPermissions.componentsConfigurations}>
-                    <ComponentSettingsView />
-                  </CheckPagePermissions>
-                </Route>
-                <Route
-                  path="/content-manager/collectionType/:slug"
-                  component={CollectionTypeRecursivePath}
-                />
-                <Route
-                  path="/content-manager/singleType/:slug"
-                  component={SingleTypeRecursivePath}
-                />
+        <Switch>
+          <Route path="/content-manager/components/:uid/configurations/edit">
+            <CheckPagePermissions permissions={cmPermissions.componentsConfigurations}>
+              <ComponentSettingsView />
+            </CheckPagePermissions>
+          </Route>
+          <Route
+            path="/content-manager/collectionType/:slug"
+            component={CollectionTypeRecursivePath}
+          />
+          <Route path="/content-manager/singleType/:slug" component={SingleTypeRecursivePath} />
 
-                {/* These pages must be defined */}
-                <Route
-                  path="/content-manager/403"
-                  render={() => <div>TBD No rights to see the content types</div>}
-                />
-                <Route path="/content-manager/no-content-types">
-                  <NoContentType />
-                </Route>
-                <Route path="" component={NotFound} />
-              </Switch>
-            </div>
-          </div>
-        </div>
+          <Route path="/content-manager/403">
+            <NoPermissions />
+          </Route>
+          <Route path="/content-manager/no-content-types">
+            <NoContentType />
+          </Route>
+          <Route path="" component={NotFound} />
+        </Switch>
       </ModelsContext.Provider>
-    </>
+    </Layout>
   );
 };
 

package/admin/src/content-manager/pages/App/useModels.js

@@ -1,10 +1,12 @@
 import { useNotification, useRBACProvider, useStrapiApp } from '@strapi/helper-plugin';
 import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useNotifyAT } from '@strapi/parts/LiveRegions';
 import axios from 'axios';
+import { useIntl } from 'react-intl';
 import { axiosInstance } from '../../../core/utils';
 import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';
-import { getRequestUrl } from '../../utils';
+import { getRequestUrl, getTrad } from '../../utils';
 import { getData, resetProps, setContentTypeLinks } from './actions';
 import { selectAppDomain } from './selectors';
 import getContentTypeLinks from './utils/getContentTypeLinks';
@@ -18,6 +20,8 @@ const useModels = () => {
   const { runHookWaterfall } = useStrapiApp();
   const CancelToken = axios.CancelToken;
   const source = CancelToken.source();
+  const { notifyStatus } = useNotifyAT();
+  const { formatMessage } = useIntl();
 
   const fetchData = async () => {
     dispatch(getData());
@@ -36,6 +40,13 @@ const useModels = () => {
         )
       );
 
+      notifyStatus(
+        formatMessage({
+          id: getTrad('App.schemas.data-loaded'),
+          defaultMessage: 'The schemas have been successfully loaded.',
+        })
+      );
+
       const { authorizedCtLinks, authorizedStLinks } = await getContentTypeLinks(
         models,
         allPermissions,