feat(core): adjust share menu ui (#7931)

https://github.com/user-attachments/assets/6538c046-3872-4c98-a389-81b86a2978a4

packages/frontend/component/src/components/disable-public-link/index.tsx

@@ -1,22 +0,0 @@
-import { useI18n } from '@affine/i18n';
-
-import type { ConfirmModalProps } from '../../ui/modal';
-import { ConfirmModal } from '../../ui/modal';
-
-export const PublicLinkDisableModal = (props: ConfirmModalProps) => {
-  const t = useI18n();
-
-  return (
-    <ConfirmModal
-      title={t['com.affine.publicLinkDisableModal.title']()}
-      description={t['com.affine.publicLinkDisableModal.description']()}
-      cancelText={t['com.affine.publicLinkDisableModal.button.cancel']()}
-      confirmText={t['com.affine.publicLinkDisableModal.button.disable']()}
-      confirmButtonOptions={{
-        variant: 'error',
-        ['data-testid' as string]: 'confirm-enable-affine-cloud-button',
-      }}
-      {...props}
-    />
-  );
-};

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx

@@ -1,5 +1,4 @@
 import { notify, Skeleton } from '@affine/component';
-import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
 import { Button } from '@affine/component/ui/button';
 import { Menu, MenuItem, MenuTrigger } from '@affine/component/ui/menu';
 import { openSettingModalAtom } from '@affine/core/atoms';
@@ -14,10 +13,10 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
 import { PublicPageMode } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import {
+  BlockIcon,
   CollaborationIcon,
   DoneIcon,
   EdgelessIcon,
-  LinkIcon,
   LockIcon,
   PageIcon,
   SingleSelectSelectSolidIcon,
@@ -26,7 +25,7 @@ import {
 import { useLiveData, useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import { useSetAtom } from 'jotai';
-import { Suspense, useCallback, useEffect, useState } from 'react';
+import { Suspense, useCallback, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import { CloudSvg } from '../cloud-svg';
@@ -75,9 +74,6 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
   const baseUrl = useLiveData(serverConfig.config$.map(c => c?.baseUrl));
   const isLoading =
     isSharedPage === null || sharedMode === null || baseUrl === null;
-  const [showDisable, setShowDisable] = useState(false);
-
-  const currentDocMode = useLiveData(editor.mode$);
 
   const permissionService = useService(WorkspacePermissionService);
   const isOwner = useLiveData(permissionService.permission.isOwner$);
@@ -152,15 +148,8 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
       });
       console.log(err);
     }
-    setShowDisable(false);
   }, [shareInfoService, t]);
 
-  const onClickDisable = useCallback(() => {
-    if (isSharedPage) {
-      setShowDisable(true);
-    }
-  }, [isSharedPage]);
-
   const isMac = environment.isBrowser && environment.isMacOs;
 
   const { onClickCopyLink } = useSharingUrl({
@@ -207,7 +196,7 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
             }}
             items={
               <>
-                <MenuItem prefixIcon={<LockIcon />} onSelect={onClickDisable}>
+                <MenuItem prefixIcon={<LockIcon />} onSelect={onDisablePublic}>
                   <div className={styles.publicItemRowStyle}>
                     <div>
                       {t['com.affine.share-menu.option.link.no-access']()}
@@ -248,20 +237,9 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
           <div className={styles.labelStyle}>
             {t['com.affine.share-menu.option.permission.label']()}
           </div>
-          <Menu
+          <Button className={styles.menuTriggerStyle} disabled>
-            contentOptions={{
+            {t['com.affine.share-menu.option.permission.can-edit']()}
-              align: 'end',
+          </Button>
-            }}
-            items={
-              <MenuItem>
-                {t['com.affine.share-menu.option.permission.can-edit']()}
-              </MenuItem>
-            }
-          >
-            <MenuTrigger className={styles.menuTriggerStyle} disabled>
-              {t['com.affine.share-menu.option.permission.can-edit']()}
-            </MenuTrigger>
-          </Menu>
         </div>
       </div>
       {isOwner && (
@@ -307,14 +285,9 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
               >
                 {t['com.affine.share-menu.copy.edgeless']()}
               </MenuItem>
-              <MenuItem prefixIcon={<LinkIcon />} onSelect={onCopyBlockLink}>
+              <MenuItem prefixIcon={<BlockIcon />} onSelect={onCopyBlockLink}>
                 {t['com.affine.share-menu.copy.block']()}
               </MenuItem>
-              {currentDocMode === 'edgeless' && (
-                <MenuItem prefixIcon={<LinkIcon />} onSelect={onCopyBlockLink}>
-                  {t['com.affine.share-menu.copy.frame']()}
-                </MenuItem>
-              )}
             </>
           }
         >
@@ -327,12 +300,6 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
           />
         </Menu>
       </div>
-
-      <PublicLinkDisableModal
-        open={showDisable}
-        onConfirm={onDisablePublic}
-        onOpenChange={setShowDisable}
-      />
     </div>
   );
 };

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -81,7 +81,6 @@ export const PageOperationCell = ({
   );
   const currentWorkspace = workspaceService.workspace;
   const { setTrashModal } = useTrashModalHelper(currentWorkspace.docCollection);
-  const [openDisableShared, setOpenDisableShared] = useState(false);
   const favourite = useLiveData(favAdapter.isFavorite$(page.id, 'doc'));
   const workbench = workbenchService.workbench;
   const { duplicate } = useBlockSuiteMetaHelper(currentWorkspace.docCollection);
@@ -94,6 +93,7 @@ export const PageOperationCell = ({
   }, []);
 
   const onDisablePublicSharing = useCallback(() => {
+    //TODO(@EYHN): implement disable public sharing
     toast('Successfully disabled', {
       portal: document.body,
     });
@@ -154,9 +154,7 @@ export const PageOperationCell = ({
       {page.isPublic && (
         <DisablePublicSharing
           data-testid="disable-public-sharing"
-          onSelect={() => {
+          onSelect={onDisablePublicSharing}
-            setOpenDisableShared(true);
-          }}
         />
       )}
       {isInAllowList && (
@@ -227,11 +225,6 @@ export const PageOperationCell = ({
           docId={blocksuiteDoc.id}
         />
       ) : null}
-      <DisablePublicSharing.DisablePublicSharingModal
-        onConfirm={onDisablePublicSharing}
-        open={openDisableShared}
-        onOpenChange={setOpenDisableShared}
-      />
     </>
   );
 };

packages/frontend/core/src/components/page-list/operation-menu-items/disable-public-sharing.tsx

@@ -1,6 +1,5 @@
 import type { MenuItemProps } from '@affine/component';
 import { MenuItem } from '@affine/component';
-import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
 import { useI18n } from '@affine/i18n';
 import { ShareIcon } from '@blocksuite/icons/rc';
 
@@ -12,5 +11,3 @@ export const DisablePublicSharing = (props: MenuItemProps) => {
     </MenuItem>
   );
 };
-
-DisablePublicSharing.DisablePublicSharingModal = PublicLinkDisableModal;