@gen3/workspaces 0.12.51 → 0.12.52

package/dist/index/esm/index.js

@@ -3,10 +3,10 @@ import React, { useCallback, useMemo, useState, useRef, useEffect, createContext
 import { mergeDefaultTailwindClassnames, ACTIVITY_CHANNEL, convertSecondsToMilliseconds, InfoRolloverButton, OverflowTooltippedLabel, PanelErrorBoundary, ProtectedContent, FixedNavPageLayout, ContentSource, getNavPageLayoutPropsFromConfig } from '@gen3/frontend';
 import { Card, Stack, Badge, Text, List, Group, Tooltip, Button, LoadingOverlay, Alert, Loader, Divider, Select, ActionIcon, TextInput, Textarea, Table, Scroller, Tabs, Center } from '@mantine/core';
 import { Icon } from '@iconify-icon/react';
+import { useInterval, useElementSize, useDisclosure, useResizeObserver } from '@mantine/hooks';
 import { GEN3_API, GEN3_WORKSPACE_API, gen3Api, useCoreSelector, selectJEGActiveWorkspaceStatus, useCoreDispatch, setJEGActiveWorkspaceStatus, WorkspaceStatus, setJEGRequestedWorkspaceStatus, RequestedWorkspaceStatus, setJEGActiveWorkspaceId, isFetchBaseQueryError, selectJEGRequestedWorkspaceStatus, selectJEGRequestedWorkspaceStatusTimestamp, isTimeGreaterThan, formatUptimeInMinutes, selectJEGKernelIds, removeManyJEGActiveKernels, upsertManyJEGActiveKernels, normalizeRtkError, selectAllJEGKernels, addJEGActiveKernel, selectWorkspaceTier, setWorkspaceTier, selectWorkspaceFullscreen, setWorkspaceFullscreen, useGetDictionaryFromUrlQuery, useUserAuth, GEN3_COMMONS_NAME } from '@gen3/core';
 import { useDeepCompareEffect } from 'use-deep-compare';
 import { notifications } from '@mantine/notifications';
-import { useElementSize, useDisclosure, useResizeObserver } from '@mantine/hooks';
 import { IoSettingsSharp } from 'react-icons/io5';
 import { BsFillInfoCircleFill } from 'react-icons/bs';
 import { MdKeyboardArrowDown, MdKeyboardArrowRight } from 'react-icons/md';
@@ -936,19 +936,21 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
         coreDispatch
     ]);
     /* ── Elapsed timer for launching state ── */ const [elapsedSec, setElapsedSec] = useState(0);
+    const interval = useInterval(()=>{
+        const elapsed = Math.floor((Date.now() - requestedStatusTimestamp) / 1000);
+        setElapsedSec(elapsed);
+    }, 1000);
     useEffect(()=>{
-        if (status !== WorkspaceStatus.Launching) {
+        if (status === WorkspaceStatus.Launching) {
+            interval.start();
+        } else {
             setElapsedSec(0);
-            return;
+            interval.stop();
         }
-        const interval = Math.floor((Date.now() - requestedStatusTimestamp) / 1000);
-        const t = setInterval(()=>{
-            setElapsedSec(interval);
-        }, 1000);
-        return ()=>clearInterval(t);
+        return interval.stop;
     }, [
-        requestedStatusTimestamp,
-        status
+        status,
+        interval
     ]);
     /* ── Auto-reset after 15 s in launch-error state ── */ useEffect(()=>{
         if (status !== WorkspaceStatus.LaunchError) return;
@@ -1002,9 +1004,6 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
         });
     }
     /* ── launching ── */ if (status === WorkspaceStatus.Launching) {
-        const mins = Math.floor(elapsedSec / 60);
-        const secs = elapsedSec % 60;
-        const elapsed = mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
         return /*#__PURE__*/ jsxs("div", {
             role: "status",
             className: PanelStyle$2,
@@ -1027,7 +1026,9 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
                             className: "mt-1 text-sm text-base-darker",
                             children: [
                                 "Elapsed: ",
-                                elapsed
+                                elapsedSec,
+                                " ",
+                                elapsedSec === 1 ? 'second' : 'seconds'
                             ]
                         }),
                         /*#__PURE__*/ jsx("p", {
@@ -2239,7 +2240,7 @@ function HorizontalAccordion({ label, expanded, setExpanded, children, expandedW
     });
     const mergedClassNames = mergeDefaultTailwindClassnames(STYLING_DEFAULTS, classNames);
     return /*#__PURE__*/ jsx("div", {
-        className: `overflow-hidden shrink-0 ${mergedClassNames.root}`,
+        className: `${mergedClassNames.root}`,
         style: {
             width: expanded ? expandedWidth : collapsedWidth,
             transition: `width ${TRANSITION_MS}ms ease`
@@ -2274,7 +2275,7 @@ function HorizontalAccordion({ label, expanded, setExpanded, children, expandedW
                     ]
                 }),
                 /*#__PURE__*/ jsx("div", {
-                    className: "overflow-hidden h-full shrink-0 px-2",
+                    className: "overflow-hidden px-2",
                     style: {
                         opacity: expanded ? 1 : 0,
                         pointerEvents: expanded ? 'auto' : 'none',
@@ -2302,9 +2303,8 @@ const SettingsPanel = ({ showKernels, expanded, setExpanded, width = 380 })=>{
         setExpanded: setExpanded,
         rightSide: true,
         expandedWidth: width,
-        children: /*#__PURE__*/ jsxs(Stack, {
-            gap: "sm",
-            className: PanelStyle,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: `${PanelStyle} overflow-y-scroll`,
             children: [
                 showKernels && /*#__PURE__*/ jsx(KernelLifecyclePanel, {}),
                 /*#__PURE__*/ jsx(UpgradeActionsPanel, {