@strapi/admin 4.2.0-beta.3 → 4.3.0-beta.1

package/server/routes/admin.js

@@ -7,6 +7,34 @@ module.exports = [
     handler: 'admin.init',
     config: { auth: false },
   },
+  {
+    method: 'GET',
+    path: '/project-settings',
+    handler: 'admin.getProjectSettings',
+    config: {
+      policies: [
+        'admin::isAuthenticatedAdmin',
+        {
+          name: 'admin::hasPermissions',
+          config: { actions: ['admin::project-settings.read'] },
+        },
+      ],
+    },
+  },
+  {
+    method: 'POST',
+    path: '/project-settings',
+    handler: 'admin.updateProjectSettings',
+    config: {
+      policies: [
+        'admin::isAuthenticatedAdmin',
+        {
+          name: 'admin::hasPermissions',
+          config: { actions: ['admin::project-settings.update'] },
+        },
+      ],
+    },
+  },
   {
     method: 'GET',
     path: '/project-type',
@@ -27,7 +55,6 @@ module.exports = [
     handler: 'admin.telemetryProperties',
     config: {
       auth: false,
-      policies: ['admin::isTelemetryEnabled'],
     },
   },
   {

package/server/services/index.js

@@ -13,4 +13,5 @@ module.exports = {
   auth: require('./auth'),
   action: require('./action'),
   'api-token': require('./api-token'),
+  'project-settings': require('./project-settings'),
 };

package/server/services/project-settings.js

@@ -0,0 +1,173 @@
+'use strict';
+
+const fs = require('fs');
+const { pick } = require('lodash');
+
+const PROJECT_SETTINGS_FILE_INPUTS = ['menuLogo'];
+const DEFAULT_PROJECT_SETTINGS = {
+  menuLogo: null,
+};
+
+const parseFilesData = async files => {
+  const formatedFilesData = {};
+
+  await Promise.all(
+    PROJECT_SETTINGS_FILE_INPUTS.map(async inputName => {
+      const file = files[inputName];
+
+      // Skip empty file inputs
+      if (!file) {
+        return;
+      }
+
+      const getStream = () => fs.createReadStream(file.path);
+
+      // Add formated data for the upload provider
+      formatedFilesData[inputName] = strapi
+        .plugin('upload')
+        .service('upload')
+        .formatFileInfo({
+          filename: file.name,
+          type: file.type,
+          size: file.size,
+        });
+
+      // Add image dimensions
+      Object.assign(
+        formatedFilesData[inputName],
+        await strapi
+          .plugin('upload')
+          .service('image-manipulation')
+          .getDimensions({ getStream })
+      );
+
+      // Add file path, and stream
+      Object.assign(formatedFilesData[inputName], {
+        stream: getStream(),
+        tmpPath: file.path,
+        provider: strapi.config.get('plugin.upload').provider,
+      });
+    })
+  );
+
+  return formatedFilesData;
+};
+
+const getProjectSettings = async () => {
+  const store = strapi.store({ type: 'core', name: 'admin' });
+  const projectSettings = {
+    ...DEFAULT_PROJECT_SETTINGS,
+    ...(await store.get({ key: 'project-settings' })),
+  };
+
+  // Filter file input fields
+  PROJECT_SETTINGS_FILE_INPUTS.forEach(inputName => {
+    if (!projectSettings[inputName]) {
+      return;
+    }
+
+    projectSettings[inputName] = pick(projectSettings[inputName], [
+      'name',
+      'url',
+      'width',
+      'height',
+      'ext',
+      'size',
+    ]);
+  });
+
+  return projectSettings;
+};
+
+const uploadFiles = async (files = {}) => {
+  // Call the provider upload function for each file
+  return Promise.all(
+    Object.values(files)
+      .filter(file => file.stream instanceof fs.ReadStream)
+      .map(file => strapi.plugin('upload').provider.uploadStream(file))
+  );
+};
+
+const deleteOldFiles = async ({ previousSettings, newSettings }) => {
+  return Promise.all(
+    PROJECT_SETTINGS_FILE_INPUTS.map(async inputName => {
+      // Skip if the store doesn't contain project settings
+      if (!previousSettings) {
+        return;
+      }
+
+      // Skip if there was no previous file
+      if (!previousSettings[inputName]) {
+        return;
+      }
+
+      // Skip if the file was not changed
+      if (
+        newSettings[inputName] &&
+        previousSettings[inputName].hash === newSettings[inputName].hash
+      ) {
+        return;
+      }
+
+      // Skip if the file was not uploaded with the current provider
+      if (strapi.config.get('plugin.upload').provider !== previousSettings[inputName].provider) {
+        return;
+      }
+
+      // There was a previous file and an new file was uploaded
+      // Remove the previous file
+      strapi.plugin('upload').provider.delete(previousSettings[inputName]);
+    })
+  );
+};
+
+const updateProjectSettings = async newSettings => {
+  const store = strapi.store({ type: 'core', name: 'admin' });
+  const previousSettings = await store.get({ key: 'project-settings' });
+  const files = pick(newSettings, PROJECT_SETTINGS_FILE_INPUTS);
+
+  await uploadFiles(files);
+
+  PROJECT_SETTINGS_FILE_INPUTS.forEach(inputName => {
+    // If the user input exists but is not a formdata "file" remove it
+    if (newSettings[inputName] !== undefined && !(typeof newSettings[inputName] === 'object')) {
+      newSettings[inputName] = null;
+      return;
+    }
+
+    // If the user input is undefined reuse previous setting (do not update field)
+    if (!newSettings[inputName]) {
+      newSettings[inputName] = previousSettings[inputName];
+      return;
+    }
+
+    // Update the file
+    newSettings[inputName] = pick(newSettings[inputName], [
+      'name',
+      'hash',
+      'url',
+      'width',
+      'height',
+      'ext',
+      'size',
+      'provider',
+    ]);
+  });
+
+  // No await to proceed asynchronously
+  deleteOldFiles({ previousSettings, newSettings });
+
+  await store.set({
+    key: 'project-settings',
+    value: { ...previousSettings, ...newSettings },
+  });
+
+  return getProjectSettings();
+};
+
+module.exports = {
+  deleteOldFiles,
+  parseFilesData,
+  getProjectSettings,
+  updateProjectSettings,
+};

package/server/utils/index.d.ts

@@ -6,6 +6,7 @@ import * as metrics from '../services/metrics';
 import * as token from '../services/token';
 import * as auth from '../services/auth';
 import * as apiToken from '../services/api-token';
+import * as projectSettings from '../services/project-settings';
 
 type S = {
   role: typeof role;
@@ -16,6 +17,7 @@ type S = {
   auth: typeof auth;
   metrics: typeof metrics;
   'api-token': typeof apiToken;
+  'project-settings': typeof projectSettings;
 };
 
 export function getService<T extends keyof S>(name: T): S[T];

package/server/validation/project-settings.js

@@ -0,0 +1,39 @@
+'use strict';
+
+const { yup, validateYupSchemaSync } = require('@strapi/utils');
+
+const MAX_IMAGE_WIDTH = 750;
+const MAX_IMAGE_HEIGHT = MAX_IMAGE_WIDTH;
+const MAX_IMAGE_FILE_SIZE = 1024 * 1024; // 1Mo
+const ALLOWED_IMAGE_FILE_TYPES = ['image/jpeg', 'image/png', 'image/svg+xml'];
+
+const updateProjectSettings = yup
+  .object({
+    menuLogo: yup.string(),
+  })
+  .noUnknown();
+
+const updateProjectSettingsFiles = yup
+  .object({
+    menuLogo: yup.object({
+      name: yup.string(),
+      type: yup.string().oneOf(ALLOWED_IMAGE_FILE_TYPES),
+      size: yup.number().max(MAX_IMAGE_FILE_SIZE),
+    }),
+  })
+  .noUnknown();
+
+const updateProjectSettingsImagesDimensions = yup.object({
+  menuLogo: yup.object({
+    width: yup.number().max(MAX_IMAGE_WIDTH),
+    height: yup.number().max(MAX_IMAGE_HEIGHT),
+  }),
+});
+
+module.exports = {
+  validateUpdateProjectSettings: validateYupSchemaSync(updateProjectSettings),
+  validateUpdateProjectSettingsFiles: validateYupSchemaSync(updateProjectSettingsFiles),
+  validateUpdateProjectSettingsImagesDimensions: validateYupSchemaSync(
+    updateProjectSettingsImagesDimensions
+  ),
+};

package/utils/create-cache-dir.js

@@ -3,7 +3,7 @@
 const path = require('path');
 const _ = require('lodash');
 const fs = require('fs-extra');
-const { isUsingTypeScript } = require('@strapi/typescript-utils');
+const tsUtils = require('@strapi/typescript-utils');
 const getCustomAppConfigFile = require('./get-custom-app-config-file');
 
 const getPkgPath = name => path.dirname(require.resolve(`${name}/package.json`));
@@ -71,7 +71,10 @@ async function copyAdmin(dest) {
 async function createCacheDir({ appDir, plugins }) {
   const cacheDir = path.resolve(appDir, '.cache');
 
-  const useTypeScript = await isUsingTypeScript(path.join(appDir, 'src', 'admin'), 'tsconfig.json');
+  const useTypeScript = await tsUtils.isUsingTypeScript(
+    path.join(appDir, 'src', 'admin'),
+    'tsconfig.json'
+  );
 
   const pluginsWithFront = Object.keys(plugins)
     .filter(pluginName => {
@@ -121,40 +124,7 @@ async function createCacheDir({ appDir, plugins }) {
 
   // create the tsconfig.json file so we can develop plugins in ts while being in a JS project
   if (!useTypeScript) {
-    await createTSConfigFile(cacheDir);
-  }
-}
-
-async function createTSConfigFile(dest) {
-  const tsConfig = {
-    compilerOptions: {
-      lib: ['es2019', 'es2020.promise', 'es2020.bigint', 'es2020.string', 'DOM'],
-      noImplicitAny: false,
-      module: 'es2020',
-      target: 'es5',
-      jsx: 'react',
-      allowJs: true,
-      strict: true,
-      moduleResolution: 'node',
-      skipLibCheck: true,
-      esModuleInterop: true,
-      allowSyntheticDefaultImports: true,
-      resolveJsonModule: true,
-      noEmit: false,
-      incremental: true,
-    },
-    include: ['../../../src/admin/*', '../../../src/**/**/admin/src/*'],
-    exclude: ['node_modules', '**/*.test.js', '*.js'],
-  };
-
-  const filePath = path.join(dest, 'admin', 'src', 'tsconfig.json');
-
-  try {
-    await fs.ensureFile(filePath);
-
-    await fs.writeJSON(filePath, tsConfig, { spaces: 2 });
-  } catch (err) {
-    console.log(err);
+    await tsUtils.admin.createTSConfigFile(cacheDir);
   }
 }
 

package/utils/get-custom-app-config-file.js

@@ -15,9 +15,14 @@ const getCustomAppConfigFile = async dir => {
 
   const files = await fse.readdir(adminSrcPath);
 
-  const appRegex = new RegExp(`app.${useTypeScript ? 't' : 'j'}sx?$`);
+  const appJsx = files.find(file => /^app.jsx?$/.test(file));
+  const appTsx = files.find(file => /^app.tsx?$/.test(file));
 
-  return files.find(file => file.match(appRegex));
+  if (useTypeScript) {
+    return appTsx || appJsx;
+  }
+
+  return appJsx;
 };
 
 module.exports = getCustomAppConfigFile;

package/utils/get-plugins-path.js

@@ -2,9 +2,9 @@
 
 const { join, resolve } = require('path');
 const fs = require('fs-extra');
-// eslint-disable-next-line node/no-extraneous-require
 const glob = require('glob');
 
+// Only for dev environement
 const getPluginsPath = () => {
   const rootPath = resolve(__dirname, '..', join('..', '..', '..', 'packages'));
   const corePath = join(rootPath, 'core', '*');

package/admin/src/content-manager/components/SelectWrapper/ClearIndicator.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import Cross from '@strapi/icons/Cross';
-import IconBox from './IconBox';
-
-const ClearIndicator = props => {
-  const Component = components.ClearIndicator;
-
-  return (
-    <Component {...props}>
-      <IconBox as="button" type="button">
-        <Cross />
-      </IconBox>
-    </Component>
-  );
-};
-
-export default ClearIndicator;

package/admin/src/content-manager/components/SelectWrapper/DropdownIndicator.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import CarretDown from '@strapi/icons/CarretDown';
-import IconBox from './IconBox';
-
-export const CarretBox = styled(IconBox)`
-  display: flex;
-  background: none;
-  border: none;
-
-  svg {
-    width: ${6 / 16}rem;
-  }
-`;
-
-const DropdownIndicator = () => {
-  return (
-    <CarretBox as="button" type="button" paddingRight={3}>
-      <CarretDown />
-    </CarretBox>
-  );
-};
-
-export default DropdownIndicator;

package/admin/src/content-manager/components/SelectWrapper/IconBox.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-
-export const IconBox = styled(Box)`
-  background: transparent;
-  border: none;
-  position: relative;
-  z-index: 1;
-
-  svg {
-    height: ${11 / 16}rem;
-    width: ${11 / 16}rem;
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-
-export default IconBox;

package/admin/src/content-manager/components/SelectWrapper/IndicatorSeparator.js

@@ -1,3 +0,0 @@
-const IndicatorSeparator = () => null;
-
-export default IndicatorSeparator;

package/admin/src/content-manager/components/SelectWrapper/utils/getSelectStyles.js

@@ -1,92 +0,0 @@
-const getSelectStyles = theme => {
-  return {
-    clearIndicator: base => ({ ...base, padding: 0, paddingRight: theme.spaces[3] }),
-    container: base => ({
-      ...base,
-      background: theme.colors.neutral0,
-      fontFamily: 'Arial',
-      lineHeight: 'normal',
-    }),
-    control: (base, state) => {
-      let border;
-      let borderBottom;
-      let backgroundColor;
-
-      if (state.isFocused) {
-        border = `1px solid ${theme.colors.primary600} !important`;
-      } else {
-        border = `1px solid ${theme.colors.neutral200} !important`;
-      }
-
-      if (state.menuIsOpen === true) {
-        borderBottom = `1px solid ${theme.colors.primary600} !important`;
-      }
-
-      if (state.isDisabled) {
-        backgroundColor = '#fafafb !important';
-      }
-
-      return {
-        ...base,
-        fontSize: 14,
-        height: 40,
-        border,
-        outline: 0,
-        boxShadow: 0,
-        borderRadius: '2px !important',
-        borderBottom,
-        backgroundColor,
-        borderTopLeftRadius: '4px !important',
-        borderTopRightRadius: '4px !important',
-        borderBottomLeftRadius: '4px !important',
-        borderBottomRightRadius: '4px !important',
-      };
-    },
-    indicatorContainer: base => ({ ...base, padding: 0, paddingRight: theme.spaces[3] }),
-    input: base => ({ ...base, margin: 0, padding: 0, color: theme.colors.neutral800 }),
-    menu: base => {
-      return {
-        ...base,
-        width: '100%',
-        marginTop: theme.spaces[1],
-        backgroundColor: theme.colors.neutral0,
-        color: theme.colors.neutral800,
-        borderRadius: '4px !important',
-        borderTopLeftRadius: '4px !important',
-        borderTopRightRadius: '4px !important',
-        border: `1px solid ${theme.colors.neutral200} !important`,
-        boxShadow: 0,
-        fontSize: '14px',
-        fontFamily: 'Arial',
-        zIndex: 2,
-      };
-    },
-    menuList: base => ({
-      ...base,
-      paddingLeft: theme.spaces[1],
-      paddingTop: theme.spaces[1],
-      paddingRight: theme.spaces[1],
-      paddingBottom: theme.spaces[1],
-    }),
-    option: (base, state) => {
-      let backgroundColor = base.backgroundColor;
-
-      if (state.isFocused) {
-        backgroundColor = theme.colors.primary100;
-      }
-
-      return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
-    },
-    placeholder: base => ({ ...base, marginLeft: 0 }),
-    singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }),
-    valueContainer: base => ({
-      ...base,
-      padding: 0,
-      paddingLeft: theme.spaces[4],
-      marginLeft: 0,
-      marginRight: 0,
-    }),
-  };
-};
-
-export default getSelectStyles;