Merge branch 'master' into imprv/108870-108871-108872-cypress

packages/app/src/components/Admin/Notification/NotificationSetting.jsx

@@ -35,7 +35,7 @@ const Badge = ({ isEnabled }) => {
     : <span className="badge badge-secondary">{t('external_notification.disabled')}</span>;
 };
 
-const SkeltonListItem = () => (
+const SkeletonListItem = () => (
   <li className="list-group-item">
     <h4 className="mb-2">
       <span className="badge badge-secondary">――</span>
@@ -144,7 +144,7 @@ function NotificationSetting(props) {
     <div data-testid="admin-notification">
       <h2 className="admin-setting-header">{t('external_notification.header_status')}</h2>
       <ul className="list-group">
-        { !isMounted && <SkeltonListItem />}
+        { !isMounted && <SkeletonListItem />}
         { isMounted && (
           <>
             <SlackIntegrationListItem isEnabled={isSlackEnabled} currentBotType={currentBotType} />

packages/app/src/components/InAppNotification/InAppNotificationPage.tsx

@@ -64,7 +64,7 @@ export const InAppNotificationPage: FC = () => {
 
     if (notificationData == null) {
       return (
-        <div className="wiki">
+        <div className="wiki" data-testid="grw-in-app-notification-page-spinner">
           <div className="text-muted text-center">
             <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
           </div>
@@ -138,7 +138,9 @@ export const InAppNotificationPage: FC = () => {
   };
 
   return (
-    <CustomNavAndContents navTabMapping={navTabMapping} tabContentClasses={['mt-4']} />
+    <div data-testid="grw-in-app-notification-page">
+      <CustomNavAndContents navTabMapping={navTabMapping} tabContentClasses={['mt-4']} />
+    </div>
   );
 };
 

packages/app/src/components/Navbar/AuthorInfo.module.scss

@@ -25,7 +25,7 @@ $date-font-size: 11px;
   }
 }
 
-.grw-author-info-skelton :global {
+.grw-author-info-skeleton :global {
   width: 139px;
   height: calc((#{$author-font-size} + #{$date-font-size}) * #{bs.$line-height-base});
 }

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -35,7 +35,7 @@ import AttachmentIcon from '../Icons/AttachmentIcon';
 import HistoryIcon from '../Icons/HistoryIcon';
 import PresentationIcon from '../Icons/PresentationIcon';
 import ShareLinkIcon from '../Icons/ShareLinkIcon';
-import { Skelton } from '../Skelton';
+import { Skeleton } from '../Skeleton';
 
 import type { AuthorInfoProps } from './AuthorInfo';
 import { GrowiSubNavigation } from './GrowiSubNavigation';
@@ -45,22 +45,22 @@ import AuthorInfoStyles from './AuthorInfo.module.scss';
 import PageEditorModeManagerStyles from './PageEditorModeManager.module.scss';
 
 
-const AuthorInfoSkelton = () => <Skelton additionalClass={`${AuthorInfoStyles['grw-author-info-skelton']} py-1`} />;
+const AuthorInfoSkeleton = () => <Skeleton additionalClass={`${AuthorInfoStyles['grw-author-info-skeleton']} py-1`} />;
 
 
 const PageEditorModeManager = dynamic(
   () => import('./PageEditorModeManager'),
-  { ssr: false, loading: () => <Skelton additionalClass={`${PageEditorModeManagerStyles['grw-page-editor-mode-manager-skelton']}`} /> },
+  { ssr: false, loading: () => <Skeleton additionalClass={`${PageEditorModeManagerStyles['grw-page-editor-mode-manager-skeleton']}`} /> },
 );
 // TODO: If enable skeleton, we get hydration error when create a page from PageCreateModal
-// { ssr: false, loading: () => <Skelton additionalClass='btn-skelton py-2' /> },
+// { ssr: false, loading: () => <Skeleton additionalClass='btn-skeleton py-2' /> },
 const SubNavButtons = dynamic<SubNavButtonsProps>(
   () => import('./SubNavButtons').then(mod => mod.SubNavButtons),
   { ssr: false, loading: () => <></> },
 );
 const AuthorInfo = dynamic<AuthorInfoProps>(() => import('./AuthorInfo').then(mod => mod.AuthorInfo), {
   ssr: false,
-  loading: AuthorInfoSkelton,
+  loading: AuthorInfoSkeleton,
 });
 
 type PageOperationMenuItemsProps = {
@@ -387,13 +387,13 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
               <li className="pb-1">
                 { currentPage != null
                   ? <AuthorInfo user={currentPage.creator as IUser} date={currentPage.createdAt} mode="create" locate="subnav" />
-                  : <AuthorInfoSkelton />
+                  : <AuthorInfoSkeleton />
                 }
               </li>
               <li className="mt-1 pt-1 border-top">
                 { currentPage != null
                   ? <AuthorInfo user={currentPage.lastUpdateUser as IUser} date={currentPage.updatedAt} mode="update" locate="subnav" />
-                  : <AuthorInfoSkelton />
+                  : <AuthorInfoSkeleton />
                 }
               </li>
             </ul>

packages/app/src/components/Navbar/GrowiSubNavigation.module.scss

@@ -59,7 +59,7 @@
       }
     }
 
-    .btn-skelton {
+    .btn-skeleton {
       @extend %subnav-buttons-height;
       width: 100%;
     }
@@ -140,7 +140,7 @@
         min-height: 90px;
       }
 
-      .btn-skelton {
+      .btn-skeleton {
         @extend %compact-subnav-buttons-height;
         width: 100%;
       }

packages/app/src/components/Navbar/GrowiSubNavigation.tsx

@@ -6,7 +6,7 @@ import {
   EditorMode, useEditorMode,
 } from '~/stores/ui';
 
-import { TagLabelsSkelton } from '../Page/TagLabels';
+import { TagLabelsSkeleton } from '../Page/TagLabels';
 import PagePathNav from '../PagePathNav';
 
 import DrawerToggler from './DrawerToggler';
@@ -17,7 +17,7 @@ import styles from './GrowiSubNavigation.module.scss';
 
 const TagLabels = dynamic(() => import('../Page/TagLabels').then(mod => mod.TagLabels), {
   ssr: false,
-  loading: TagLabelsSkelton,
+  loading: TagLabelsSkeleton,
 });
 
 
@@ -71,7 +71,7 @@ export const GrowiSubNavigation = (props: GrowiSubNavigationProps): JSX.Element
             <div className="grw-taglabels-container">
               { tags != null
                 ? <TagLabels tags={tags} isGuestUser={isGuestUser ?? false} tagsUpdateInvoked={tagsUpdatedHandler} />
-                : <TagLabelsSkelton />
+                : <TagLabelsSkeleton />
               }
             </div>
           ) }

packages/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -35,7 +35,7 @@ $btn-line-height: 1.2rem;
   }
 }
 
-.grw-page-editor-mode-manager-skelton :global {
+.grw-page-editor-mode-manager-skeleton :global {
 
   width: 213px;
   height: calc($btn-line-height + bs.$btn-padding-y*2 + bs.$btn-border-width*2);

packages/app/src/components/Page/TagLabels.module.scss

@@ -11,7 +11,7 @@ $grw-tag-label-font-size: 12px;
 }
 
 
-.grw-tag-labels-skelton :global {
+.grw-tag-labels-skeleton :global {
   width: 137px;
   height: calc(#{$grw-tag-label-font-size} + #{bs.$badge-padding-y} * 2);
   font-size: $grw-tag-label-font-size; // set font-size to use the same em value in bs.$badge-padding-y(https://getbootstrap.jp/docs/5.0/components/badge/#variables)

packages/app/src/components/Page/TagLabels.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState } from 'react';
 
-import { Skelton } from '../Skelton';
+import { Skeleton } from '../Skeleton';
 
 import RenderTagLabels from './RenderTagLabels';
 import TagEditModal from './TagEditModal';
@@ -13,8 +13,8 @@ type Props = {
   tagsUpdateInvoked?: (tags: string[]) => Promise<void> | void,
 }
 
-export const TagLabelsSkelton = (): JSX.Element => {
-  return <Skelton additionalClass={`${styles['grw-tag-labels-skelton']} py-1`} />;
+export const TagLabelsSkeleton = (): JSX.Element => {
+  return <Skeleton additionalClass={`${styles['grw-tag-labels-skeleton']} py-1`} />;
 };
 
 export const TagLabels:FC<Props> = (props: Props) => {
@@ -31,7 +31,7 @@ export const TagLabels:FC<Props> = (props: Props) => {
   };
 
   if (tags == null) {
-    return <TagLabelsSkelton />;
+    return <TagLabelsSkeleton />;
   }
 
   return (

packages/app/src/components/PageComment.module.scss

@@ -14,7 +14,7 @@
   }
 
   // TODO: Refacotr Soft-coding
-  .page-comment-button-skelton {
+  .page-comment-button-skeleton {
     width: 70.0167px;
     height: 26.3833px;
     margin-top: 0.5em;

packages/app/src/components/PageComment.tsx

@@ -18,7 +18,7 @@ import { Comment } from './PageComment/Comment';
 import { CommentEditorProps } from './PageComment/CommentEditor';
 import { DeleteCommentModalProps } from './PageComment/DeleteCommentModal';
 import { ReplyComments } from './PageComment/ReplyComments';
-import { PageCommentSkelton } from './PageCommentSkelton';
+import { PageCommentSkeleton } from './PageCommentSkeleton';
 
 import styles from './PageComment.module.scss';
 
@@ -123,7 +123,7 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
       return <PageCommentRoot />;
     }
     return (
-      <PageCommentSkelton commentTitleClasses={commentTitleClasses}/>
+      <PageCommentSkeleton commentTitleClasses={commentTitleClasses}/>
     );
   }
 

packages/app/src/components/PageComment/Comment.module.scss

@@ -86,7 +86,7 @@
   }
 
   // TODO: Refacotr Soft-coding
-  .page-comment-comment-body-skelton {
+  .page-comment-comment-body-skeleton {
     position: relative;
     height: 66px;
     padding: 1em;

packages/app/src/components/PageCommentSkelton.tsx → packages/app/src/components/PageCommentSkeleton.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
-import { Skelton } from './Skelton';
+import { Skeleton } from './Skeleton';
 
 import styles from './PageComment.module.scss';
 import CommentStyles from './PageComment/Comment.module.scss';
 import CommentEditorStyles from './PageComment/CommentEditor.module.scss';
 
-type PageCommentSkeltonProps = {
+type PageCommentSkeletonProps = {
   commentTitleClasses?: string,
   roundedPill?: boolean,
 }
 
-export const PageCommentSkelton = (props: PageCommentSkeltonProps): JSX.Element => {
+export const PageCommentSkeleton = (props: PageCommentSkeletonProps): JSX.Element => {
   const {
     commentTitleClasses,
   } = props;
@@ -27,27 +27,27 @@ export const PageCommentSkelton = (props: PageCommentSkeltonProps): JSX.Element
               <div className={`${CommentStyles['comment-styles']} page-comment-thread pb-5  page-comment-thread-no-replies`}>
                 <div className='page-comment flex-column'>
                   <div className='page-commnet-writer'>
-                    <Skelton additionalClass='rounded-circle picture' roundedPill />
+                    <Skeleton additionalClass='rounded-circle picture' roundedPill />
                   </div>
-                  <Skelton additionalClass="page-comment-comment-body-skelton grw-skelton" />
+                  <Skeleton additionalClass="page-comment-comment-body-skeleton grw-skeleton" />
                 </div>
                 <div className='page-comment flex-column ml-4 ml-sm-5 mr-3'>
                   <div className='page-commnet-writer mt-3'>
-                    <Skelton additionalClass='rounded-circle picture' roundedPill />
+                    <Skeleton additionalClass='rounded-circle picture' roundedPill />
                   </div>
-                  <Skelton additionalClass="page-comment-comment-body-skelton grw-skelton mt-3" />
+                  <Skeleton additionalClass="page-comment-comment-body-skeleton grw-skeleton mt-3" />
                 </div>
                 <div className="text-right">
-                  <Skelton additionalClass="page-comment-button-skelton btn btn-outline-secondary btn-sm grw-skelton" />
+                  <Skeleton additionalClass="page-comment-button-skeleton btn btn-outline-secondary btn-sm grw-skeleton" />
                 </div>
               </div>
             </div>
             <div className={`${CommentEditorStyles['comment-editor-styles']} form page-comment-form`}>
               <div className='comment-form'>
                 <div className='comment-form-user'>
-                  <Skelton additionalClass='rounded-circle picture' roundedPill />
+                  <Skeleton additionalClass='rounded-circle picture' roundedPill />
                 </div>
-                <Skelton additionalClass="page-comment-commenteditorlazyrenderer-body-skelton grw-skelton" />
+                <Skeleton additionalClass="page-comment-commenteditorlazyrenderer-body-skeleton grw-skeleton" />
               </div>
             </div>
           </div>

packages/app/src/components/PageContentFooter.module.scss

@@ -7,7 +7,7 @@
   }
 }
 // TODO: Should Soft Coding see: https://github.com/weseek/growi/pull/6404
-.page-content-footer-skelton :global {
+.page-content-footer-skeleton :global {
   width: 300px;
   height: 20px;
 }

packages/app/src/components/PageContentFooter.tsx

@@ -6,13 +6,13 @@ import dynamic from 'next/dynamic';
 import { useSWRxCurrentPage } from '~/stores/page';
 
 import type { AuthorInfoProps } from './Navbar/AuthorInfo';
-import { Skelton } from './Skelton';
+import { Skeleton } from './Skeleton';
 
 import styles from './PageContentFooter.module.scss';
 
 const AuthorInfo = dynamic<AuthorInfoProps>(() => import('./Navbar/AuthorInfo').then(mod => mod.AuthorInfo), {
   ssr: false,
-  loading: () => <Skelton additionalClass={`${styles['page-content-footer-skelton']} mb-3`} />,
+  loading: () => <Skeleton additionalClass={`${styles['page-content-footer-skeleton']} mb-3`} />,
 });
 
 export type PageContentFooterProps = {

packages/app/src/components/Skelton.tsx → packages/app/src/components/Skeleton.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 
-type SkeltonProps = {
+type SkeletonProps = {
   additionalClass?: string,
   roundedPill?: boolean,
 }
 
-export const Skelton = (props: SkeltonProps): JSX.Element => {
+export const Skeleton = (props: SkeletonProps): JSX.Element => {
   const {
     additionalClass, roundedPill,
   } = props;
 
   return (
     <div className={`${additionalClass ?? ''}`}>
-      <div className={`grw-skelton h-100 w-100 ${roundedPill ?? ''}`}></div>
+      <div className={`grw-skeleton h-100 w-100 ${roundedPill ?? ''}`}></div>
     </div>
   );
 };

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -524,8 +524,8 @@ ul.pagination {
 }
 
 /*
- * skelton
+ * skeleton
  */
-.grw-skelton {
+.grw-skeleton {
   background-color: lighten($bgcolor-subnav, 15%);
 }

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -416,8 +416,8 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 }
 
 /*
- * skelton
+ * skeleton
  */
-.grw-skelton {
+.grw-skeleton {
   background-color: darken($bgcolor-subnav, 10%);
 }

packages/app/test/cypress/integration/20-basic-features/access-to-page.spec.ts

@@ -17,6 +17,7 @@ context('Access to page', () => {
 
   it('/Sandbox with anchor hash is successfully loaded', () => {
     cy.visit('/Sandbox#Headers');
+    cy.waitUntilSkeletonDisappear();
 
     // hide fab // disable fab for sticky-events warning
     // cy.getByTestid('grw-fab-container').invoke('attr', 'style', 'display: none');
@@ -26,7 +27,6 @@ context('Access to page', () => {
     // https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/21709814#21709814
     cy.get('#mdcont-headers').invoke('removeClass', 'blink');
 
-    cy.get('.grw-skelton').should('not.exist');
     cy.screenshot(`${ssPrefix}-sandbox-headers`);
   });
 
@@ -41,7 +41,7 @@ context('Access to page', () => {
 
   it('/Sandbox with edit is successfully loaded', () => {
     cy.visit('/Sandbox');
-    cy.get('.grw-skelton', { timeout: 30000 }).should('not.exist');
+    cy.waitUntilSkeletonDisappear();
     cy.get('#grw-subnav-container', { timeout: 30000 }).should('be.visible').within(()=>{
       cy.getByTestid('editor-button', { timeout: 30000 }).should('be.visible').click();
     })
@@ -52,7 +52,7 @@ context('Access to page', () => {
   it('/user/admin is successfully loaded', () => {
     cy.visit('/user/admin', {  });
 
-    cy.get('.grw-skelton').should('not.exist');
+    cy.waitUntilSkeletonDisappear();
     // for check download toc data
     cy.get('.toc-link').should('be.visible');
 
@@ -184,14 +184,18 @@ context('Access to /me/all-in-app-notifications', () => {
     cy.collapseSidebar(true);
   });
 
-  it('All In-App Notification list is successfully loaded', () => {
+  it('All In-App Notification list is successfully loaded', { scrollBehavior: false },() => {
     cy.visit('/');
-    cy.get('.notification-wrapper > a').click();
+    cy.get('.notification-wrapper').click();
     cy.get('.notification-wrapper > .dropdown-menu > a').click();
 
+    cy.getByTestid('grw-in-app-notification-page').should('be.visible');
+    cy.getByTestid('grw-in-app-notification-page-spinner').should('not.exist');
+
     cy.screenshot(`${ssPrefix}-see-all`, { capture: 'viewport' });
 
     cy.get('.grw-custom-nav-tab > div > ul > li:nth-child(2) > a').click();
+    cy.getByTestid('grw-in-app-notification-page-spinner').should('not.exist');
 
     cy.screenshot(`${ssPrefix}-see-unread`, { capture: 'viewport' });
    });

packages/app/test/cypress/integration/20-basic-features/click-page-icons.spec.ts

@@ -77,7 +77,7 @@ context('Click page icons button', () => {
 
   it('Successfully display list of "seen by user"', () => {
     cy.visit('/Sandbox');
-    cy.get('.grw-skelton').should('not.exist');
+    cy.waitUntilSkeletonDisappear();
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(2000); // wait for get method
     cy.get('#grw-subnav-container').within(() => {

packages/app/test/cypress/integration/60-home/home.spec.ts

@@ -15,13 +15,13 @@ context('Access Home', () => {
     cy.getByTestid('grw-personal-dropdown').click();
     cy.getByTestid('grw-personal-dropdown').find('.dropdown-menu .btn-group > .btn-outline-secondary:eq(0)').click();
 
-    cy.get('.grw-skelton').should('not.exist');
-    // for check download toc data
-    cy.get('.toc-link').should('be.visible');
-
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(2000); // wait for calcViewHeight and rendering
 
+    cy.waitUntilSkeletonDisappear();
+    // for check download toc data
+    cy.get('.toc-link').should('be.visible');
+
     // same screenshot is taken in access-to-page.spec
     cy.screenshot(`${ssPrefix}-visit-home`);
   });

packages/app/test/cypress/support/commands.ts

@@ -41,6 +41,14 @@ Cypress.Commands.add('login', (username, password) => {
   });
 });
 
+/**
+ * use only for the pages which use component with skeleton
+ */
+Cypress.Commands.add('waitUntilSkeletonDisappear', () => {
+  cy.get('.grw-skeleton').should('exist');
+  cy.get('.grw-skeleton').should('not.exist');
+});
+
 let isSidebarCollapsed: boolean | undefined;
 
 Cypress.Commands.add('collapseSidebar', (isCollapsed, force=false) => {

packages/app/test/cypress/support/index.ts

@@ -37,6 +37,7 @@ declare global {
        getByTestid(selector: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<Element>>,
        login(username: string, password: string): Chainable<void>,
        collapseSidebar(isCollapsed: boolean, force?: boolean): Chainable<void>,
+       waitUntilSkeletonDisappear(): Chainable<void>,
     }
   }
 }