@strapi/admin 4.15.0 → 4.15.2

package/admin/src/StrapiApp.js

@@ -1,477 +0,0 @@
-import React from 'react';
-
-import { darkTheme, lightTheme } from '@strapi/design-system';
-import invariant from 'invariant';
-import isFunction from 'lodash/isFunction';
-import merge from 'lodash/merge';
-import pick from 'lodash/pick';
-import { Helmet } from 'react-helmet';
-import { BrowserRouter } from 'react-router-dom';
-
-import Logo from './assets/images/logo-strapi-2022.svg';
-import { LANGUAGE_LOCAL_STORAGE_KEY } from './components/LanguageProvider';
-import { Providers } from './components/Providers';
-import { HOOKS, INJECTION_ZONES } from './constants';
-import { customFields, Plugin, Reducers } from './core/apis';
-import { configureStore } from './core/store/configure';
-import { basename, createHook } from './core/utils';
-import favicon from './favicon.png';
-import App from './pages/App';
-import languageNativeNames from './translations/languageNativeNames';
-
-const {
-  INJECT_COLUMN_IN_TABLE,
-  MUTATE_COLLECTION_TYPES_LINKS,
-  MUTATE_EDIT_VIEW_LAYOUT,
-  MUTATE_SINGLE_TYPES_LINKS,
-} = HOOKS;
-
-class StrapiApp {
-  constructor({ adminConfig, appPlugins, library, middlewares }) {
-    this.customConfigurations = adminConfig.config;
-    this.customBootstrapConfiguration = adminConfig.bootstrap;
-    this.configurations = {
-      authLogo: Logo,
-      head: { favicon },
-      locales: ['en'],
-      menuLogo: Logo,
-      notifications: { releases: true },
-      themes: { light: lightTheme, dark: darkTheme },
-      translations: {},
-      tutorials: true,
-    };
-    this.appPlugins = appPlugins || {};
-    this.library = library;
-    this.middlewares = middlewares;
-    this.plugins = {};
-    this.reducers = Reducers({});
-    this.translations = {};
-    this.hooksDict = {};
-    this.admin = {
-      injectionZones: INJECTION_ZONES,
-    };
-    this.customFields = customFields;
-
-    this.menu = [];
-    this.settings = {
-      global: {
-        id: 'global',
-        intlLabel: {
-          id: 'Settings.global',
-          defaultMessage: 'Global Settings',
-        },
-        links: [],
-      },
-    };
-  }
-
-  addComponents = (components) => {
-    if (Array.isArray(components)) {
-      components.map((compo) => this.library.components.add(compo));
-    } else {
-      this.library.components.add(components);
-    }
-  };
-
-  addCorePluginMenuLink = (link) => {
-    const stringifiedLink = JSON.stringify(link);
-
-    invariant(link.to, `link.to should be defined for ${stringifiedLink}`);
-    invariant(
-      typeof link.to === 'string',
-      `Expected link.to to be a string instead received ${typeof link.to}`
-    );
-    invariant(
-      ['/plugins/content-type-builder', '/plugins/upload'].includes(link.to),
-      'This method is not available for your plugin'
-    );
-    invariant(
-      link.intlLabel?.id && link.intlLabel?.defaultMessage,
-      `link.intlLabel.id & link.intlLabel.defaultMessage for ${stringifiedLink}`
-    );
-
-    this.menu.push(link);
-  };
-
-  addFields = (fields) => {
-    if (Array.isArray(fields)) {
-      fields.map((field) => this.library.fields.add(field));
-    } else {
-      this.library.fields.add(fields);
-    }
-  };
-
-  addMenuLink = (link) => {
-    const stringifiedLink = JSON.stringify(link);
-
-    invariant(link.to, `link.to should be defined for ${stringifiedLink}`);
-    invariant(
-      typeof link.to === 'string',
-      `Expected link.to to be a string instead received ${typeof link.to}`
-    );
-    invariant(
-      link.intlLabel?.id && link.intlLabel?.defaultMessage,
-      `link.intlLabel.id & link.intlLabel.defaultMessage for ${stringifiedLink}`
-    );
-    invariant(
-      link.Component && typeof link.Component === 'function',
-      `link.Component should be a valid React Component`
-    );
-    invariant(
-      link.icon && typeof link.icon === 'function',
-      `link.Icon should be a valid React Component`
-    );
-
-    this.menu.push(link);
-  };
-
-  addMiddlewares = (middlewares) => {
-    middlewares.forEach((middleware) => {
-      this.middlewares.add(middleware);
-    });
-  };
-
-  addReducers = (reducers) => {
-    Object.keys(reducers).forEach((reducerName) => {
-      this.reducers.add(reducerName, reducers[reducerName]);
-    });
-  };
-
-  addSettingsLink = (sectionId, link) => {
-    invariant(this.settings[sectionId], 'The section does not exist');
-
-    const stringifiedLink = JSON.stringify(link);
-
-    invariant(link.id, `link.id should be defined for ${stringifiedLink}`);
-    invariant(
-      link.intlLabel?.id && link.intlLabel?.defaultMessage,
-      `link.intlLabel.id & link.intlLabel.defaultMessage for ${stringifiedLink}`
-    );
-    invariant(link.to, `link.to should be defined for ${stringifiedLink}`);
-    invariant(
-      link.Component && typeof link.Component === 'function',
-      `link.Component should be a valid React Component`
-    );
-
-    this.settings[sectionId].links.push(link);
-  };
-
-  addSettingsLinks = (sectionId, links) => {
-    invariant(this.settings[sectionId], 'The section does not exist');
-    invariant(Array.isArray(links), 'TypeError expected links to be an array');
-
-    links.forEach((link) => {
-      this.addSettingsLink(sectionId, link);
-    });
-  };
-
-  async bootstrap() {
-    Object.keys(this.appPlugins).forEach((plugin) => {
-      const bootstrap = this.appPlugins[plugin].bootstrap;
-
-      if (bootstrap) {
-        bootstrap({
-          addSettingsLink: this.addSettingsLink,
-          addSettingsLinks: this.addSettingsLinks,
-          getPlugin: this.getPlugin,
-          injectContentManagerComponent: this.injectContentManagerComponent,
-          injectAdminComponent: this.injectAdminComponent,
-          registerHook: this.registerHook,
-        });
-      }
-    });
-
-    if (isFunction(this.customBootstrapConfiguration)) {
-      this.customBootstrapConfiguration({
-        addComponents: this.addComponents,
-        addFields: this.addFields,
-        addMenuLink: this.addMenuLink,
-        addReducers: this.addReducers,
-        addSettingsLink: this.addSettingsLink,
-        addSettingsLinks: this.addSettingsLinks,
-        getPlugin: this.getPlugin,
-        injectContentManagerComponent: this.injectContentManagerComponent,
-        injectAdminComponent: this.injectAdminComponent,
-        registerHook: this.registerHook,
-      });
-    }
-  }
-
-  bootstrapAdmin = async () => {
-    await this.createCustomConfigurations();
-
-    this.createHook(INJECT_COLUMN_IN_TABLE);
-    this.createHook(MUTATE_COLLECTION_TYPES_LINKS);
-    this.createHook(MUTATE_SINGLE_TYPES_LINKS);
-    this.createHook(MUTATE_EDIT_VIEW_LAYOUT);
-
-    return Promise.resolve();
-  };
-
-  createCustomConfigurations = async () => {
-    if (this.customConfigurations?.locales) {
-      this.configurations.locales = [
-        'en',
-        ...(this.customConfigurations.locales?.filter((loc) => loc !== 'en') || []),
-      ];
-    }
-
-    if (this.customConfigurations?.auth?.logo) {
-      this.configurations.authLogo = this.customConfigurations.auth.logo;
-    }
-
-    if (this.customConfigurations?.menu?.logo) {
-      this.configurations.menuLogo = this.customConfigurations.menu.logo;
-    }
-
-    if (this.customConfigurations?.head?.favicon) {
-      this.configurations.head.favicon = this.customConfigurations.head.favicon;
-    }
-
-    if (this.customConfigurations?.theme) {
-      const darkTheme = this.customConfigurations.theme.dark;
-      const lightTheme = this.customConfigurations.theme.light;
-
-      if (!darkTheme && !lightTheme) {
-        console.warn(
-          `[deprecated] In future versions, Strapi will stop supporting this theme customization syntax. The theme configuration accepts a light and a dark key to customize each theme separately. See https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#theme-extension.`
-        );
-        merge(this.configurations.themes.light, this.customConfigurations.theme);
-      }
-
-      if (lightTheme) merge(this.configurations.themes.light, lightTheme);
-
-      if (darkTheme) merge(this.configurations.themes.dark, darkTheme);
-    }
-
-    if (this.customConfigurations?.notifications?.releases !== undefined) {
-      this.configurations.notifications.releases = this.customConfigurations.notifications.releases;
-    }
-
-    if (this.customConfigurations?.tutorials !== undefined) {
-      this.configurations.tutorials = this.customConfigurations.tutorials;
-    }
-  };
-
-  createHook = (name) => {
-    this.hooksDict[name] = createHook();
-  };
-
-  createSettingSection = (section, links) => {
-    invariant(section.id, 'section.id should be defined');
-    invariant(
-      section.intlLabel?.id && section.intlLabel?.defaultMessage,
-      'section.intlLabel should be defined'
-    );
-
-    invariant(Array.isArray(links), 'TypeError expected links to be an array');
-    invariant(this.settings[section.id] === undefined, 'A similar section already exists');
-
-    this.settings[section.id] = { ...section, links: [] };
-
-    links.forEach((link) => {
-      this.addSettingsLink(section.id, link);
-    });
-  };
-
-  createStore = () => {
-    const store = configureStore(this.middlewares.middlewares, this.reducers.reducers);
-
-    return store;
-  };
-
-  getAdminInjectedComponents = (moduleName, containerName, blockName) => {
-    try {
-      return this.admin.injectionZones[moduleName][containerName][blockName] || [];
-    } catch (err) {
-      console.error('Cannot get injected component', err);
-
-      return err;
-    }
-  };
-
-  getPlugin = (pluginId) => {
-    return this.plugins[pluginId];
-  };
-
-  async initialize() {
-    Object.keys(this.appPlugins).forEach((plugin) => {
-      this.appPlugins[plugin].register(this);
-    });
-  }
-
-  injectContentManagerComponent = (containerName, blockName, component) => {
-    invariant(
-      this.admin.injectionZones.contentManager[containerName]?.[blockName],
-      `The ${containerName} ${blockName} zone is not defined in the content manager`
-    );
-    invariant(component, 'A Component must be provided');
-
-    this.admin.injectionZones.contentManager[containerName][blockName].push(component);
-  };
-
-  injectAdminComponent = (containerName, blockName, component) => {
-    invariant(
-      this.admin.injectionZones.admin[containerName]?.[blockName],
-      `The ${containerName} ${blockName} zone is not defined in the admin`
-    );
-    invariant(component, 'A Component must be provided');
-
-    this.admin.injectionZones.admin[containerName][blockName].push(component);
-  };
-
-  /**
-   * Load the admin translations
-   * @returns {Object} The imported admin translations
-   */
-  async loadAdminTrads() {
-    const arrayOfPromises = this.configurations.locales.map((locale) => {
-      return import(/* webpackChunkName: "[request]" */ `./translations/${locale}.json`)
-        .then(({ default: data }) => {
-          return { data, locale };
-        })
-        .catch(() => {
-          return { data: null, locale };
-        });
-    });
-    const adminLocales = await Promise.all(arrayOfPromises);
-
-    const translations = adminLocales.reduce((acc, current) => {
-      if (current.data) {
-        acc[current.locale] = current.data;
-      }
-
-      return acc;
-    }, {});
-
-    return translations;
-  }
-
-  /**
-   * Load the application's translations and merged the custom translations
-   * with the default ones.
-   *
-   */
-  async loadTrads() {
-    const adminTranslations = await this.loadAdminTrads();
-
-    const arrayOfPromises = Object.keys(this.appPlugins)
-      .map((plugin) => {
-        const registerTrads = this.appPlugins[plugin].registerTrads;
-
-        if (registerTrads) {
-          return registerTrads({ locales: this.configurations.locales });
-        }
-
-        return null;
-      })
-      .filter((a) => a);
-
-    const pluginsTrads = await Promise.all(arrayOfPromises);
-    const mergedTrads = pluginsTrads.reduce((acc, currentPluginTrads) => {
-      const pluginTrads = currentPluginTrads.reduce((acc1, current) => {
-        acc1[current.locale] = current.data;
-
-        return acc1;
-      }, {});
-
-      Object.keys(pluginTrads).forEach((locale) => {
-        acc[locale] = { ...acc[locale], ...pluginTrads[locale] };
-      });
-
-      return acc;
-    }, {});
-
-    const translations = this.configurations.locales.reduce((acc, current) => {
-      acc[current] = {
-        ...adminTranslations[current],
-        ...(mergedTrads[current] || {}),
-        ...this.customConfigurations?.translations?.[current],
-      };
-
-      return acc;
-    }, {});
-
-    this.configurations.translations = translations;
-
-    return Promise.resolve();
-  }
-
-  registerHook = (name, fn) => {
-    invariant(
-      this.hooksDict[name],
-      `The hook ${name} is not defined. You are trying to register a hook that does not exist in the application.`
-    );
-    this.hooksDict[name].register(fn);
-  };
-
-  registerPlugin = (pluginConf) => {
-    const plugin = Plugin(pluginConf);
-
-    this.plugins[plugin.pluginId] = plugin;
-  };
-
-  runHookSeries = (name, asynchronous = false) =>
-    asynchronous ? this.hooksDict[name].runSeriesAsync() : this.hooksDict[name].runSeries();
-
-  runHookWaterfall = (name, initialValue, asynchronous = false, store) => {
-    return asynchronous
-      ? this.hooksDict[name].runWaterfallAsync(initialValue, store)
-      : this.hooksDict[name].runWaterfall(initialValue, store);
-  };
-
-  runHookParallel = (name) => this.hooksDict[name].runParallel();
-
-  render() {
-    const store = this.createStore();
-    const localeNames = pick(languageNativeNames, this.configurations.locales || []);
-
-    const {
-      components: { components },
-      fields: { fields },
-    } = this.library;
-
-    return (
-      <Providers
-        authLogo={this.configurations.authLogo}
-        components={components}
-        fields={fields}
-        customFields={this.customFields}
-        localeNames={localeNames}
-        getAdminInjectedComponents={this.getAdminInjectedComponents}
-        getPlugin={this.getPlugin}
-        messages={this.configurations.translations}
-        menu={this.menu}
-        menuLogo={this.configurations.menuLogo}
-        plugins={this.plugins}
-        runHookParallel={this.runHookParallel}
-        runHookWaterfall={(name, initialValue, async = false) => {
-          return this.runHookWaterfall(name, initialValue, async, store);
-        }}
-        runHookSeries={this.runHookSeries}
-        themes={this.configurations.themes}
-        settings={this.settings}
-        showTutorials={this.configurations.tutorials}
-        showReleaseNotification={this.configurations.notifications.releases}
-        store={store}
-      >
-        <Helmet
-          link={[
-            {
-              rel: 'icon',
-              type: 'image/png',
-              href: this.configurations.head.favicon,
-            },
-          ]}
-          htmlAttributes={{ lang: localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY) || 'en' }}
-        />
-        <BrowserRouter basename={basename}>
-          <App store={store} />
-        </BrowserRouter>
-      </Providers>
-    );
-  }
-}
-
-export default ({ adminConfig = {}, appPlugins, library, middlewares, reducers }) =>
-  new StrapiApp({ adminConfig, appPlugins, library, middlewares, reducers });

package/admin/src/app.js

@@ -1,9 +0,0 @@
-const config = {
-  locales: ['fr'],
-};
-const bootstrap = () => {};
-
-export default {
-  config,
-  bootstrap,
-};

package/admin/src/assets/images/icon_offline-cloud.svg

@@ -1,5 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x=".5" y=".5" width="87" height="87" rx="43.5" fill="#F0F0FF"/>
-    <path d="M34 39.3h-4c-2.6 0-4.7 1-6.6 2.8a9 9 0 0 0-2.7 6.6 9 9 0 0 0 2.7 6.6A9 9 0 0 0 30 58h22.8L34 39.3Zm-11-11 3-3 39 39-3 3-4.7-4.6H30a13.8 13.8 0 0 1-14-14c0-3.8 1.3-7 4-9.7 2.6-2.7 5.7-4.2 9.5-4.3L23 28.2Zm38.2 11.1c3 .2 5.5 1.5 7.6 3.7A11 11 0 0 1 72 51c0 4-1.6 7.2-5 9.5l-3.3-3.4a6.5 6.5 0 0 0 3.6-6.1c0-1.9-.7-3.5-2-5-1.5-1.3-3.1-2-5-2h-3.5v-1.2c0-3.6-1.2-6.6-3.7-9a13 13 0 0 0-15-2.3L34.6 28a17 17 0 0 1 20.3 1.5c3.5 2.7 5.5 6 6.3 10Z" fill="#4945FF"/>
-    <rect x=".5" y=".5" width="87" height="87" rx="43.5" stroke="#D9D8FF"/>
-</svg>

package/admin/src/assets/images/logo-strapi-2022.svg

@@ -1,7 +0,0 @@
-<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M39 282c0-118 0-176.9 36.6-213.5C112.2 32 171.1 32 288.9 32h221.2c117.8 0 176.7 0 213.3 36.6C760 105.2 760 164.1 760 281.9v221.2c0 117.8 0 176.7-36.6 213.3C686.8 753 627.9 753 510.1 753H288.9c-117.8 0-176.7 0-213.3-36.6C39 679.8 39 620.9 39 503.1V281.9Z" fill="#4945FF"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M536.4 250.7H293.7v123.8h123.8v123.7h123.8V255.5c0-2.6-2.2-4.8-4.9-4.8Z" fill="#fff"/>
-    <path fill="#fff" d="M412.7 374.5h4.8v4.8h-4.8z"/>
-    <path d="M293.8 374.5h119c2.6 0 4.8 2.1 4.8 4.8v119h-119a4.8 4.8 0 0 1-4.8-4.9v-119Z" fill="#9593FF"/>
-    <path d="M417.5 498.2h123.8L421.6 618a2.4 2.4 0 0 1-4-1.7v-118ZM293.8 374.5h-118a2.4 2.4 0 0 1-1.7-4.1l119.7-119.7v123.8Z" fill="#9593FF"/>
-</svg>

package/admin/src/components/AuthenticatedApp.tsx

@@ -1,187 +0,0 @@
-import * as React from 'react';
-
-import {
-  AppInfoContextValue,
-  AppInfoProvider,
-  auth,
-  LoadingIndicatorPage,
-  useFetchClient,
-  useGuidedTour,
-} from '@strapi/helper-plugin';
-import { useQueries } from 'react-query';
-import lt from 'semver/functions/lt';
-import valid from 'semver/functions/valid';
-//  TODO: DS add loader
-
-import packageJSON from '../../../package.json';
-import { UserEntity } from '../../../shared/entities';
-import { useConfiguration } from '../hooks/useConfiguration';
-import { APIResponse, APIResponseUsersLegacy } from '../types/adminAPI';
-import { getFullName } from '../utils/getFullName';
-import { hashAdminUserEmail } from '../utils/hashAdminUserEmail';
-
-import { NpsSurvey } from './NpsSurvey';
-import { PluginsInitializer } from './PluginsInitializer';
-import { RBACProvider, Permission } from './RBACProvider';
-
-const strapiVersion = packageJSON.version;
-
-const AuthenticatedApp = () => {
-  const { setGuidedTourVisibility } = useGuidedTour();
-  const userInfo = auth.get('userInfo');
-  const [userDisplayName, setUserDisplayName] = React.useState<string>(() =>
-    userInfo ? userInfo.username || getFullName(userInfo.firstname ?? '', userInfo.lastname) : ''
-  );
-  const [userId, setUserId] = React.useState<string>();
-  const { showReleaseNotification } = useConfiguration();
-  const { get } = useFetchClient();
-  const [
-    { data: appInfos, status },
-    { data: tagName, isLoading },
-    { data: permissions, status: fetchPermissionsStatus, refetch, isFetching },
-    { data: userRoles },
-  ] = useQueries([
-    {
-      queryKey: 'app-infos',
-      async queryFn() {
-        const { data } = await get<
-          APIResponse<
-            Pick<
-              AppInfoContextValue,
-              | 'currentEnvironment'
-              | 'autoReload'
-              | 'communityEdition'
-              | 'dependencies'
-              | 'useYarn'
-              | 'projectId'
-              | 'strapiVersion'
-              | 'nodeVersion'
-            >
-          >
-        >('/admin/information');
-
-        return data.data;
-      },
-    },
-    {
-      queryKey: 'strapi-release',
-      async queryFn() {
-        try {
-          const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
-
-          if (!res.ok) {
-            throw new Error();
-          }
-
-          const response = (await res.json()) as { tag_name: string | null | undefined };
-
-          if (!response.tag_name) {
-            throw new Error();
-          }
-
-          return response.tag_name;
-        } catch (err) {
-          // Don't throw an error
-          return strapiVersion;
-        }
-      },
-      enabled: showReleaseNotification,
-      initialData: strapiVersion,
-    },
-    {
-      queryKey: 'admin-users-permission',
-      async queryFn() {
-        const { data } = await get<{ data: Permission[] }>('/admin/users/me/permissions');
-
-        return data.data;
-      },
-      initialData: [],
-    },
-    {
-      queryKey: 'user-roles',
-      async queryFn() {
-        const {
-          data: {
-            data: { roles },
-          },
-        } = await get<APIResponseUsersLegacy<UserEntity>>('/admin/users/me');
-
-        return roles;
-      },
-    },
-  ]);
-
-  const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tagName);
-
-  /**
-   * TODO: does this actually need to be an effect?
-   */
-  React.useEffect(() => {
-    if (userRoles) {
-      const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
-
-      if (isUserSuperAdmin && appInfos?.autoReload) {
-        setGuidedTourVisibility(true);
-      }
-    }
-  }, [userRoles, appInfos, setGuidedTourVisibility]);
-
-  React.useEffect(() => {
-    const getUserId = async () => {
-      if (userInfo) {
-        const userId = await hashAdminUserEmail(userInfo);
-
-        if (userId) {
-          setUserId(userId);
-        }
-      }
-    };
-
-    getUserId();
-  }, [userInfo]);
-
-  // We don't need to wait for the release query to be fetched before rendering the plugins
-  // however, we need the appInfos and the permissions
-  const shouldShowNotDependentQueriesLoader =
-    isFetching || status === 'loading' || fetchPermissionsStatus === 'loading';
-
-  const shouldShowLoader = isLoading || shouldShowNotDependentQueriesLoader;
-
-  if (shouldShowLoader) {
-    return <LoadingIndicatorPage />;
-  }
-
-  // TODO: add error state
-  if (status === 'error') {
-    return <div>error...</div>;
-  }
-
-  return (
-    <AppInfoProvider
-      {...appInfos}
-      userId={userId}
-      latestStrapiReleaseTag={tagName}
-      setUserDisplayName={setUserDisplayName}
-      shouldUpdateStrapi={shouldUpdateStrapi}
-      userDisplayName={userDisplayName}
-    >
-      <RBACProvider permissions={permissions ?? []} refetchPermissions={refetch}>
-        <NpsSurvey />
-        <PluginsInitializer />
-      </RBACProvider>
-    </AppInfoProvider>
-  );
-};
-
-const checkLatestStrapiVersion = (
-  currentPackageVersion: string,
-  latestPublishedVersion: string = ''
-): boolean => {
-  if (!valid(currentPackageVersion) || !valid(latestPublishedVersion)) {
-    return false;
-  }
-
-  return lt(currentPackageVersion, latestPublishedVersion);
-};
-
-export { AuthenticatedApp };