feedback fix and improvements

packages/core/admin/admin/src/pages/Admin/Onboarding/index.js

@@ -85,6 +85,17 @@ const Onboarding = () => {
     setIsOpen((prev) => !prev);
   };
 
+  const docLinks = [
+    ...DOCUMENTATION_LINKS,
+    {
+      label: { id: 'Settings.application.get-help', defaultMessage: 'Get help' },
+      icon: Message,
+      href: communityEdition
+        ? 'https://discord.strapi.io'
+        : 'https://support.strapi.io/support/home',
+    },
+  ];
+
   return (
     <Box as="aside" position="fixed" bottom={2} right={2}>
       <HelperButton
@@ -182,7 +193,7 @@ const Onboarding = () => {
                 </VideoLinkWrapper>
               ))}
               <Stack spacing={2} paddingLeft={5} paddingTop={2} paddingBottom={5}>
-                {DOCUMENTATION_LINKS.map(({ label, href, icon }) => (
+                {docLinks.map(({ label, href, icon }) => (
                   <Stack horizontal spacing={3} key={href}>
                     <Icon as={icon} color="primary600" />
                     <TextLink
@@ -197,26 +208,6 @@ const Onboarding = () => {
                     </TextLink>
                   </Stack>
                 ))}
-                <Stack horizontal spacing={3}>
-                  <Icon as={Message} color="primary600" />
-                  <TextLink
-                    as="a"
-                    href={
-                      communityEdition
-                        ? 'https://discord.strapi.io'
-                        : 'https://support.strapi.io/support/home'
-                    }
-                    target="_blank"
-                    rel="noreferrer noopener"
-                    variant="sigma"
-                    textColor="primary700"
-                  >
-                    {formatMessage({
-                      id: 'Settings.application.get-help',
-                      defaultMessage: 'Get help',
-                    })}
-                  </TextLink>
-                </Stack>
               </Stack>
             </FocusTrap>
           </PopoverPrimitives.Content>

packages/core/admin/admin/src/pages/HomePage/SocialLinks.js

@@ -140,6 +140,20 @@ const SocialLinks = () => {
   const { formatMessage } = useIntl();
   const { communityEdition } = useAppInfos();
 
+  const socialLinksExtended = [
+    ...socialLinks,
+    {
+      icon: <StyledStrapi />,
+      link: communityEdition
+        ? 'https://discord.strapi.io'
+        : 'https://support.strapi.io/support/home',
+      name: {
+        id: 'Settings.application.get-help',
+        defaultMessage: 'Get help',
+      },
+    },
+  ];
+
   return (
     <Box
       as="aside"
@@ -178,39 +192,15 @@ const SocialLinks = () => {
         </Stack>
       </Box>
       <GridGap>
-        {socialLinks.map((socialLink) => {
+        {socialLinksExtended.map(({ icon, link, name }) => {
           return (
-            <GridItem col={6} s={12} key={socialLink.name}>
+            <GridItem col={6} s={12} key={name}>
-              <LinkCustom
+              <LinkCustom size="L" startIcon={icon} variant="tertiary" href={link} isExternal>
-                size="L"
+                {typeof name === 'string' ? name : formatMessage(name)}
-                startIcon={socialLink.icon}
-                variant="tertiary"
-                href={socialLink.link}
-                isExternal
-              >
-                {socialLink.name}
               </LinkCustom>
             </GridItem>
           );
         })}
-        <GridItem col={6} s={12}>
-          <LinkCustom
-            size="L"
-            startIcon={<StyledStrapi />}
-            variant="tertiary"
-            href={
-              communityEdition
-                ? 'https://discord.strapi.io'
-                : 'https://support.strapi.io/support/home'
-            }
-            isExternal
-          >
-            {formatMessage({
-              id: 'Settings.application.get-help',
-              defaultMessage: 'Get help',
-            })}
-          </LinkCustom>
-        </GridItem>
       </GridGap>
     </Box>
   );

packages/core/admin/admin/src/pages/HomePage/tests/index.test.js

@@ -54,12 +54,27 @@ describe('Homepage', () => {
     singleTypes: [],
   }));
 
-  it('renders and matches the snapshot', () => {
+  test('should render all homepage links', () => {
-    const {
+    const { getByRole } = render(App);
-      container: { firstChild },
+    expect(getByRole('link', { name: /we are hiring/i })).toBeInTheDocument();
-    } = render(App);
+  });
 
-    expect(firstChild).toMatchSnapshot();
+  test.each([
+    'documentation discover the essential concepts, guides and instructions.',
+    'code example learn by using ready-made starters for your projects.',
+    'tutorials follow step-by-step instructions to use and customize strapi.',
+    'blog read the latest news about strapi and the ecosystem.',
+    'see our road map',
+    'github',
+    'discord',
+    'reddit',
+    'twitter',
+    'forum',
+    'we are hiring',
+  ])('should display %s link', (link) => {
+    const { getByRole } = render(App);
+
+    expect(getByRole('link', { name: new RegExp(link, 'i') })).toBeInTheDocument();
   });
 
   test('should display discord link for CE edition', () => {

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -10,9 +10,9 @@ import {
   useTracking,
 } from '@strapi/helper-plugin';
 import {
-  Box,
   Button,
   ContentLayout,
+  Flex,
   Grid,
   GridItem,
   HeaderLayout,
@@ -143,8 +143,8 @@ const ApplicationInfosPage = () => {
                         defaultMessage: 'strapi version',
                       })}
                     </Typography>
-                    <Typography as="dd">v{strapiVersion}</Typography>
+                    <Flex gap={3} direction="column" alignItems="start" as="dd">
-                    <Box paddingTop={3}>
+                      <Typography>v{strapiVersion}</Typography>
                       {shouldUpdateStrapi && (
                         <Link
                           href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
@@ -157,7 +157,7 @@ const ApplicationInfosPage = () => {
                           })}
                         </Link>
                       )}
-                    </Box>
+                    </Flex>
                   </GridItem>
                   <GridItem col={6} s={12}>
                     <Typography variant="sigma" textColor="neutral600" as="dt">
@@ -166,15 +166,16 @@ const ApplicationInfosPage = () => {
                         defaultMessage: 'current plan',
                       })}
                     </Typography>
-                    <Typography as="dd">
+                    <Flex gap={3} direction="column" alignItems="start" as="dd">
-                      {formatMessage({
+                      <Typography>
-                        id: currentPlan,
+                        {' '}
-                        defaultMessage: `${
+                        {formatMessage({
-                          appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
+                          id: currentPlan,
-                        }`,
+                          defaultMessage: `${
-                      })}
+                            appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
-                    </Typography>
+                          }`,
-                    <Box paddingTop={3}>
+                        })}
+                      </Typography>
                       <Link
                         href="https://strapi.io/pricing-self-hosted"
                         isExternal
@@ -185,7 +186,7 @@ const ApplicationInfosPage = () => {
                           defaultMessage: 'See all pricing plans',
                         })}
                       </Link>
-                    </Box>
+                    </Flex>
                   </GridItem>
 
                   <GridItem col={6} s={12}>

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/__snapshots__/index.test.js.snap

@@ -1,572 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Application page renders and matches the snapshot 1`] = `
-.c9 {
-  font-weight: 600;
-  font-size: 2rem;
-  line-height: 1.25;
-  color: #32324d;
-}
-
-.c14 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  color: #32324d;
-}
-
-.c15 {
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #666687;
-}
-
-.c21 {
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.25;
-  color: #32324d;
-}
-
-.c24 {
-  font-weight: 600;
-  font-size: 0.6875rem;
-  line-height: 1.45;
-  text-transform: uppercase;
-  color: #666687;
-}
-
-.c25 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  color: #32324d;
-}
-
-.c2 {
-  padding-bottom: 56px;
-}
-
-.c5 {
-  background: #f6f6f9;
-  padding-top: 40px;
-  padding-right: 56px;
-  padding-bottom: 40px;
-  padding-left: 56px;
-}
-
-.c12 {
-  padding-right: 8px;
-}
-
-.c16 {
-  padding-right: 56px;
-  padding-left: 56px;
-}
-
-.c19 {
-  background: #ffffff;
-  padding-top: 24px;
-  padding-right: 32px;
-  padding-bottom: 24px;
-  padding-left: 32px;
-  border-radius: 4px;
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-}
-
-.c26 {
-  padding-top: 12px;
-}
-
-.c28 {
-  padding-left: 8px;
-}
-
-.c6 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c7 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c17 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c18 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c18 > * + * {
-  margin-top: 24px;
-}
-
-.c20 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c20 > * + * {
-  margin-top: 16px;
-}
-
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 4px;
-  background: #ffffff;
-  border: 1px solid #dcdce4;
-  position: relative;
-  outline: none;
-}
-
-.c10 svg {
-  height: 12px;
-  width: 12px;
-}
-
-.c10 svg > g,
-.c10 svg path {
-  fill: #ffffff;
-}
-
-.c10[aria-disabled='true'] {
-  pointer-events: none;
-}
-
-.c10:after {
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-  border: 2px solid transparent;
-}
-
-.c10:focus-visible {
-  outline: none;
-}
-
-.c10:focus-visible:after {
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
-  border: 2px solid #4945ff;
-}
-
-.c13 {
-  height: 100%;
-}
-
-.c11 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: #4945ff;
-  border: 1px solid #4945ff;
-  height: 2rem;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c11 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c11 .c8 {
-  color: #ffffff;
-}
-
-.c11[aria-disabled='true'] {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c11[aria-disabled='true'] .c8 {
-  color: #666687;
-}
-
-.c11[aria-disabled='true'] svg > g,.c11[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c11[aria-disabled='true']:active {
-  border: 1px solid #dcdce4;
-  background: #eaeaef;
-}
-
-.c11[aria-disabled='true']:active .c8 {
-  color: #666687;
-}
-
-.c11[aria-disabled='true']:active svg > g,.c11[aria-disabled='true']:active svg path {
-  fill: #666687;
-}
-
-.c11:hover {
-  border: 1px solid #7b79ff;
-  background: #7b79ff;
-}
-
-.c11:active {
-  border: 1px solid #4945ff;
-  background: #4945ff;
-}
-
-.c11 svg > g,
-.c11 svg path {
-  fill: #ffffff;
-}
-
-.c27 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #4945ff;
-  position: relative;
-  outline: none;
-}
-
-.c27 svg path {
-  -webkit-transition: fill 150ms ease-out;
-  transition: fill 150ms ease-out;
-  fill: currentColor;
-}
-
-.c27 svg {
-  font-size: 0.625rem;
-}
-
-.c27 .c8 {
-  -webkit-transition: color 150ms ease-out;
-  transition: color 150ms ease-out;
-  color: currentColor;
-}
-
-.c27:hover {
-  color: #7b79ff;
-}
-
-.c27:active {
-  color: #271fe0;
-}
-
-.c27:after {
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-  border: 2px solid transparent;
-}
-
-.c27:focus-visible {
-  outline: none;
-}
-
-.c27:focus-visible:after {
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
-  border: 2px solid #4945ff;
-}
-
-.c29 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c22 {
-  display: grid;
-  grid-template-columns: repeat(12,1fr);
-  gap: 20px;
-}
-
-.c23 {
-  grid-column: span 6;
-  max-width: 100%;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr;
-}
-
-.c3 {
-  overflow-x: hidden;
-}
-
-.c4:focus-visible {
-  outline: none;
-}
-
-@media (max-width:68.75rem) {
-  .c23 {
-    grid-column: span 12;
-  }
-}
-
-@media (max-width:34.375rem) {
-  .c23 {
-    grid-column: span;
-  }
-}
-
-<div
-  class="c0 c1"
->
-  <div
-    class="c0 c2 c3"
-  >
-    <main
-      aria-labelledby="main-content-title"
-      class="c4"
-      id="main-content"
-      tabindex="-1"
-    >
-      <form>
-        <div
-          style="height: 0px;"
-        >
-          <div
-            class="c0 c5"
-            data-strapi-header="true"
-          >
-            <div
-              class="c0 c6"
-            >
-              <div
-                class="c0 c7"
-              >
-                <h1
-                  class="c8 c9"
-                >
-                  Overview
-                </h1>
-              </div>
-              <button
-                aria-disabled="false"
-                class="c10 c11"
-                type="submit"
-              >
-                <div
-                  aria-hidden="true"
-                  class="c0 c12 c13"
-                >
-                  <svg
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M20.727 2.97a.2.2 0 01.286 0l2.85 2.89a.2.2 0 010 .28L9.554 20.854a.2.2 0 01-.285 0l-9.13-9.243a.2.2 0 010-.281l2.85-2.892a.2.2 0 01.284 0l6.14 6.209L20.726 2.97z"
-                      fill="#212134"
-                    />
-                  </svg>
-                </div>
-                <span
-                  class="c8 c14"
-                >
-                  Save
-                </span>
-              </button>
-            </div>
-            <p
-              class="c8 c15"
-            >
-              Administration panel’s global information
-            </p>
-          </div>
-        </div>
-        <div
-          class="c0 c16"
-        >
-          <div
-            class="c0 c17 c18"
-          >
-            <div
-              class="c0 c19 c17 c20"
-            >
-              <h3
-                class="c8 c21"
-              >
-                Details
-              </h3>
-              <dl
-                class="c0 c22"
-              >
-                <div
-                  class="c23"
-                >
-                  <div
-                    class="c0 "
-                  >
-                    <dt
-                      class="c8 c24"
-                    >
-                      strapi version
-                    </dt>
-                    <dd
-                      class="c8 c25"
-                    >
-                      v
-                    </dd>
-                    <div
-                      class="c0 c26"
-                    />
-                  </div>
-                </div>
-                <div
-                  class="c23"
-                >
-                  <div
-                    class="c0 "
-                  >
-                    <dt
-                      class="c8 c24"
-                    >
-                      current plan
-                    </dt>
-                    <dd
-                      class="c8 c25"
-                    >
-                      Enterprise Edition
-                    </dd>
-                    <div
-                      class="c0 c26"
-                    >
-                      <a
-                        class="c27"
-                        href="https://strapi.io/pricing-self-hosted"
-                        rel="noreferrer noopener"
-                        target="_blank"
-                      >
-                        <span
-                          class="c8 c25"
-                        >
-                          See all pricing plans
-                        </span>
-                        <span
-                          aria-hidden="true"
-                          class="c0 c28 c29"
-                        >
-                          <svg
-                            fill="none"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M16.235 2.824a1.412 1.412 0 010-2.824h6.353C23.368 0 24 .633 24 1.412v6.353a1.412 1.412 0 01-2.823 0V4.82l-8.179 8.178a1.412 1.412 0 01-1.996-1.996l8.178-8.178h-2.945zm4.942 10.588a1.412 1.412 0 012.823 0v9.176c0 .78-.632 1.412-1.412 1.412H1.412C.632 24 0 23.368 0 22.588V1.412C0 .632.632 0 1.412 0h9.176a1.412 1.412 0 010 2.824H2.824v18.353h18.353v-7.765z"
-                              fill="#32324D"
-                            />
-                          </svg>
-                        </span>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="c23"
-                >
-                  <div
-                    class="c0 "
-                  >
-                    <dt
-                      class="c8 c24"
-                    >
-                      node version
-                    </dt>
-                    <dd
-                      class="c8 c25"
-                    />
-                  </div>
-                </div>
-              </dl>
-            </div>
-          </div>
-        </div>
-      </form>
-    </main>
-  </div>
-</div>
-`;

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js

@@ -65,14 +65,6 @@ describe('Application page', () => {
 
   afterAll(() => server.close());
 
-  it('renders and matches the snapshot', async () => {
-    const {
-      container: { firstChild },
-    } = render(App);
-
-    expect(firstChild).toMatchSnapshot();
-  });
-
   it('should not display link upgrade version if not necessary', () => {
     const { queryByText } = render(App);