Merge pull request #7286 from weseek/fix/shalink-management-button-disabled

fix: Share link management button is not available

.github/workflows/reusable-app-prod.yml

@@ -196,7 +196,7 @@ jobs:
       fail-fast: false
       matrix:
         # List string expressions that is comma separated ids of tests in "test/cypress/integration"
-        spec-group: ['10', '20', '21', '30', '40', '50', '60']
+        spec-group: ['10', '20', '21', '22', '30', '40', '50', '60']
 
     services:
       mongodb:

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

@@ -35,6 +35,7 @@ import AttachmentIcon from '../Icons/AttachmentIcon';
 import HistoryIcon from '../Icons/HistoryIcon';
 import PresentationIcon from '../Icons/PresentationIcon';
 import ShareLinkIcon from '../Icons/ShareLinkIcon';
+import { NotAvailable } from '../NotAvailable';
 import { NotAvailableForNow } from '../NotAvailableForNow';
 import { Skeleton } from '../Skeleton';
 
@@ -140,17 +141,20 @@ const PageOperationMenuItems = (props: PageOperationMenuItemsProps): JSX.Element
         {t('attachment_data')}
       </DropdownItem>
 
-      <DropdownItem
-        onClick={() => openAccessoriesModal(PageAccessoriesModalContents.ShareLink)}
-        disabled={isGuestUser || isSharedUser || isLinkSharingDisabled}
-        data-testid="open-page-accessories-modal-btn-with-share-link-management-data-tab"
-        className="grw-page-control-dropdown-item"
-      >
-        <span className="grw-page-control-dropdown-icon">
-          <ShareLinkIcon />
-        </span>
-        {t('share_links.share_link_management')}
-      </DropdownItem>
+      { !isGuestUser && !isSharedUser && (
+        <NotAvailable isDisabled={isLinkSharingDisabled ?? false} title="Disabled by admin">
+          <DropdownItem
+            onClick={() => openAccessoriesModal(PageAccessoriesModalContents.ShareLink)}
+            data-testid="open-page-accessories-modal-btn-with-share-link-management-data-tab"
+            className="grw-page-control-dropdown-item"
+          >
+            <span className="grw-page-control-dropdown-icon">
+              <ShareLinkIcon />
+            </span>
+            {t('share_links.share_link_management')}
+          </DropdownItem>
+        </NotAvailable>
+      ) }
     </>
   );
 };

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

@@ -15,6 +15,10 @@ import styles from './GrowiSubNavigationSwitcher.module.scss';
 
 const logger = loggerFactory('growi:cli:GrowiSubNavigationSticky');
 
+export type GrowiSubNavigationSwitcherProps = {
+  isLinkSharingDisabled: boolean,
+}
+
 /**
  * GrowiSubNavigation
  *
@@ -22,7 +26,8 @@ const logger = loggerFactory('growi:cli:GrowiSubNavigationSticky');
  *   #grw-subnav-fixed-container element
  *   #grw-subnav-sticky-trigger element
  */
-export const GrowiSubNavigationSwitcher = (): JSX.Element => {
+export const GrowiSubNavigationSwitcher = (props: GrowiSubNavigationSwitcherProps): JSX.Element => {
+  const { isLinkSharingDisabled } = props;
 
   const { data: currentPage } = useSWRxCurrentPage();
   const { data: isSidebarCollapsed } = useSidebarCollapsed();
@@ -96,7 +101,7 @@ export const GrowiSubNavigationSwitcher = (): JSX.Element => {
         ref={fixedContainerRef}
         style={{ width }}
       >
-        <GrowiContextualSubNavigation currentPage={currentPage} isCompactMode isLinkSharingDisabled />
+        <GrowiContextualSubNavigation currentPage={currentPage} isCompactMode isLinkSharingDisabled={isLinkSharingDisabled} />
       </div>
     </div>
   );

packages/app/src/components/ShareLink/ShareLink.tsx

@@ -64,6 +64,7 @@ const ShareLink = (): JSX.Element => {
           className="btn btn-outline-secondary d-block mx-auto px-5"
           type="button"
           onClick={toggleShareLinkFormHandler}
+          data-testid="btn-sharelink-toggleform"
         >
           {isOpenShareLinkForm ? t('Close') : t('New')}
         </button>

packages/app/src/components/ShareLink/ShareLinkForm.tsx

@@ -199,7 +199,7 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
             />
           </div>
         </div>
-        <button type="button" className="btn btn-primary d-block mx-auto px-5" onClick={handleIssueShareLink}>
+        <button type="button" className="btn btn-primary d-block mx-auto px-5" onClick={handleIssueShareLink} data-testid="btn-sharelink-issue">
           {t('share_links.Issue')}
         </button>
       </div>

packages/app/src/pages/[[...path]].page.tsx

@@ -54,10 +54,10 @@ import loggerFactory from '~/utils/logger';
 // import { isUserPage, isTrashPage, isSharedPage } from '~/utils/path-utils';
 
 // import GrowiSubNavigation from '../client/js/components/Navbar/GrowiSubNavigation';
-// import GrowiSubNavigationSwitcher from '../client/js/components/Navbar/GrowiSubNavigationSwitcher';
 import { DescendantsPageListModal } from '../components/DescendantsPageListModal';
 import { BasicLayoutWithEditorMode } from '../components/Layout/BasicLayout';
 import GrowiContextualSubNavigationSubstance from '../components/Navbar/GrowiContextualSubNavigation';
+import type { GrowiSubNavigationSwitcherProps } from '../components/Navbar/GrowiSubNavigationSwitcher';
 import DisplaySwitcher from '../components/Page/DisplaySwitcher';
 // import { serializeUserSecurely } from '../server/models/serializers/user-serializer';
 // import PageStatusAlert from '../client/js/components/PageStatusAlert';
@@ -91,7 +91,7 @@ const NotCreatablePage = dynamic(() => import('../components/NotCreatablePage').
 const ForbiddenPage = dynamic(() => import('../components/ForbiddenPage'), { ssr: false });
 const UnsavedAlertDialog = dynamic(() => import('../components/UnsavedAlertDialog'), { ssr: false });
 const PageSideContents = dynamic<PageSideContentsProps>(() => import('../components/PageSideContents').then(mod => mod.PageSideContents), { ssr: false });
-const GrowiSubNavigationSwitcher = dynamic(() => import('../components/Navbar/GrowiSubNavigationSwitcher')
+const GrowiSubNavigationSwitcher = dynamic<GrowiSubNavigationSwitcherProps>(() => import('../components/Navbar/GrowiSubNavigationSwitcher')
   .then(mod => mod.GrowiSubNavigationSwitcher), { ssr: false });
 const UsersHomePageFooter = dynamic<UsersHomePageFooterProps>(() => import('../components/UsersHomePageFooter')
   .then(mod => mod.UsersHomePageFooter), { ssr: false });
@@ -351,7 +351,7 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
           </div>
         </header>
         <div className="d-edit-none">
-          <GrowiSubNavigationSwitcher />
+          <GrowiSubNavigationSwitcher isLinkSharingDisabled={props.disableLinkSharing} />
         </div>
 
         <div id="grw-subnav-sticky-trigger" className="sticky-top"></div>

packages/app/test/cypress/integration/22-sharelink/22-sharelink--access-to-sharelink.spec.ts

@@ -0,0 +1,59 @@
+context('Access to sharelink by guest', () => {
+  const ssPrefix = 'access-to-sharelink-by-guest-';
+
+  let createdSharelinkId: string;
+
+  it('Prepare sharelink', () => {
+    // login
+    cy.fixture("user-admin.json").then(user => {
+      cy.login(user.username, user.password);
+    });
+    cy.visit('/Sandbox/Bootstrap4');
+
+    // open dropdown
+    cy.waitUntil(() => {
+      // do
+      cy.getByTestid('grw-contextual-sub-nav').should('be.visible').within(() => {
+        cy.getByTestid('open-page-item-control-btn').find('button').first().as('btn').click();
+      });
+      // wait until
+      return cy.get('body').within(() => {
+        return Cypress.$('.dropdown-menu.show').is(':visible');
+      });
+    });
+
+    // open modal
+    cy.get('.dropdown-menu.show').should('be.visible').within(() => {
+      cy.getByTestid('open-page-accessories-modal-btn-with-share-link-management-data-tab').click({force: true});
+    });
+    cy.waitUntilSpinnerDisappear();
+    cy.getByTestid('page-accessories-modal').should('be.visible');
+    cy.getByTestid('share-link-management').should('be.visible');
+
+    // create share link
+    cy.getByTestid('share-link-management').within(() => {
+      cy.getByTestid('btn-sharelink-toggleform').should('be.visible').click();
+      cy.getByTestid('btn-sharelink-issue').should('be.visible').click();
+
+      // store id
+      cy.get('tbody > tr > td > div > span').first().then((elem) => {
+        createdSharelinkId = elem.text();
+      });
+    });
+
+    cy.getByTestid('page-accessories-modal').within(() => { cy.screenshot(`${ssPrefix}-sharelink-created`) });
+  });
+
+  it('The sharelink page is successfully loaded', () => {
+    cy.visit(`/share/${createdSharelinkId}`);
+
+    cy.getByTestid('grw-contextual-sub-nav').should('be.visible');
+    cy.get('.wiki').should('be.visible');
+
+    cy.waitUntilSkeletonDisappear();
+    cy.screenshot(`${ssPrefix}-access-to-sharelink`);
+  });
+
+});
+
+