@strapi/admin 4.12.6 → 4.13.0-alpha.0

package/admin/src/StrapiApp.js

@@ -22,7 +22,7 @@ import {
 } from './exposedHooks';
 import favicon from './favicon.png';
 import injectionZones from './injectionZones';
-import { App } from './pages/App';
+import App from './pages/App';
 import languageNativeNames from './translations/languageNativeNames';
 
 class StrapiApp {

package/admin/src/components/AuthenticatedApp/index.js

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+
+import {
+  AppInfoProvider,
+  auth,
+  LoadingIndicatorPage,
+  useGuidedTour,
+  useNotification,
+} from '@strapi/helper-plugin';
+import get from 'lodash/get';
+import { useQueries } from 'react-query';
+//  TODO: DS add loader
+
+import packageJSON from '../../../../package.json';
+import { useConfigurations } from '../../hooks';
+import { getFullName, hashAdminUserEmail } from '../../utils';
+import PluginsInitializer from '../PluginsInitializer';
+import RBACProvider from '../RBACProvider';
+
+import {
+  fetchAppInfo,
+  fetchCurrentUserPermissions,
+  fetchStrapiLatestRelease,
+  fetchUserRoles,
+} from './utils/api';
+import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
+
+const strapiVersion = packageJSON.version;
+
+const AuthenticatedApp = () => {
+  const { setGuidedTourVisibility } = useGuidedTour();
+  const toggleNotification = useNotification();
+  const userInfo = auth.getUserInfo();
+  const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
+  const [userDisplayName, setUserDisplayName] = useState(userName);
+  const [userId, setUserId] = useState(null);
+  const { showReleaseNotification } = useConfigurations();
+  const [
+    { data: appInfos, status },
+    { data: tagName, isLoading },
+    { data: permissions, status: fetchPermissionsStatus, refetch, isFetching },
+    { data: userRoles },
+  ] = useQueries([
+    { queryKey: 'app-infos', queryFn: fetchAppInfo },
+    {
+      queryKey: 'strapi-release',
+      queryFn: () => fetchStrapiLatestRelease(toggleNotification),
+      enabled: showReleaseNotification,
+      initialData: strapiVersion,
+    },
+    {
+      queryKey: 'admin-users-permission',
+      queryFn: fetchCurrentUserPermissions,
+      initialData: [],
+    },
+    {
+      queryKey: 'user-roles',
+      queryFn: fetchUserRoles,
+    },
+  ]);
+
+  const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tagName);
+
+  /**
+   * TODO: does this actually need to be an effect?
+   */
+  useEffect(() => {
+    if (userRoles) {
+      const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
+
+      if (isUserSuperAdmin && appInfos?.autoReload) {
+        setGuidedTourVisibility(true);
+      }
+    }
+  }, [userRoles, appInfos, setGuidedTourVisibility]);
+
+  useEffect(() => {
+    const getUserId = async () => {
+      const userId = await hashAdminUserEmail(userInfo);
+      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}>
+        <PluginsInitializer />
+      </RBACProvider>
+    </AppInfoProvider>
+  );
+};
+
+export default AuthenticatedApp;

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -0,0 +1,85 @@
+import { getFetchClient } from '@strapi/helper-plugin';
+
+import packageJSON from '../../../../../package.json';
+
+import checkLatestStrapiVersion from './checkLatestStrapiVersion';
+
+const strapiVersion = packageJSON.version;
+const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
+const { get } = getFetchClient();
+
+const fetchStrapiLatestRelease = async (toggleNotification) => {
+  try {
+    const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
+
+    if (!res.ok) {
+      throw new Error('Failed to fetch latest Strapi version.');
+    }
+    const { tag_name } = await res.json();
+    const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tag_name);
+
+    if (shouldUpdateStrapi && showUpdateNotif) {
+      toggleNotification({
+        type: 'info',
+        message: { id: 'notification.version.update.message' },
+        link: {
+          url: `https://github.com/strapi/strapi/releases/tag/${tag_name}`,
+          label: {
+            id: 'global.see-more',
+          },
+        },
+        blockTransition: true,
+        onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
+      });
+    }
+
+    return tag_name;
+  } catch (err) {
+    // Don't throw an error
+    return strapiVersion;
+  }
+};
+
+const fetchAppInfo = async () => {
+  try {
+    const { data, headers } = await get('/admin/information');
+
+    if (!headers['content-type'].includes('application/json')) {
+      throw new Error('Not found');
+    }
+
+    return data.data;
+  } catch (error) {
+    throw new Error(error);
+  }
+};
+
+const fetchCurrentUserPermissions = async () => {
+  try {
+    const { data, headers } = await get('/admin/users/me/permissions');
+
+    if (!headers['content-type'].includes('application/json')) {
+      throw new Error('Not found');
+    }
+
+    return data.data;
+  } catch (err) {
+    throw new Error(err);
+  }
+};
+
+const fetchUserRoles = async () => {
+  try {
+    const {
+      data: {
+        data: { roles },
+      },
+    } = await get('/admin/users/me');
+
+    return roles;
+  } catch (err) {
+    throw new Error(err);
+  }
+};
+
+export { fetchAppInfo, fetchCurrentUserPermissions, fetchStrapiLatestRelease, fetchUserRoles };

package/admin/src/components/AuthenticatedApp/utils/checkLatestStrapiVersion.js

@@ -0,0 +1,11 @@
+import semver from 'semver';
+
+const checkLatestStrapiVersion = (currentPackageVersion, latestPublishedVersion) => {
+  if (!semver.valid(currentPackageVersion) || !semver.valid(latestPublishedVersion)) {
+    return false;
+  }
+
+  return semver.lt(currentPackageVersion, latestPublishedVersion);
+};
+
+export default checkLatestStrapiVersion;

package/admin/src/components/GuidedTour/Modal/index.js

@@ -9,7 +9,7 @@ import Modal from './components/Modal';
 import StepperModal from './components/Stepper';
 import reducer, { initialState } from './reducer';
 
-export const GuidedTourModal = () => {
+const GuidedTourModal = () => {
   const {
     currentStep,
     guidedTourState,
@@ -90,3 +90,5 @@ export const GuidedTourModal = () => {
 
   return null;
 };
+
+export default GuidedTourModal;

package/admin/src/components/NpsSurvey/hooks/useNpsSurveySettings.js

@@ -0,0 +1,17 @@
+import { usePersistentState } from '@strapi/helper-plugin';
+
+// Exported to make it available during admin user registration.
+// Because we only enable the NPS for users who subscribe to the newsletter when signing up
+export function useNpsSurveySettings() {
+  const [npsSurveySettings, setNpsSurveySettings] = usePersistentState(
+    'STRAPI_NPS_SURVEY_SETTINGS',
+    {
+      enabled: true,
+      lastResponseDate: null,
+      firstDismissalDate: null,
+      lastDismissalDate: null,
+    }
+  );
+
+  return { npsSurveySettings, setNpsSurveySettings };
+}

package/admin/src/components/NpsSurvey/index.js

@@ -0,0 +1,365 @@
+import * as React from 'react';
+
+import {
+  Box,
+  Flex,
+  IconButton,
+  Button,
+  Typography,
+  Textarea,
+  Portal,
+  Field,
+  FieldLabel,
+  FieldInput,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import { auth, useNotification, useAppInfo } from '@strapi/helper-plugin';
+import { Cross } from '@strapi/icons';
+import { Formik, Form } from 'formik';
+import { useIntl } from 'react-intl';
+import { useMutation } from 'react-query';
+import styled, { useTheme } from 'styled-components';
+import * as yup from 'yup';
+
+import { useNpsSurveySettings } from './hooks/useNpsSurveySettings';
+
+const FieldWrapper = styled(Field)`
+  height: ${32 / 16}rem;
+  width: ${32 / 16}rem;
+
+  > label,
+  ~ input {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  > label {
+    color: inherit;
+    cursor: pointer;
+    padding: ${({ theme }) => theme.spaces[2]};
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  &:hover,
+  &:focus-within {
+    background-color: ${({ theme }) => theme.colors.neutral0};
+  }
+
+  &:active,
+  &.selected {
+    color: ${({ theme }) => theme.colors.primary700};
+    background-color: ${({ theme }) => theme.colors.neutral0};
+    border-color: ${({ theme }) => theme.colors.primary700};
+  }
+`;
+
+const delays = {
+  postResponse: 90 * 24 * 60 * 60 * 1000, // 90 days in ms
+  postFirstDismissal: 7 * 24 * 60 * 60 * 1000, // 7 days in ms
+  postSubsequentDismissal: 90 * 24 * 60 * 60 * 1000, // 90 days in ms
+  display: 5 * 60 * 1000, // 5 minutes in ms
+};
+
+const ratingArray = [...Array(11).keys()];
+
+const checkIfShouldShowSurvey = (settings) => {
+  const { enabled, lastResponseDate, firstDismissalDate, lastDismissalDate } = settings;
+
+  // This function goes through all the cases where we'd want to not show the survey:
+  // 1. If the survey is disabled, abort mission, don't bother checking the other settings.
+  // 2. If the user has already responded to the survey, check if enough time has passed since the last response.
+  // 3. If the user has dismissed the survey twice or more before, check if enough time has passed since the last dismissal.
+  // 4. If the user has only dismissed the survey once before, check if enough time has passed since the first dismissal.
+  // If none of these cases check out, then we show the survey.
+  // Note that submitting a response resets the dismissal counts.
+  // Checks 3 and 4 should not be reversed, since the first dismissal will also exist if the user has dismissed the survey twice or more before.
+
+  // User hasn't enabled NPS feature
+  if (!enabled) {
+    return false;
+  }
+
+  // The user has already responded to the survey
+  if (lastResponseDate) {
+    const timeSinceLastResponse = Date.now() - new Date(lastResponseDate).getTime();
+
+    if (timeSinceLastResponse >= delays.postResponse) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // The user has dismissed the survey twice or more before
+  if (lastDismissalDate) {
+    const timeSinceLastDismissal = Date.now() - new Date(lastDismissalDate).getTime();
+
+    if (timeSinceLastDismissal >= delays.postSubsequentDismissal) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // The user has only dismissed the survey once before
+  if (firstDismissalDate) {
+    const timeSinceFirstDismissal = Date.now() - new Date(firstDismissalDate).getTime();
+
+    if (timeSinceFirstDismissal >= delays.postFirstDismissal) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // The user has not interacted with the survey before
+  return true;
+};
+
+const NpsSurvey = () => {
+  const theme = useTheme();
+  const { formatMessage } = useIntl();
+  const { npsSurveySettings, setNpsSurveySettings } = useNpsSurveySettings();
+  const [isFeedbackResponse, setIsFeedbackResponse] = React.useState(false);
+  const toggleNotification = useNotification();
+  const { currentEnvironment, strapiVersion } = useAppInfo();
+
+  const { mutate, isLoading } = useMutation(
+    async (form) => {
+      const res = await fetch('https://analytics.strapi.io/submit-nps', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(form),
+      });
+
+      if (!res.ok) {
+        throw new Error('Failed to submit NPS survey');
+      }
+
+      return res;
+    },
+    {
+      onSuccess() {
+        setNpsSurveySettings((settings) => ({
+          ...settings,
+          lastResponseDate: new Date(),
+          firstDismissalDate: null,
+          lastDismissalDate: null,
+        }));
+        setIsFeedbackResponse(true);
+        // Thank you message displayed in the banner should disappear after few seconds.
+        setTimeout(() => {
+          setSurveyIsShown(false);
+        }, 3000);
+      },
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: formatMessage({ id: 'notification.error' }),
+        });
+      },
+    }
+  );
+
+  // Only check on first render if the survey should be shown
+  const [surveyIsShown, setSurveyIsShown] = React.useState(
+    checkIfShouldShowSurvey(npsSurveySettings)
+  );
+
+  // Set a cooldown to show the survey when session begins
+  const [displaySurvey, setDisplaySurvey] = React.useState(false);
+
+  React.useEffect(() => {
+    const displayTime = setTimeout(() => {
+      setDisplaySurvey(true);
+    }, delays.display);
+
+    return () => {
+      clearTimeout(displayTime);
+    };
+  }, []);
+
+  if (!displaySurvey) {
+    return null;
+  }
+
+  if (!surveyIsShown) {
+    return null;
+  }
+
+  const handleSubmitResponse = ({ npsSurveyRating: rating, npsSurveyFeedback: comment }) => {
+    const { email } = auth.getUserInfo();
+    mutate({
+      email,
+      rating,
+      comment,
+      environment: currentEnvironment,
+      version: strapiVersion,
+      license: window.strapi.projectType,
+    });
+  };
+
+  const handleDismiss = () => {
+    setNpsSurveySettings((settings) => {
+      const nextSettings = {
+        ...settings,
+        lastResponseDate: null,
+      };
+
+      if (settings.firstDismissalDate) {
+        // If the user dismisses the survey for the second time
+        nextSettings.lastDismissalDate = new Date();
+      } else {
+        // If the user dismisses the survey for the first time
+        nextSettings.firstDismissalDate = new Date();
+      }
+
+      return nextSettings;
+    });
+
+    setSurveyIsShown(false);
+  };
+
+  return (
+    <Portal>
+      <Formik
+        initialValues={{ npsSurveyFeedback: '', npsSurveyRating: null }}
+        onSubmit={handleSubmitResponse}
+        validationSchema={yup.object({
+          npsSurveyFeedback: yup.string(),
+          npsSurveyRating: yup.number().required(),
+        })}
+      >
+        {({ values, handleChange, setFieldValue }) => (
+          <Form name="npsSurveyForm">
+            <Flex
+              hasRadius
+              direction="column"
+              padding={4}
+              borderColor="primary200"
+              background="neutral0"
+              shadow="popupShadow"
+              position="fixed"
+              bottom={0}
+              left="50%"
+              transform="translateX(-50%)"
+              zIndex={theme.zIndices[2]}
+              width="50%"
+            >
+              {isFeedbackResponse ? (
+                <Typography fontWeight="semiBold">
+                  {formatMessage({
+                    id: 'app.components.NpsSurvey.feedback-response',
+                    defaultMessage: 'Thank you very much for your feedback!',
+                  })}
+                </Typography>
+              ) : (
+                <Box as="fieldset" width="100%">
+                  <Flex justifyContent="space-between" width="100%">
+                    <Box marginLeft="auto" marginRight="auto">
+                      <Typography fontWeight="semiBold" as="legend">
+                        {formatMessage({
+                          id: 'app.components.NpsSurvey.banner-title',
+                          defaultMessage:
+                            'How likely are you to recommend Strapi to a friend or colleague?',
+                        })}
+                      </Typography>
+                    </Box>
+                    <IconButton
+                      onClick={handleDismiss}
+                      aria-label={formatMessage({
+                        id: 'app.components.NpsSurvey.dismiss-survey-label',
+                        defaultMessage: 'Dismiss survey',
+                      })}
+                      icon={<Cross />}
+                    />
+                  </Flex>
+                  <Flex gap={2} marginTop={2} marginBottom={2} justifyContent="center">
+                    <Typography variant="pi" textColor="neutral600">
+                      {formatMessage({
+                        id: 'app.components.NpsSurvey.no-recommendation',
+                        defaultMessage: 'Not at all likely',
+                      })}
+                    </Typography>
+                    {ratingArray.map((number) => {
+                      return (
+                        <FieldWrapper
+                          key={number}
+                          className={values.npsSurveyRating === number ? 'selected' : null} // "selected" class added when child radio button is checked
+                          hasRadius
+                          background="primary100"
+                          borderColor="primary200"
+                          color="primary600"
+                          position="relative"
+                          cursor="pointer"
+                        >
+                          <FieldLabel htmlFor={`nps-survey-rating-${number}-input`}>
+                            <VisuallyHidden>
+                              <FieldInput
+                                type="radio"
+                                id={`nps-survey-rating-${number}-input`}
+                                name="npsSurveyRating"
+                                checked={values.npsSurveyRating === number}
+                                onChange={(e) =>
+                                  setFieldValue('npsSurveyRating', parseInt(e.target.value, 10))
+                                }
+                                value={number}
+                              />
+                            </VisuallyHidden>
+                            {number}
+                          </FieldLabel>
+                        </FieldWrapper>
+                      );
+                    })}
+                    <Typography variant="pi" textColor="neutral600">
+                      {formatMessage({
+                        id: 'app.components.NpsSurvey.happy-to-recommend',
+                        defaultMessage: 'Extremely likely',
+                      })}
+                    </Typography>
+                  </Flex>
+                  {values.npsSurveyRating !== null && (
+                    <Flex direction="column">
+                      <Box marginTop={2}>
+                        <FieldLabel htmlFor="npsSurveyFeedback" fontWeight="semiBold" fontSize={2}>
+                          {formatMessage({
+                            id: 'app.components.NpsSurvey.feedback-question',
+                            defaultMessage: 'Do you have any suggestion for improvements?',
+                          })}
+                        </FieldLabel>
+                      </Box>
+                      <Box width="62%" marginTop={3} marginBottom={4}>
+                        <Textarea
+                          id="npsSurveyFeedback" // formik element attribute "id" should be same as the values key to work
+                          width="100%"
+                          onChange={handleChange}
+                        >
+                          {values.npsSurveyFeedback}
+                        </Textarea>
+                      </Box>
+                      <Button marginBottom={2} type="submit" loading={isLoading}>
+                        {formatMessage({
+                          id: 'app.components.NpsSurvey.submit-feedback',
+                          defaultMessage: 'Submit Feedback',
+                        })}
+                      </Button>
+                    </Flex>
+                  )}
+                </Box>
+              )}
+            </Flex>
+          </Form>
+        )}
+      </Formik>
+    </Portal>
+  );
+};
+
+export default NpsSurvey;

package/admin/src/components/PluginsInitializer/index.js

@@ -0,0 +1,68 @@
+import React, { useReducer, useRef } from 'react';
+
+import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
+
+import Admin from '../../pages/Admin';
+
+import init from './init';
+import reducer, { initialState } from './reducer';
+
+const PluginsInitializer = () => {
+  const { plugins: appPlugins } = useStrapiApp();
+  const [{ plugins }, dispatch] = useReducer(reducer, initialState, () => init(appPlugins));
+  const setPlugin = useRef((pluginId) => {
+    dispatch({ type: 'SET_PLUGIN_READY', pluginId });
+  });
+
+  const hasApluginNotReady = Object.keys(plugins).some(
+    (plugin) => plugins[plugin].isReady === false
+  );
+
+  /**
+   *
+   * I have spent some time trying to understand what is happening here, and wanted to
+   * leave that knowledge for my future me:
+   *
+   * `initializer` is an undocumented property of the `registerPlugin` API. At the time
+   * of writing it seems only to be used by the i18n plugin.
+   *
+   * How does it work?
+   *
+   * Every plugin that has an `initializer` component defined, receives the
+   * `setPlugin` function as a component prop. In the case of i18n the plugin fetches locales
+   * first and calls `setPlugin` with `pluginId` once they are loaded, which then triggers the
+   * reducer of the admin app defined above.
+   *
+   * Once all plugins are set to `isReady: true` the app renders.
+   *
+   * This API is used to block rendering of the admin app. We should remove that in v5 completely
+   * and make sure plugins can inject data into the global store before they are initialized, to avoid
+   * having a new prop-callback based communication channel between plugins and the core admin app.
+   *
+   */
+
+  if (hasApluginNotReady) {
+    const initializers = Object.keys(plugins).reduce((acc, current) => {
+      const InitializerComponent = plugins[current].initializer;
+
+      if (InitializerComponent) {
+        const key = plugins[current].pluginId;
+
+        acc.push(<InitializerComponent key={key} setPlugin={setPlugin.current} />);
+      }
+
+      return acc;
+    }, []);
+
+    return (
+      <>
+        {initializers}
+        <LoadingIndicatorPage />
+      </>
+    );
+  }
+
+  return <Admin />;
+};
+
+export default PluginsInitializer;