feature/local_cloud_toggle

packages/core/components/Modal/MoveFileManifest/MoveFileManifest.module.css

@@ -0,0 +1,33 @@
+.fileTableContainer {
+    max-height: 300px;
+    overflow-y: auto;
+    border: 1px solid var(--border-color);
+    margin-bottom: 1em;
+    padding: 1em;
+    background: linear-gradient(to bottom, transparent, var(--secondary-background-color));
+}
+
+.file-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.file-table th,
+.file-table td {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+    white-space: nowrap;
+    color: var(--primary-text-color);
+}
+
+.file-table th {
+    background-color: var(--secondary-background-color);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.file-table td:first-child {
+    border-right: 1px solid var(--border-color);
+}

packages/core/components/Modal/MoveFileManifest/index.tsx

@@ -0,0 +1,92 @@
+import filesize from "filesize";
+import * as React from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { ModalProps } from "..";
+import BaseModal from "../BaseModal";
+import { PrimaryButton } from "../../Buttons";
+import FileDetail from "../../../entity/FileDetail";
+import FileSelection from "../../../entity/FileSelection";
+import { interaction, selection } from "../../../state";
+
+import styles from "./MoveFileManifest.module.css";
+
+/**
+ * Modal overlay for displaying details of selected files for NAS cache operations.
+ */
+export default function MoveFileManifest({ onDismiss }: ModalProps) {
+    const dispatch = useDispatch();
+    const fileService = useSelector(interaction.selectors.getFileService);
+    const fileSelection = useSelector(
+        selection.selectors.getFileSelection,
+        FileSelection.selectionsAreEqual
+    );
+
+    const [fileDetails, setFileDetails] = React.useState<FileDetail[]>([]);
+    const [totalSize, setTotalSize] = React.useState<string | undefined>();
+    const [isLoading, setLoading] = React.useState(false);
+
+    React.useEffect(() => {
+        async function fetchDetails() {
+            setLoading(true);
+            const details = await fileSelection.fetchAllDetails();
+            setFileDetails(details);
+
+            const aggregateInfo = await fileService.getAggregateInformation(fileSelection);
+            const formattedSize = aggregateInfo.size ? filesize(aggregateInfo.size) : undefined;
+            setTotalSize(formattedSize);
+            setLoading(false);
+        }
+
+        fetchDetails();
+    }, [fileSelection, fileService]);
+
+    const onMove = () => {
+        dispatch(interaction.actions.moveFiles(fileDetails));
+        onDismiss();
+    };
+
+    const body = (
+        <div>
+            <p>Selected Files:</p>
+            <div className={styles.fileTableContainer}>
+                <table className={styles.fileTable}>
+                    <thead>
+                        <tr>
+                            <th>File Name</th>
+                            <th>File Size</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {fileDetails.map((file) => (
+                            <tr key={file.id}>
+                                <td>{file.name}</td>
+                                <td>{filesize(file.size || 0)}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+            <p>Total Files: {fileDetails.length}</p>
+            <p>Total Size: {isLoading ? "Loading..." : totalSize}</p>
+        </div>
+    );
+
+    return (
+        <BaseModal
+            body={body}
+            footer={
+                <PrimaryButton
+                    className={styles.confirmButton}
+                    disabled={!fileDetails.length}
+                    iconName="Accept"
+                    onClick={onMove}
+                    text="CONFIRM"
+                    title="Confirm"
+                />
+            }
+            onDismiss={onDismiss}
+            title="Move Files to NAS Cache"
+        />
+    );
+}

packages/core/components/Modal/index.tsx

@@ -6,6 +6,7 @@ import CodeSnippet from "./CodeSnippet";
 import DataSource from "./DataSource";
 import MetadataManifest from "./MetadataManifest";
 import SmallScreenWarning from "./SmallScreenWarning";
+import MoveFileManifest from "./MoveFileManifest";
 
 export interface ModalProps {
     onDismiss: () => void;
@@ -16,6 +17,7 @@ export enum ModalType {
     DataSource = 2,
     MetadataManifest = 3,
     SmallScreenWarning = 4,
+    MoveFileManifest = 5,
 }
 
 /**
@@ -38,6 +40,8 @@ export default function Modal() {
             return <MetadataManifest onDismiss={onDismiss} />;
         case ModalType.SmallScreenWarning:
             return <SmallScreenWarning onDismiss={onDismiss} />;
+        case ModalType.MoveFileManifest:
+            return <MoveFileManifest onDismiss={onDismiss} />;
         default:
             return null;
     }

packages/core/hooks/useFileAccessContextMenu.ts

@@ -135,6 +135,20 @@ export default (filters?: FileFilter[], onDismiss?: () => void) => {
                         ],
                     },
                 },
+                ...(isQueryingAicsFms
+                    ? [
+                          {
+                              key: "move-to-cache",
+                              text: "Move to Cache",
+                              title: "Move selected files to NAS Cache",
+                              disabled: !filters && fileSelection.count() === 0,
+                              iconProps: { iconName: "MoveToFolder" },
+                              onClick() {
+                                  dispatch(interaction.actions.showMoveFileManifest());
+                              },
+                          },
+                      ]
+                    : []),
                 {
                     key: "download",
                     text: "Download",

packages/core/state/interaction/actions.ts

@@ -679,3 +679,39 @@ export function setSelectedPublicDataset(dataset: PublicDataset): SetSelectedPub
         type: SET_SELECTED_PUBLIC_DATASET,
     };
 }
+
+/**
+ * SHOW_MOVE_FILE_MANIFEST
+ *
+ * Action to show the Move File dialog (manifest) for NAS cache operations.
+ * This modal will allow users to move files onto the NAS cache.
+ */
+export const SHOW_MOVE_FILE_MANIFEST = makeConstant(STATE_BRANCH_NAME, "show-move-file-manifest");
+
+export interface ShowMoveFileManifestAction {
+    type: string;
+}
+
+export function showMoveFileManifest(): ShowMoveFileManifestAction {
+    return {
+        type: SHOW_MOVE_FILE_MANIFEST,
+    };
+}
+
+export const MOVE_FILES = makeConstant(STATE_BRANCH_NAME, "move-files");
+
+export interface MoveFilesAction {
+    type: string;
+    payload: {
+        fileDetails: FileDetail[];
+    };
+}
+
+export function moveFiles(fileDetails: FileDetail[]): MoveFilesAction {
+    return {
+        type: MOVE_FILES,
+        payload: {
+            fileDetails,
+        },
+    };
+}

packages/core/state/interaction/logics.ts

@@ -31,6 +31,8 @@ import {
     SetIsSmallScreenAction,
     setVisibleModal,
     hideVisibleModal,
+    MoveFilesAction,
+    MOVE_FILES,
 } from "./actions";
 import * as interactionSelectors from "./selectors";
 import { DownloadResolution, FileInfo } from "../../services/FileDownloadService";
@@ -575,6 +577,19 @@ const setIsSmallScreen = createLogic({
     type: SET_IS_SMALL_SCREEN,
 });
 
+/**
+ * Interceptor responsible for handling the MOVE_FILES action.
+ * Logs details of files that are being moved.
+ */
+const moveFilesLogic = createLogic({
+    type: MOVE_FILES,
+    process(deps, dispatch, done) {
+        const action = deps.action as MoveFilesAction;
+        console.log(`Moving files:`, action.payload.fileDetails);
+        done();
+    },
+});
+
 export default [
     initializeApp,
     downloadManifest,
@@ -586,4 +601,5 @@ export default [
     showContextMenu,
     refresh,
     setIsSmallScreen,
+    moveFilesLogic,
 ];

packages/core/state/interaction/reducer.ts

@@ -15,6 +15,7 @@ import {
     SHOW_CONTEXT_MENU,
     SHOW_DATASET_DETAILS_PANEL,
     SHOW_MANIFEST_DOWNLOAD_DIALOG,
+    SHOW_MOVE_FILE_MANIFEST,
     StatusUpdate,
     MARK_AS_USED_APPLICATION_BEFORE,
     MARK_AS_DISMISSED_SMALL_SCREEN_WARNING,
@@ -195,6 +196,10 @@ export default makeReducer<InteractionStateBranch>(
             ...state,
             selectedPublicDataset: action.payload,
         }),
+        [SHOW_MOVE_FILE_MANIFEST]: (state) => ({
+            ...state,
+            visibleModal: ModalType.MoveFileManifest,
+        }),
     },
     initialState
 );