@strapi/admin 4.15.0 → 4.15.1

package/admin/src/components/LeftMenu.tsx

@@ -1,257 +0,0 @@
-import * as React from 'react';
-
-import { Box, Divider, Flex, FocusTrap, Typography } from '@strapi/design-system';
-import {
-  MainNav,
-  NavBrand,
-  NavCondense,
-  NavFooter,
-  NavLink,
-  NavSection,
-  NavSections,
-  NavUser,
-} from '@strapi/design-system/v2';
-import {
-  auth,
-  getFetchClient,
-  useAppInfo,
-  usePersistentState,
-  useTracking,
-} from '@strapi/helper-plugin';
-import { Exit, Write } from '@strapi/icons';
-import { useIntl } from 'react-intl';
-import { NavLink as RouterNavLink, useHistory, useLocation } from 'react-router-dom';
-import styled from 'styled-components';
-
-import { useConfiguration } from '../hooks/useConfiguration';
-import { Menu } from '../hooks/useMenu';
-
-const LinkUserWrapper = styled(Box)`
-  width: ${150 / 16}rem;
-  position: absolute;
-  bottom: ${({ theme }) => theme.spaces[9]};
-  left: ${({ theme }) => theme.spaces[5]};
-`;
-
-const LinkUser = styled(RouterNavLink)<{ logout?: boolean }>`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  text-decoration: none;
-  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};
-  border-radius: ${({ theme }) => theme.spaces[1]};
-
-  &:hover {
-    background: ${({ theme, logout }) =>
-      logout ? theme.colors.danger100 : theme.colors.primary100};
-    text-decoration: none;
-  }
-
-  svg {
-    path {
-      fill: ${({ theme }) => theme.colors.danger600};
-    }
-  }
-`;
-
-interface LeftMenuProps extends Pick<Menu, 'generalSectionLinks' | 'pluginsSectionLinks'> {}
-
-const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) => {
-  const navUserRef = React.useRef<HTMLDivElement>(null!);
-  const [userLinksVisible, setUserLinksVisible] = React.useState(false);
-  const {
-    logos: { menu },
-  } = useConfiguration();
-  const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
-  const { userDisplayName } = useAppInfo();
-  const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
-  const { pathname } = useLocation();
-  const history = useHistory();
-  const { post } = getFetchClient();
-
-  const initials = userDisplayName
-    .split(' ')
-    .map((name) => name.substring(0, 1))
-    .join('')
-    .substring(0, 2);
-
-  const handleToggleUserLinks = () => setUserLinksVisible((prev) => !prev);
-
-  const handleLogout = async () => {
-    await post('/admin/logout');
-    auth.clearAppStorage();
-    handleToggleUserLinks();
-    history.push('/auth/login');
-  };
-
-  const handleBlur: React.FocusEventHandler = (e) => {
-    if (
-      !e.currentTarget.contains(e.relatedTarget) &&
-      /**
-       * TODO: can we replace this by just using the navUserRef?
-       */
-      e.relatedTarget?.parentElement?.id !== 'main-nav-user-button'
-    ) {
-      setUserLinksVisible(false);
-    }
-  };
-
-  const handleClickOnLink = (destination: string) => {
-    trackUsage('willNavigate', { from: pathname, to: destination });
-  };
-
-  const menuTitle = formatMessage({
-    id: 'app.components.LeftMenu.navbrand.title',
-    defaultMessage: 'Strapi Dashboard',
-  });
-
-  return (
-    <MainNav condensed={condensed}>
-      <NavBrand
-        as={RouterNavLink}
-        workplace={formatMessage({
-          id: 'app.components.LeftMenu.navbrand.workplace',
-          defaultMessage: 'Workplace',
-        })}
-        title={menuTitle}
-        icon={
-          <img
-            src={menu.custom || menu.default}
-            alt={formatMessage({
-              id: 'app.components.LeftMenu.logo.alt',
-              defaultMessage: 'Application logo',
-            })}
-          />
-        }
-      />
-
-      <Divider />
-
-      <NavSections>
-        <NavLink
-          as={RouterNavLink}
-          // @ts-expect-error the props from the passed as prop are not inferred // joined together
-          to="/content-manager"
-          icon={<Write />}
-          onClick={() => handleClickOnLink('/content-manager')}
-        >
-          {formatMessage({ id: 'global.content-manager', defaultMessage: 'Content manager' })}
-        </NavLink>
-
-        {pluginsSectionLinks.length > 0 ? (
-          <NavSection
-            label={formatMessage({
-              id: 'app.components.LeftMenu.plugins',
-              defaultMessage: 'Plugins',
-            })}
-          >
-            {pluginsSectionLinks.map((link) => {
-              const Icon = link.icon;
-
-              return (
-                <NavLink
-                  as={RouterNavLink}
-                  // @ts-expect-error the props from the passed as prop are not inferred // joined together
-                  to={link.to}
-                  key={link.to}
-                  icon={<Icon />}
-                  onClick={() => handleClickOnLink(link.to)}
-                >
-                  {formatMessage(link.intlLabel)}
-                </NavLink>
-              );
-            })}
-          </NavSection>
-        ) : null}
-
-        {generalSectionLinks.length > 0 ? (
-          <NavSection
-            label={formatMessage({
-              id: 'app.components.LeftMenu.general',
-              defaultMessage: 'General',
-            })}
-          >
-            {generalSectionLinks.map((link) => {
-              const LinkIcon = link.icon;
-
-              return (
-                <NavLink
-                  as={RouterNavLink}
-                  badgeContent={
-                    link.notificationsCount && link.notificationsCount > 0
-                      ? link.notificationsCount.toString()
-                      : undefined
-                  }
-                  // @ts-expect-error the props from the passed as prop are not inferred // joined together
-                  to={link.to}
-                  key={link.to}
-                  icon={<LinkIcon />}
-                  onClick={() => handleClickOnLink(link.to)}
-                >
-                  {formatMessage(link.intlLabel)}
-                </NavLink>
-              );
-            })}
-          </NavSection>
-        ) : null}
-      </NavSections>
-
-      <NavFooter>
-        <NavUser
-          id="main-nav-user-button"
-          ref={navUserRef}
-          onClick={handleToggleUserLinks}
-          initials={initials}
-        >
-          {userDisplayName}
-        </NavUser>
-        {userLinksVisible && (
-          <LinkUserWrapper
-            onBlur={handleBlur}
-            padding={1}
-            shadow="tableShadow"
-            background="neutral0"
-            hasRadius
-          >
-            <FocusTrap onEscape={handleToggleUserLinks}>
-              <Flex direction="column" alignItems="stretch" gap={0}>
-                <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
-                  <Typography>
-                    {formatMessage({
-                      id: 'global.profile',
-                      defaultMessage: 'Profile',
-                    })}
-                  </Typography>
-                </LinkUser>
-                <LinkUser tabIndex={0} onClick={handleLogout} to="/auth/login">
-                  <Typography textColor="danger600">
-                    {formatMessage({
-                      id: 'app.components.LeftMenu.logout',
-                      defaultMessage: 'Logout',
-                    })}
-                  </Typography>
-                  <Exit />
-                </LinkUser>
-              </Flex>
-            </FocusTrap>
-          </LinkUserWrapper>
-        )}
-
-        <NavCondense onClick={() => setCondensed((s) => !s)}>
-          {condensed
-            ? formatMessage({
-                id: 'app.components.LeftMenu.expand',
-                defaultMessage: 'Expand the navbar',
-              })
-            : formatMessage({
-                id: 'app.components.LeftMenu.collapse',
-                defaultMessage: 'Collapse the navbar',
-              })}
-        </NavCondense>
-      </NavFooter>
-    </MainNav>
-  );
-};
-
-export { LeftMenu };

package/admin/src/components/NpsSurvey.tsx

@@ -1,415 +0,0 @@
-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, usePersistentState } 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';
-
-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: NpsSurveySettings) => {
-  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 by strapi, abort mission, don't bother checking the other settings.
-  // 2. If the survey is disabled by user, abort mission, don't bother checking the other settings.
-  // 3. If the user has already responded to the survey, check if enough time has passed since the last response.
-  // 4. If the user has dismissed the survey twice or more before, check if enough time has passed since the last dismissal.
-  // 5. 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 4 and 5 should not be reversed, since the first dismissal will also exist if the user has dismissed the survey twice or more before.
-
-  // For users who had created an account before the NPS feature was introduced,
-  // we assume that they would have enabled the NPS feature if they had the chance.
-
-  // Global strapi disable for NSP.
-  if (window.strapi.flags.nps === false) {
-    return false;
-  }
-
-  // User chose not to enable the NPS feature when signing up
-  if (enabled === false) {
-    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();
-
-  interface NpsSurveyMutationBody {
-    email: string;
-    rating: number | null;
-    comment: string;
-    environment?: string;
-    version?: string;
-    license: 'Enterprise' | 'Community';
-  }
-
-  const { mutate, isLoading } = useMutation<unknown, unknown, NpsSurveyMutationBody>(
-    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().toString(),
-          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', defaultMessage: 'An error occurred' }),
-        });
-      },
-    }
-  );
-
-  // 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,
-    npsSurveyFeedback,
-  }: {
-    npsSurveyRating: NpsSurveyMutationBody['rating'];
-    npsSurveyFeedback: NpsSurveyMutationBody['comment'];
-  }) => {
-    const userInfo = auth.getUserInfo();
-    mutate({
-      email: typeof userInfo === 'object' && userInfo !== null ? userInfo.email : '',
-      rating: npsSurveyRating,
-      comment: npsSurveyFeedback,
-      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().toString();
-      } else {
-        // If the user dismisses the survey for the first time
-        nextSettings.firstDismissalDate = new Date().toString();
-      }
-
-      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' : undefined} // "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>
-  );
-};
-
-interface NpsSurveySettings {
-  enabled: boolean;
-  lastResponseDate: string | null;
-  firstDismissalDate: string | null;
-  lastDismissalDate: string | null;
-}
-
-/**
- * We 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
- */
-function useNpsSurveySettings() {
-  const [npsSurveySettings, setNpsSurveySettings] = usePersistentState<NpsSurveySettings>(
-    'STRAPI_NPS_SURVEY_SETTINGS',
-    {
-      enabled: true,
-      lastResponseDate: null,
-      firstDismissalDate: null,
-      lastDismissalDate: null,
-    }
-  );
-
-  /**
-   * TODO: should this just be an array so we can alias the `usePersistentState` hook?
-   */
-  return { npsSurveySettings, setNpsSurveySettings };
-}
-
-export { NpsSurvey, useNpsSurveySettings };