✨ front: WIP: Add separate modal for public link (#50 v3)

tdrive/frontend/src/app/views/client/body/drive/browser.tsx

@@ -29,6 +29,7 @@ import { CreateModalAtom } from './modals/create';
 import { UploadModelAtom } from './modals/upload'
 import { PropertiesModal } from './modals/properties';
 import { AccessModal } from './modals/update-access';
+import { PublicLinkModal } from './modals/public-link';
 import { VersionsModal } from './modals/versions';
 import { UsersModal } from './modals/manage-users';
 import { SharedFilesTable } from './shared-files-table';
@@ -267,6 +268,7 @@ export default memo(
             {role == "admin" && <UsersModal />}
             <VersionsModal />
             <AccessModal />
+            <PublicLinkModal />
             <PropertiesModal />
             <ConfirmDeleteModal />
             <ConfirmTrashModal />

tdrive/frontend/src/app/views/client/body/drive/context-menu.tsx

@@ -8,6 +8,7 @@ import { UploadModelAtom } from './modals/upload'
 import { PropertiesModalAtom } from './modals/properties';
 import { SelectorModalAtom } from './modals/selector';
 import { AccessModalAtom } from './modals/update-access';
+import { PublicLinkModalAtom } from './modals/public-link';
 import { VersionsModalAtom } from './modals/versions';
 import { UsersModalAtom } from './modals/manage-users';
 import { DriveApiClient, getPublicLinkToken } from '@features/drive/api-client/api-client';
@@ -46,6 +47,7 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
   const setConfirmTrashModalState = useSetRecoilState(ConfirmTrashModalAtom);
   const setVersionModal = useSetRecoilState(VersionsModalAtom);
   const setAccessModalState = useSetRecoilState(AccessModalAtom);
+  const setPublicLinkModalState = useSetRecoilState(PublicLinkModalAtom);
   const setPropertiesModalState = useSetRecoilState(PropertiesModalAtom);
   const setUsersModalState = useSetRecoilState(UsersModalAtom);
   const { open: preview } = useDrivePreview();
@@ -82,7 +84,7 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
               type: 'menu',
               text: Languages.t('components.item_context_menu.share'),
               hide: access === 'read' || getPublicLinkToken() || inTrash,
-              onClick: () => setAccessModalState({ open: true, id: item.id }),
+              onClick: () => setPublicLinkModalState({ open: true, id: item.id }),
             },
             {
               type: 'menu',

tdrive/frontend/src/app/views/client/body/drive/modals/public-link/index.tsx

@@ -0,0 +1,75 @@
+import { atom, useRecoilState } from 'recoil';
+import { useState, useEffect } from 'react';
+
+import { useDriveItem } from '@features/drive/hooks/use-drive-item';
+import { useCurrentCompany } from '@features/companies/hooks/use-companies';
+import Languages from 'features/global/services/languages-service';
+import { changePublicLink, hasAnyPublicLinkAccess } from '@features/files/utils/access-info-helpers';
+
+import { Subtitle } from '@atoms/text';
+import { Modal, ModalContent } from '@atoms/modal';
+
+export type PublicLinkModalType = {
+  open: boolean;
+  id: string;
+};
+
+export const PublicLinkModalAtom = atom<PublicLinkModalType>({
+  key: 'PublicLinkModalType',
+  default: {
+    open: false,
+    id: '',
+  },
+});
+
+export const PublicLinkModal = () => {
+  const [state, setState] = useRecoilState(PublicLinkModalAtom);
+  const [isOnAdvancedScreen, setIsOnAdvancedScreen] = useState(false);
+
+  return (
+    <Modal
+      open={state.open}
+      onClose={() => {
+        setState({ ...state, open: false });
+      }}
+      >
+      {!!state.id &&
+        <PublicLinkModalContent
+          id={state.id}
+          isOnAdvancedScreen={isOnAdvancedScreen}
+          onShowAdvancedScreen={(active) => setIsOnAdvancedScreen(active)}
+        />}
+    </Modal>
+  );
+};
+
+const PublicLinkModalContent = (props: {
+  id: string,
+  isOnAdvancedScreen: boolean,
+  onShowAdvancedScreen: (active: boolean) => void,
+}) => {
+  const { id } = props;
+  const { item, access, loading, update, refresh } = useDriveItem(id);
+  const { item: parentItem } = useDriveItem(item?.parent_id || '');
+  const { company, refresh: refreshCompany } = useCurrentCompany();
+  useEffect(() => {
+    refresh(id);
+    refreshCompany();
+  }, []);
+  const havePublicLink = hasAnyPublicLinkAccess(item);
+
+  return (
+    <ModalContent
+      title={
+          <>
+            {Languages.t(props.isOnAdvancedScreen
+              ? 'components.item_context_menu.manage_access_advanced_to'
+              : 'components.item_context_menu.manage_access_to') + ' '}
+            <strong>{item?.name}</strong>
+          </>
+        }
+      >
+        <Subtitle>Im content ! {havePublicLink ? "Got a" : "No"} public link.</Subtitle>
+      </ModalContent>
+  );
+}

tdrive/frontend/src/app/views/client/body/drive/modals/update-access/public-link-access.tsx → tdrive/frontend/src/app/views/client/body/drive/modals/public-link/public-link-access.tsx

@@ -3,7 +3,7 @@ import { useDriveItem, getPublicLink } from '@features/drive/hooks/use-drive-ite
 import { copyToClipboard } from '@features/global/utils/CopyClipboard';
 import { Input } from 'app/atoms/input/input-text';
 import { useState } from 'react';
-import { AccessLevelDropdown } from './access-level-dropdown';
+import { AccessLevelDropdown } from '../update-access/access-level-dropdown';
 import Languages from 'features/global/services/languages-service';
 import { Button } from '@atoms/button/button';
 import { LinkIcon, UserGroupIcon, CheckCircleIcon } from '@heroicons/react/outline';

tdrive/frontend/src/app/views/client/body/drive/modals/update-access/index.tsx

@@ -5,14 +5,14 @@ import { useDriveItem } from '@features/drive/hooks/use-drive-item';
 import { useState, useEffect } from 'react';
 import { atom, useRecoilState } from 'recoil';
 import { InternalAccessManager } from './internal-access';
-import { PublicLinkManager } from './public-link-access';
+import { PublicLinkManager } from '../public-link/public-link-access';
 import { useCurrentCompany } from '@features/companies/hooks/use-companies';
 import Languages from 'features/global/services/languages-service';
 import FeatureTogglesService, {
   FeatureNames,
 } from '@features/global/services/feature-toggles-service';
 import { ArrowLeftIcon, LockClosedIcon } from '@heroicons/react/outline';
-import { PublicLinkAccessOptions } from './public-link-access-options';
+import { PublicLinkAccessOptions } from '../public-link/public-link-access-options';
 import { CuteDepictionOfFolderHierarchy } from './cute-depiction-of-folder-hierarchy';
 import { InheritAccessOptions } from './inherit-access-options';
 import { changePublicLink, hasAnyPublicLinkAccess } from '@features/files/utils/access-info-helpers';