[UI] Unify Connect UX across run configuration types (plus fix)

frontend/src/pages/Project/Details/Settings/index.tsx

@@ -230,7 +230,7 @@ export const ProjectSettings: React.FC = () => {
                                 onNavigate={({ detail }) => setActiveStepIndex(detail.requestedStepIndex)}
                                 activeStepIndex={activeStepIndex}
                                 onSubmit={() => setIsExpandedCliSection(false)}
-                                submitButtonText="Dismiss"
+                                submitButtonText="Done"
                                 allowSkipTo={true}
                                 steps={[
                                     {

frontend/src/pages/Runs/Details/RunDetails/ConnectToRunWithDevEnvConfiguration/index.tsx

@@ -1,20 +1,7 @@
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import {
-    Alert,
-    Box,
-    Button,
-    Code,
-    Container,
-    ExpandableSection,
-    Header,
-    Popover,
-    SpaceBetween,
-    StatusIndicator,
-    Tabs,
-    Wizard,
-} from 'components';
+import { Alert, Box, Button, Code, ExpandableSection, Popover, SpaceBetween, StatusIndicator, Tabs, Wizard } from 'components';
 
 import { copyToClipboard } from 'libs';
 
@@ -28,6 +15,7 @@ const PipInstallCommand = 'pip install dstack -U';
 
 export const ConnectToRunWithDevEnvConfiguration: FC<{ run: IRun }> = ({ run }) => {
     const { t } = useTranslation();
+    const [isExpandedConnectSection, setIsExpandedConnectSection] = React.useState(true);
 
     const getAttachCommand = (runData: IRun) => {
         const attachCommand = `dstack attach ${runData.run_spec.run_name} --logs`;
@@ -62,9 +50,19 @@ export const ConnectToRunWithDevEnvConfiguration: FC<{ run: IRun }> = ({ run })
     const [configCliCommand, copyCliCommand] = useConfigProjectCliCommand({ projectName: run.project_name });
 
     return (
-        <Container>
-            <Header variant="h2">Connect</Header>
-
+        <ExpandableSection
+            variant="container"
+            headerText="Connect"
+            expanded={isExpandedConnectSection}
+            onChange={({ detail }) => setIsExpandedConnectSection(detail.expanded)}
+            headerActions={
+                <Button
+                    iconName="script"
+                    variant={isExpandedConnectSection ? 'normal' : 'primary'}
+                    onClick={() => setIsExpandedConnectSection((prev) => !prev)}
+                />
+            }
+        >
             {run.status === 'running' && (
                 <Wizard
                     i18nStrings={{
@@ -78,15 +76,15 @@ export const ConnectToRunWithDevEnvConfiguration: FC<{ run: IRun }> = ({ run })
                     }}
                     onNavigate={({ detail }) => setActiveStepIndex(detail.requestedStepIndex)}
                     activeStepIndex={activeStepIndex}
-                    onSubmit={() => window.open(openInIDEUrl, '_blank')}
-                    submitButtonText={`Open in ${ideDisplayName}`}
+                    onSubmit={() => setIsExpandedConnectSection(false)}
+                    submitButtonText="Done"
                     allowSkipTo
                     steps={[
                         {
                             title: 'Attach',
+                            description: 'To access this run, first you need to attach to it.',
                             content: (
                                 <SpaceBetween size="s">
-                                    <Box>To access this run, first you need to attach to it.</Box>
                                     <div className={styles.codeWrapper}>
                                         <Code className={styles.code}>{attachCommand}</Code>
 
@@ -275,6 +273,6 @@ export const ConnectToRunWithDevEnvConfiguration: FC<{ run: IRun }> = ({ run })
                     <Alert type="info">Waiting for the run to start.</Alert>
                 </SpaceBetween>
             )}
-        </Container>
+        </ExpandableSection>
     );
 };

frontend/src/pages/Runs/Details/RunDetails/ConnectToServiceRun/index.tsx

@@ -1,22 +1,37 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import { Alert, Box, Container, Header, Link, SpaceBetween } from 'components';
+import { Alert, Box, Button, ExpandableSection, Link, Popover, SpaceBetween, StatusIndicator, Wizard } from 'components';
 
+import { copyToClipboard } from 'libs';
 import { getRunProbeStatuses } from 'libs/run';
 
 import { getRunListItemServiceUrl } from '../../../List/helpers';
 
 export const ConnectToServiceRun: FC<{ run: IRun }> = ({ run }) => {
+    const { t } = useTranslation();
+    const [isExpandedEndpointSection, setIsExpandedEndpointSection] = React.useState(true);
+    const [activeStepIndex, setActiveStepIndex] = React.useState(0);
     const serviceUrl = getRunListItemServiceUrl(run);
     const probeStatuses = getRunProbeStatuses(run);
     const hasProbes = probeStatuses.length > 0;
     const allProbesReady = hasProbes && probeStatuses.every((s) => s === 'success');
     const serviceReady = run.status === 'running' && (!hasProbes || allProbesReady) && serviceUrl;
 
     return (
-        <Container>
-            <Header variant="h2">Endpoint</Header>
-
+        <ExpandableSection
+            variant="container"
+            headerText="Connect"
+            expanded={isExpandedEndpointSection}
+            onChange={({ detail }) => setIsExpandedEndpointSection(detail.expanded)}
+            headerActions={
+                <Button
+                    iconName="script"
+                    variant={isExpandedEndpointSection ? 'normal' : 'primary'}
+                    onClick={() => setIsExpandedEndpointSection((prev) => !prev)}
+                />
+            }
+        >
             {run.status !== 'running' && (
                 <SpaceBetween size="s">
                     <Box />
@@ -32,16 +47,58 @@ export const ConnectToServiceRun: FC<{ run: IRun }> = ({ run }) => {
             )}
 
             {serviceReady && (
-                <SpaceBetween size="s">
-                    <Box />
-                    <Alert type="success">
-                        The service is ready at{' '}
-                        <Link href={serviceUrl} external>
-                            {serviceUrl}
-                        </Link>
-                    </Alert>
-                </SpaceBetween>
+                <Wizard
+                    i18nStrings={{
+                        stepNumberLabel: (stepNumber) => `Step ${stepNumber}`,
+                        collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`,
+                        skipToButtonLabel: (step) => `Skip to ${step.title}`,
+                        navigationAriaLabel: 'Steps',
+                        previousButton: 'Previous',
+                        nextButton: 'Next',
+                        optional: 'required',
+                    }}
+                    onNavigate={({ detail }) => setActiveStepIndex(detail.requestedStepIndex)}
+                    activeStepIndex={activeStepIndex}
+                    onSubmit={() => setIsExpandedEndpointSection(false)}
+                    submitButtonText="Done"
+                    allowSkipTo
+                    steps={[
+                        {
+                            title: 'Open',
+                            description: 'Open the service endpoint.',
+                            content: (
+                                <SpaceBetween size="s">
+                                    <Alert
+                                        type="info"
+                                        action={
+                                            <Popover
+                                                dismissButton={false}
+                                                position="top"
+                                                size="small"
+                                                triggerType="custom"
+                                                content={<StatusIndicator type="success">{t('common.copied')}</StatusIndicator>}
+                                            >
+                                                <Button
+                                                    formAction="none"
+                                                    iconName="copy"
+                                                    variant="normal"
+                                                    onClick={() => copyToClipboard(serviceUrl)}
+                                                />
+                                            </Popover>
+                                        }
+                                    >
+                                        The service is ready at{' '}
+                                        <Link href={serviceUrl} external>
+                                            {serviceUrl}
+                                        </Link>
+                                    </Alert>
+                                </SpaceBetween>
+                            ),
+                            isOptional: true,
+                        },
+                    ]}
+                />
             )}
-        </Container>
+        </ExpandableSection>
     );
 };