@plutonhq/core-frontend 0.1.23 → 0.1.25

package/src/components/common/SnapshotBrowser/SnapshotBrowser.module.scss

@@ -0,0 +1,376 @@
+.snapshotBrowser {
+   display: flex;
+   flex-direction: column;
+   height: 100%;
+   border: 1px solid var(--line-color);
+   border-radius: 8px;
+   overflow: hidden;
+}
+
+.storageSelect {
+   background-color: transparent;
+   :global([class*='_dropdown_']) {
+      min-width: 250px;
+   }
+}
+
+.toolbar {
+   display: flex;
+   padding: 10px;
+   border-bottom: 1px solid var(--line-color);
+   gap: 15px;
+   align-items: center;
+   justify-content: space-between;
+   .toolbarRight {
+      display: flex;
+      flex-direction: row;
+      gap: 15px;
+      justify-content: space-between;
+      align-items: center;
+
+      .search {
+         display: flex;
+         align-items: center;
+         gap: 8px;
+         padding: 6px 12px;
+         border: 1px solid var(--line-color);
+         border-radius: 4px;
+         margin-left: auto;
+
+         input {
+            border: none;
+            outline: none;
+            font-size: 0.75rem;
+            min-width: 200px;
+            background-color: var(--content-background-color);
+         }
+      }
+   }
+
+   .toolbarLeft {
+      .stats {
+         display: flex;
+         flex-direction: row;
+         gap: 8px;
+         color: var(--content-text-color-light);
+         strong {
+            color: var(--content-text-color);
+         }
+      }
+   }
+}
+
+.browserContent {
+   display: flex;
+   flex: 1;
+   overflow: hidden;
+
+   &.loadingState {
+      align-items: center;
+      justify-content: center;
+   }
+}
+
+.sidebar {
+   width: 300px;
+   border-right: 1px solid var(--line-color);
+   overflow-y: auto;
+
+   .sidebarHeader {
+      padding: 12px;
+      background: var(--background-color);
+      font-weight: 600;
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      display: flex;
+      justify-content: space-between;
+      h4 {
+         margin: 0;
+      }
+   }
+   .noDirectories {
+      padding: 12px;
+      color: var(--content-text-color-light);
+      font-size: 0.85rem;
+   }
+}
+
+.directory {
+   display: flex;
+   align-items: center;
+   gap: 8px;
+   padding: 8px 16px;
+   cursor: pointer;
+   position: relative;
+   button {
+      width: 20px;
+   }
+   .toggleButton {
+      border: 1px solid var(--line-color);
+      width: auto;
+      padding: 0px 4px;
+      border-radius: 3px;
+   }
+   .togglePlaceholder {
+      width: 10px;
+      height: 10px;
+   }
+   .dirName {
+      position: relative;
+      .notification {
+         width: 7px;
+         height: 7px;
+         background: var(--primary-color);
+         border-radius: 50%;
+         margin-left: auto;
+         position: absolute;
+         left: -2px;
+         top: 8px;
+      }
+   }
+   &.directoryEmpty {
+      .dirName {
+         padding-left: 20px;
+         .notification {
+            left: 8px;
+         }
+      }
+   }
+
+   &:hover {
+      background: var(--background-color);
+   }
+}
+
+.selected {
+   background: var(--primary-color-light);
+}
+
+.content {
+   flex: 1;
+   overflow-y: auto;
+}
+
+.fileList {
+   .header {
+      display: grid;
+      padding: 12px;
+      background: var(--background-color);
+      font-weight: 600;
+      position: sticky;
+      z-index: 2;
+      top: 0;
+      div {
+         display: flex;
+         width: 100%;
+         justify-content: center;
+         cursor: pointer;
+         user-select: none;
+         &.activeSort {
+            font-weight: bold;
+            cursor: pointer;
+         }
+
+         &:nth-child(1) {
+            justify-content: left;
+         }
+
+         &.headerActions {
+            justify-content: right;
+         }
+      }
+   }
+}
+
+.fileListEmpty {
+   height: calc(100vh - 400px);
+   width: 100%;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+}
+
+.virtualFileList {
+   flex: 1;
+   overflow: hidden;
+}
+
+.snapshotFile {
+   display: grid;
+   padding: 12px;
+   align-items: center;
+   box-sizing: border-box;
+   border-bottom: 1px solid var(--line-color);
+   & > div {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+
+      &:nth-child(1) {
+         justify-content: left;
+         gap: 5px;
+         word-break: break-all;
+      }
+   }
+
+   &.fileIsDir {
+      .fileName {
+         cursor: pointer;
+         i {
+            width: 8px;
+            height: 8px;
+            display: inline-block;
+            margin-left: 8px;
+            background: var(--primary-color);
+            border-radius: 50%;
+         }
+         &:hover {
+            color: var(--primary-color);
+         }
+      }
+   }
+
+   .fileModifiedAt {
+      i {
+         font-style: normal;
+      }
+   }
+   .fileModifiedAt,
+   .fileSize {
+      color: var(--content-text-color-light);
+   }
+   .fileActions {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: right;
+      button {
+         color: var(--icon-color);
+         transition: all 0.12s linear;
+         &:hover {
+            color: var(--primary-color);
+         }
+      }
+   }
+
+   &:last-child {
+      border-bottom: none;
+   }
+}
+
+.goUpButton {
+   font-style: italic;
+   opacity: 0.8;
+   padding: 0px 12px;
+
+   &:hover {
+      background-color: var(--primary-color-light);
+   }
+
+   .fileName {
+      font-weight: normal;
+   }
+}
+
+.loadingState,
+.errorState {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   height: 400px;
+   gap: 16px;
+   color: var(--text-muted);
+
+   small {
+      color: var(--text-muted);
+      opacity: 0.8;
+   }
+}
+
+.errorState button {
+   padding: 8px 16px;
+   background: var(--primary);
+   color: white;
+   border: none;
+   border-radius: 4px;
+   cursor: pointer;
+}
+
+.restoreModalFile {
+   word-break: break-all;
+   background: var(--primary-color-light);
+   padding: 10px;
+   border-radius: 6px;
+}
+
+@media only screen and (max-width: 768px) {
+   .toolbar {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 10px;
+      .toolbarLeft {
+         width: 100%;
+         .stats {
+            font-size: 0.9em;
+            :global(.icon) {
+               display: none;
+            }
+         }
+      }
+      .toolbarRight {
+         width: 100%;
+         .search {
+            width: 100%;
+         }
+      }
+   }
+   .sidebar {
+      display: none;
+   }
+
+   .content {
+      padding: 0;
+   }
+
+   .fileList {
+      .header {
+         display: none;
+      }
+      .snapshotFile {
+         display: block;
+         padding: 10px;
+         font-size: 0.9em;
+         .fileName {
+            width: 100%;
+            margin-bottom: 4px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+         }
+         & > div {
+            display: block;
+            width: auto;
+            float: left;
+            margin-right: 12px;
+         }
+         .fileActions {
+            display: block;
+            width: auto;
+            float: right;
+            margin-right: 0;
+         }
+         &.goUpButton {
+            display: flex;
+            align-items: center;
+            .fileName::after {
+               content: ' Go Up ↑';
+               font-size: 12px;
+               font-style: normal;
+               font-weight: 500;
+            }
+         }
+      }
+   }
+}

package/src/components/common/SnapshotBrowser/SnapshotBrowserDirectories.tsx

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+import Icon from '../Icon/Icon';
+import classes from './SnapshotBrowser.module.scss';
+
+interface SnapshotBrowserDirectoriesProps {
+   directories: string[];
+   selectedFolder: string;
+   expandedFolders: Set<string>;
+   useProgressiveLoading?: boolean;
+   onDirectoryClick: (path: string) => void;
+   onToggleFolder: (dir: string) => void;
+   isVisible: (dir: string) => boolean;
+   hasSubdirectories: (dir: string) => boolean;
+   renderDirectoryExtra?: (dir: string) => ReactNode;
+   /** Custom function to split a path into parts. Defaults to splitting by / and \ */
+   splitPath?: (path: string) => string[];
+}
+
+const defaultSplitPath = (path: string) => path.split(/[/\\]/).filter(Boolean);
+
+const SnapshotBrowserDirectories = ({
+   directories,
+   selectedFolder,
+   expandedFolders,
+   useProgressiveLoading,
+   onDirectoryClick,
+   onToggleFolder,
+   isVisible,
+   hasSubdirectories,
+   renderDirectoryExtra,
+   splitPath: splitPathFn = defaultSplitPath,
+}: SnapshotBrowserDirectoriesProps) => {
+   return (
+      <div className={`${classes.sidebar} styled__scrollbar`}>
+         <div className={classes.sidebarHeader}>
+            <h4>
+               Directories ({directories.length}
+               {useProgressiveLoading && '+'})
+            </h4>
+         </div>
+         {directories.length === 0 && (
+            <div className={classes.noDirectories}>{useProgressiveLoading ? 'Loading directories...' : 'No directories found'}</div>
+         )}
+         {directories.map((dir) => {
+            const parts = splitPathFn(dir);
+            const dirName = parts[parts.length - 1] || dir;
+            const depth = parts.length - 1;
+            const isExpanded = expandedFolders.has(dir);
+            const hasChildren = hasSubdirectories(dir);
+
+            if (!isVisible(dir)) return null;
+
+            return (
+               <div
+                  key={dir}
+                  className={`${classes.directory} ${selectedFolder === dir ? classes.selected : ''} ${hasChildren ? '' : classes.directoryEmpty}`}
+                  style={{ paddingLeft: `${depth * 20}px` }}
+                  onClick={() => onDirectoryClick(dir)}
+               >
+                  {hasChildren ? (
+                     <button
+                        className={classes.toggleButton}
+                        onClick={(e) => {
+                           e.stopPropagation();
+                           onToggleFolder(dir);
+                        }}
+                     >
+                        {isExpanded ? '-' : '+'}
+                     </button>
+                  ) : (
+                     <span className={classes.togglePlaceholder} />
+                  )}
+                  <span className={classes.dirName}>
+                     <Icon type={'fm-directory'} size={14} /> {dirName}
+                  </span>
+                  {renderDirectoryExtra?.(dir)}
+               </div>
+            );
+         })}
+      </div>
+   );
+};
+
+export default SnapshotBrowserDirectories;

package/src/components/common/SnapshotBrowser/SnapshotBrowserFileList.tsx

@@ -0,0 +1,52 @@
+import React, { ReactNode } from 'react';
+import { FixedSizeList as List } from 'react-window';
+import classes from './SnapshotBrowser.module.scss';
+import { isMobile } from '../../../utils';
+
+const isMobileDevice = isMobile();
+const DEFAULT_ITEM_HEIGHT = isMobileDevice ? 65 : 46;
+
+interface SnapshotBrowserFileListProps {
+   files: any[];
+   height: number;
+   itemSize?: number;
+   headerContent: ReactNode;
+   renderRow: (props: { index: number; style: React.CSSProperties }) => React.ReactElement | null;
+   selectedFolder: string | null;
+   emptyMessage?: string;
+   isLoading?: boolean;
+   gridTemplateColumns?: string;
+}
+
+const SnapshotBrowserFileList = ({
+   files,
+   height,
+   itemSize = DEFAULT_ITEM_HEIGHT,
+   headerContent,
+   renderRow,
+   selectedFolder,
+   emptyMessage = 'Select a folder from the left to browse its content',
+   isLoading,
+   gridTemplateColumns,
+}: SnapshotBrowserFileListProps) => {
+   return (
+      <div className={classes.fileList}>
+         <div className={classes.header} style={gridTemplateColumns ? { gridTemplateColumns } : undefined}>
+            {headerContent}
+         </div>
+
+         {selectedFolder !== null && files.length > 0 && (
+            <div className={classes.virtualFileList}>
+               <List height={height} itemCount={files.length} itemSize={itemSize} width="100%" overscanCount={5}>
+                  {renderRow}
+               </List>
+            </div>
+         )}
+
+         {selectedFolder === null && <div className={classes.fileListEmpty}>{emptyMessage}</div>}
+         {selectedFolder !== null && !isLoading && files.length === 0 && <div className={classes.fileListEmpty}>This folder is empty</div>}
+      </div>
+   );
+};
+
+export default SnapshotBrowserFileList;

package/src/components/common/SnapshotBrowser/SnapshotBrowserFileRow.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react';
+import Icon from '../Icon/Icon';
+import FileIcon from '../FileIcon/FileIcon';
+import classes from './SnapshotBrowser.module.scss';
+
+interface SnapshotBrowserFileRowProps {
+   style: React.CSSProperties;
+   file: { path: string; name?: string; isDirectory?: boolean };
+   isDirectory: boolean;
+   onClick?: () => void;
+   namePrefix?: ReactNode;
+   children?: ReactNode;
+   gridTemplateColumns?: string;
+   className?: string;
+}
+
+const SnapshotBrowserFileRow = ({
+   style,
+   file,
+   isDirectory,
+   onClick,
+   namePrefix,
+   children,
+   gridTemplateColumns,
+   className,
+}: SnapshotBrowserFileRowProps) => {
+   const fileName = file.name || file.path.split('/').pop() || '';
+
+   return (
+      <div
+         style={{ ...style, ...(gridTemplateColumns ? { gridTemplateColumns } : {}) }}
+         className={`${classes.snapshotFile} ${isDirectory ? classes.fileIsDir : ''} ${className || ''}`}
+         onClick={onClick}
+      >
+         <div className={classes.fileName}>
+            {namePrefix}
+            {isDirectory ? <Icon type={'fm-directory'} size={16} /> : <FileIcon filename={fileName} />} {fileName}
+         </div>
+         {children}
+      </div>
+   );
+};
+
+export default SnapshotBrowserFileRow;

package/src/components/common/SnapshotBrowser/SnapshotBrowserGoUpRow.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import classes from './SnapshotBrowser.module.scss';
+
+interface SnapshotBrowserGoUpRowProps {
+   style: React.CSSProperties;
+   onGoUp: () => void;
+   gridTemplateColumns?: string;
+}
+
+const SnapshotBrowserGoUpRow = ({ style, onGoUp, gridTemplateColumns }: SnapshotBrowserGoUpRowProps) => {
+   return (
+      <div
+         style={{ ...style, ...(gridTemplateColumns ? { gridTemplateColumns } : {}) }}
+         className={`${classes.snapshotFile} ${classes.fileIsDir} ${classes.goUpButton}`}
+         onClick={onGoUp}
+      >
+         <div className={classes.fileName}>...</div>
+      </div>
+   );
+};
+
+export default SnapshotBrowserGoUpRow;

package/src/components/common/SnapshotBrowser/SnapshotBrowserToolbar.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import Icon from '../Icon/Icon';
+import classes from './SnapshotBrowser.module.scss';
+
+interface SnapshotBrowserToolbarProps {
+   search: string;
+   onSearchChange: (value: string) => void;
+   isLoading?: boolean;
+   leftContent?: ReactNode;
+   rightContent?: ReactNode;
+}
+
+const SnapshotBrowserToolbar = ({ search, onSearchChange, isLoading, leftContent, rightContent }: SnapshotBrowserToolbarProps) => {
+   return (
+      <div className={classes.toolbar}>
+         <div className={classes.toolbarLeft}>{leftContent}</div>
+         <div className={classes.toolbarRight}>
+            {rightContent}
+            <div className={classes.search}>
+               <Icon type="search" size={16} />
+               <input type="text" placeholder="Search in current Directory..." value={search} onChange={(e) => onSearchChange(e.target.value)} />
+               {isLoading && <Icon type="loading" size={12} />}
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default SnapshotBrowserToolbar;