FEATURE: Support new link editor layout

Author: Sebobo

packages/asset-preview/src/components/AssetPreview.tsx

@@ -33,11 +33,11 @@ const useLightBoxContainer = (defaultContainer: null | Element = null) => {
 };
 
 export default function AssetPreview() {
-    const { containerRef, isInNodeCreationDialog } = useMediaUi();
+    const { containerRef, isInDialog } = useMediaUi();
     const assets = useRecoilValue(availableAssetsState);
     const [selectedAssetForPreview, setSelectedAssetForPreview] = useRecoilState(selectedAssetForPreviewState);
     const { asset } = useAssetQuery(selectedAssetForPreview);
-    const lightBoxContainer = useLightBoxContainer(isInNodeCreationDialog ? null : containerRef.current);
+    const lightBoxContainer = useLightBoxContainer(isInDialog ? null : containerRef.current);
 
     const [prevAsset, nextAsset] = useMemo(() => {
         if (!asset) return [null, null];

packages/core/src/provider/MediaUiProvider.tsx

@@ -20,6 +20,7 @@ interface MediaUiProviderProps {
     dummyImage: string;
     selectionMode?: boolean;
     isInNodeCreationDialog?: boolean;
+    isInDialog?: boolean;
     containerRef: React.RefObject<HTMLDivElement>;
     onAssetSelection?: (localAssetIdentifier: string) => void;
     approvalAttainmentStrategyFactory?: ApprovalAttainmentStrategyFactory;
@@ -32,6 +33,7 @@ interface MediaUiProviderValues {
     // TODO: Turn view variants into a single view Enum
     selectionMode: boolean;
     isInNodeCreationDialog: boolean;
+    isInDialog: boolean;
     isAssetSelectable: (asset: Asset) => boolean;
     approvalAttainmentStrategy: ApprovalAttainmentStrategy;
 }
@@ -44,6 +46,7 @@ export function MediaUiProvider({
     dummyImage,
     selectionMode = false,
     isInNodeCreationDialog = false,
+    isInDialog = false,
     onAssetSelection = null,
     containerRef,
     approvalAttainmentStrategyFactory = DefaultApprovalAttainmentStrategyFactory,
@@ -136,6 +139,7 @@ export function MediaUiProvider({
                 handleSelectAsset,
                 selectionMode,
                 isInNodeCreationDialog,
+                isInDialog,
                 isAssetSelectable,
                 approvalAttainmentStrategy,
             }}

packages/media-module/src/components/App.tsx

@@ -33,7 +33,7 @@ import classes from './App.module.css';
 import './Global.module.css';
 
 const App = () => {
-    const { selectionMode, isInNodeCreationDialog, containerRef } = useMediaUi();
+    const { selectionMode, isInDialog, containerRef } = useMediaUi();
     const uploadDialog = useRecoilValue(uploadDialogState);
     const createTagDialog = useRecoilValue(createTagDialogState);
     const showCreateAssetCollectionDialog = useRecoilValue(createAssetCollectionDialogVisibleState);
@@ -59,7 +59,7 @@ const App = () => {
         <div
             className={cx(classes.container, classes.mediaModuleApp, theme.mediaModuleTheme, {
                 [classes.selectionMode]: selectionMode,
-                [classes.fullHeight]: isInNodeCreationDialog,
+                [classes.fullHeight]: isInDialog,
             })}
             ref={containerRef}
         >

packages/media-module/src/components/Main/ListView.module.css

@@ -2,8 +2,9 @@
     height: auto;
 }
 
-.listView--fullHeight {
+.fullHeight {
     height: 100%;
+    padding-bottom: 41px;
 }
 
 .listView table {

packages/media-module/src/components/Main/ListView.tsx

@@ -15,7 +15,7 @@ interface ListViewProps {
 import classes from './ListView.module.css';
 
 const ListView: React.FC<ListViewProps> = ({ assetIdentities }: ListViewProps) => {
-    const { isInNodeCreationDialog } = useMediaUi();
+    const { isInDialog } = useMediaUi();
     const { translate } = useIntl();
     const setSelectedAssetForPreview = useSetRecoilState(selectedAssetForPreviewState);
     const selectAsset = useSelectAsset();
@@ -32,7 +32,7 @@ const ListView: React.FC<ListViewProps> = ({ assetIdentities }: ListViewProps) =
     );
 
     return (
-        <section className={cx(classes.listView, isInNodeCreationDialog && classes.listViewFullHeight)}>
+        <section className={cx(classes.listView, isInDialog && classes.fullHeight)}>
             <table>
                 <thead>
                     <tr>

packages/media-module/src/components/TopBar/SortOrderSelector.tsx

@@ -17,10 +17,10 @@ interface SortByOption {
 }
 
 const SortOrderSelector: React.FC = () => {
-    const { isInNodeCreationDialog, selectionMode } = useMediaUi();
+    const { isInDialog, selectionMode } = useMediaUi();
     const [sortOrderState, setSortOrderState] = useRecoilState(selectedSortOrderState);
     const { translate } = useIntl();
-    const hideOptionIcon = isInNodeCreationDialog || selectionMode;
+    const hideOptionIcon = isInDialog || selectionMode;
     const handleChangeSortBy = useCallback(
         (sortBy: SORT_BY) => {
             setSortOrderState({ ...sortOrderState, sortBy });

packages/media-selection-screen/src/MediaSelectionScreen.module.css

@@ -4,6 +4,6 @@
     padding: 1rem;
 }
 
-.isInNodeCreationDialog {
+.isInDialog {
     padding: 0;
 }

packages/media-selection-screen/src/MediaSelectionScreen.tsx

@@ -45,6 +45,7 @@ interface MediaSelectionScreenState {
 
 class MediaSelectionScreen extends React.PureComponent<MediaSelectionScreenProps, MediaSelectionScreenState> {
     notificationHandler: NeosNotification;
+    containerRef = createRef<HTMLDivElement>();
 
     constructor(props: MediaSelectionScreenProps) {
         super(props);
@@ -69,15 +70,19 @@ class MediaSelectionScreen extends React.PureComponent<MediaSelectionScreenProps
             initialLeftSideBarHiddenState: isLeftSideBarHidden,
             initialNodeCreationDialogOpenState: isNodeCreationDialogOpen,
         });
-        if (!isLeftSideBarHidden && !isNodeCreationDialogOpen) {
+        if (!isLeftSideBarHidden && !isNodeCreationDialogOpen && !this.isInDialog()) {
             toggleSidebar();
         }
     }
 
     componentWillUnmount() {
         const { isLeftSideBarHidden, toggleSidebar } = this.props;
         const { initialLeftSideBarHiddenState, initialNodeCreationDialogOpenState } = this.state;
-        if (initialLeftSideBarHiddenState !== isLeftSideBarHidden && !initialNodeCreationDialogOpenState) {
+        if (
+            initialLeftSideBarHiddenState !== isLeftSideBarHidden &&
+            !initialNodeCreationDialogOpenState &&
+            !this.isInDialog()
+        ) {
             toggleSidebar();
         }
     }
@@ -138,16 +143,20 @@ class MediaSelectionScreen extends React.PureComponent<MediaSelectionScreenProps
         };
     };
 
+    isInDialog = () => {
+        return this.state.initialNodeCreationDialogOpenState || !!this.containerRef.current?.closest('[role="dialog"]');
+    };
+
     render() {
         const { onComplete } = this.props;
         const { dummyImage } = this.getConfig();
-        const containerRef = createRef<HTMLDivElement>();
-        const isInNodeCreationDialog = this.state.initialNodeCreationDialogOpenState;
+        const isInDialog = this.isInDialog();
+        const { initialNodeCreationDialogOpenState } = this.state;
 
         return (
             <div
                 className={cx(classes.mediaSelectionScreen, {
-                    [classes.isInNodeCreationDialog]: isInNodeCreationDialog,
+                    [classes.isInDialog]: isInDialog,
                 })}
             >
                 <MediaApplicationWrapper
@@ -160,8 +169,9 @@ class MediaSelectionScreen extends React.PureComponent<MediaSelectionScreenProps
                         dummyImage={dummyImage}
                         onAssetSelection={onComplete}
                         selectionMode
-                        isInNodeCreationDialog={isInNodeCreationDialog}
-                        containerRef={containerRef}
+                        isInNodeCreationDialog={initialNodeCreationDialogOpenState}
+                        isInDialog={isInDialog}
+                        containerRef={this.containerRef}
                     >
                         <AssetCollectionTreeDndProvider>
                             <App />