[9/n] [RFC] Implement updated designs: Sensor result page [3/N] (#26153)

## Summary & Motivation Linear: https://linear.app/dagster-labs/issue/FE-699/implement-updated-designs-sensor-result-page-[3n] Implement design for sensor result page Video: https://github.com/user-attachments/assets/053eeada-27b2-43d0-aaea-c98c9707a7c0 Timeout: ![image](https://github.com/user-attachments/assets/974928ca-70be-4356-8790-4bb0fca9fb16) ## How I Tested These Changes jest, tested locally with all the flows in the video
dagster-io · Dec 9, 2024 · cf85f42 · cf85f42
1 parent 2723796
commit cf85f42
Show file tree

Hide file tree

Showing 7 changed files with 345 additions and 237 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
@@ -101,6 +101,7 @@ import dagster_reversed from '../icon-svgs/dagster_reversed.svg';
 import dagster_solid from '../icon-svgs/dagster_solid.svg';
 import dagsterlabs from '../icon-svgs/dagsterlabs.svg';
 import dash from '../icon-svgs/dash.svg';
+import data_object from '../icon-svgs/data_object.svg';
 import data_reliability from '../icon-svgs/data_reliability.svg';
 import data_type from '../icon-svgs/data_type.svg';
 import database from '../icon-svgs/database.svg';
@@ -503,6 +504,7 @@ export const Icons = {
   dash,
   data_reliability,
   data_type,
+  data_object,
   database,
   datatype_array,
   datatype_bool,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styled from 'styled-components';
 
 import {Box} from './Box';
 import {Colors} from './Color';
@@ -27,7 +28,7 @@ export const NonIdealState = ({
   const singleContentElement = [title, description, action].filter(Boolean).length === 1;
 
   return (
-    <Box
+    <NonIdealStateWrapper
       flex={{gap: 20, alignItems: singleContentElement ? 'center' : 'flex-start'}}
       background={Colors.backgroundLight()}
       padding={24}
@@ -58,6 +59,8 @@ export const NonIdealState = ({
         {description && <div style={{color: Colors.textDefault()}}>{description}</div>}
         {action}
       </Box>
-    </Box>
+    </NonIdealStateWrapper>
   );
 };
+
+export const NonIdealStateWrapper = styled(Box)``;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/data_object.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/data_object.svg
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunConfigDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunConfigDialog.tsx
@@ -3,13 +3,19 @@ import {
   Button,
   Dialog,
   DialogFooter,
+  Icon,
   StyledRawCodeMirror,
   Subheading,
 } from '@dagster-io/ui-components';
 import styled from 'styled-components';
 
 import {RunTags} from './RunTags';
 import {RunTagsFragment} from './types/RunTagsFragment.types';
+import {applyCreateSession, useExecutionSessionStorage} from '../app/ExecutionSessionStorage';
+import {useOpenInNewTab} from '../hooks/useOpenInNewTab';
+import {RunRequestFragment} from '../ticks/types/RunRequestFragment.types';
+import {RepoAddress} from '../workspace/types';
+import {workspacePathFromAddress} from '../workspace/workspacePath';
 
 interface Props {
   isOpen: boolean;
@@ -21,10 +27,15 @@ interface Props {
 
   // Optionally provide tags to display them as well.
   tags?: RunTagsFragment[];
+
+  // Optionally provide a request to display the "Open in Launchpad" button.
+  request?: RunRequestFragment;
+  repoAddress?: RepoAddress;
 }
 
 export const RunConfigDialog = (props: Props) => {
-  const {isOpen, onClose, copyConfig, runConfigYaml, tags, mode, isJob} = props;
+  const {isOpen, onClose, copyConfig, runConfigYaml, tags, mode, isJob, request, repoAddress} =
+    props;
   const hasTags = !!tags && tags.length > 0;
 
   return (
@@ -68,7 +79,20 @@ export const RunConfigDialog = (props: Props) => {
             </CodeMirrorContainer>
           </Box>
         </Box>
-        <DialogFooter topBorder>
+        <DialogFooter
+          topBorder
+          left={
+            request &&
+            repoAddress && (
+              <OpenInLaunchpadButton
+                request={request}
+                mode={mode || null}
+                isJob={isJob}
+                repoAddress={repoAddress}
+              />
+            )
+          }
+        >
           <Button onClick={() => copyConfig()} intent="none">
             Copy config
           </Button>
@@ -81,6 +105,51 @@ export const RunConfigDialog = (props: Props) => {
   );
 };
 
+function OpenInLaunchpadButton({
+  mode,
+  request,
+  jobName,
+  isJob,
+  repoAddress,
+}: {
+  request: RunRequestFragment;
+  jobName?: string;
+  mode?: string | null;
+  repoAddress: RepoAddress;
+  isJob: boolean;
+}) {
+  const openInNewTab = useOpenInNewTab();
+  const pipelineName = request.jobName ?? jobName;
+  const [_, onSave] = useExecutionSessionStorage(repoAddress, pipelineName!);
+
+  return (
+    <Button
+      icon={<Icon name="edit" />}
+      onClick={() => {
+        onSave((data) =>
+          applyCreateSession(data, {
+            mode,
+            runConfigYaml: request.runConfigYaml,
+            tags: request.tags,
+            assetSelection: request.assetSelection?.map(({path}) => ({
+              assetKey: {path},
+            })),
+          }),
+        );
+
+        openInNewTab(
+          workspacePathFromAddress(
+            repoAddress,
+            `/${isJob ? 'jobs' : 'pipelines'}/${pipelineName}/playground`,
+          ),
+        );
+      }}
+    >
+      Open in Launchpad
+    </Button>
+  );
+}
+
 const CodeMirrorContainer = styled.div`
   flex: 1;
   overflow: hidden;

diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/DryRunRequestTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/DryRunRequestTable.tsx
@@ -1,13 +1,14 @@
-import {Box, Button, Colors, Icon, Table, Tag} from '@dagster-io/ui-components';
+import {Box, Button, Colors, Icon, Table, Tooltip} from '@dagster-io/ui-components';
+import {useState} from 'react';
 
-import {applyCreateSession, useExecutionSessionStorage} from '../app/ExecutionSessionStorage';
+import {RunConfigDialog} from '../runs/RunConfigDialog';
 import {RunRequestFragment} from './types/RunRequestFragment.types';
-import {useOpenInNewTab} from '../hooks/useOpenInNewTab';
+import {showSharedToaster} from '../app/DomUtils';
+import {useCopyToClipboard} from '../app/browser';
 import {PipelineReference} from '../pipelines/PipelineReference';
 import {testId} from '../testing/testId';
 import {useRepository} from '../workspace/WorkspaceContext/util';
 import {RepoAddress} from '../workspace/types';
-import {workspacePathFromAddress} from '../workspace/workspacePath';
 
 type Props = {
   name: string;
@@ -20,13 +21,25 @@ type Props = {
 
 export const RunRequestTable = ({runRequests, isJob, repoAddress, mode, jobName}: Props) => {
   const repo = useRepository(repoAddress);
+  const [selectedRequest, setSelectedRequest] = useState<RunRequestFragment | null>(null);
+  const [visibleDialog, setVisibleDialog] = useState<'config' | null>(null);
+  const copy = useCopyToClipboard();
+
+  const copyConfig = async () => {
+    copy(selectedRequest?.runConfigYaml || '');
+    await showSharedToaster({
+      intent: 'success',
+      icon: 'copy_to_clipboard_done',
+      message: 'Copied!',
+    });
+  };
 
   const body = (
     <tbody data-testid={testId('table-body')}>
       {runRequests.map((request, index) => {
         return (
           <tr key={index} data-testid={testId(request.runKey || '')}>
-            <td>
+            <td style={{verticalAlign: 'middle'}}>
               <Box flex={{alignItems: 'center', gap: 8}}>
                 <PipelineReference
                   pipelineName={request.jobName ?? jobName}
@@ -37,35 +50,39 @@ export const RunRequestTable = ({runRequests, isJob, repoAddress, mode, jobName}
                 />
               </Box>
             </td>
-            <td>
-              <Box flex={{direction: 'row', gap: 8, wrap: 'wrap'}}>
-                {filterTags(request.tags).map(({key, value}) => (
-                  <Tag key={key}>{`${key}: ${value}`}</Tag>
-                ))}
-              </Box>
-            </td>
-            <td>
-              <OpenInLaunchpadButton
-                request={request}
-                mode={mode}
-                jobName={jobName}
-                repoAddress={repoAddress}
-                isJob={isJob}
+            <td style={{width: '7.5%', verticalAlign: 'middle', textAlign: 'center'}}>
+              <PreviewButton
+                onClick={() => {
+                  setSelectedRequest(request);
+                  setVisibleDialog('config');
+                }}
               />
             </td>
           </tr>
         );
       })}
+      {selectedRequest && (
+        <RunConfigDialog
+          isOpen={visibleDialog === 'config'}
+          onClose={() => setVisibleDialog(null)}
+          copyConfig={() => copyConfig()}
+          mode={mode || null}
+          runConfigYaml={selectedRequest.runConfigYaml}
+          tags={selectedRequest.tags}
+          isJob={isJob}
+          request={selectedRequest}
+          repoAddress={repoAddress}
+        />
+      )}
     </tbody>
   );
   return (
     <div>
       <Table style={{borderRight: `1px solid ${Colors.keylineDefault()}`, tableLayout: 'fixed'}}>
         <thead>
           <tr>
-            <th>{isJob ? 'Job' : 'Pipeline'} name</th>
-            <th>Tags</th>
-            <th>Configuration</th>
+            <th>Target</th>
+            <th style={{width: '7.5%'}}>Actions</th>
           </tr>
         </thead>
         {body}
@@ -74,55 +91,10 @@ export const RunRequestTable = ({runRequests, isJob, repoAddress, mode, jobName}
   );
 };
 
-// Filter out tags we already display in other ways
-function filterTags(tags: Array<{key: string; value: any}>) {
-  return tags.filter(({key}) => {
-    // Exclude the tag that specifies the schedule if this is a schedule name
-    return !['dagster/schedule_name'].includes(key);
-  });
-}
-
-function OpenInLaunchpadButton({
-  mode,
-  request,
-  jobName,
-  isJob,
-  repoAddress,
-}: {
-  request: RunRequestFragment;
-  jobName?: string;
-  mode?: string;
-  repoAddress: RepoAddress;
-  isJob: boolean;
-}) {
-  const openInNewTab = useOpenInNewTab();
-  const pipelineName = request.jobName ?? jobName;
-  const [_, onSave] = useExecutionSessionStorage(repoAddress, pipelineName!);
-
+function PreviewButton({onClick}: {onClick: () => void}) {
   return (
-    <Button
-      icon={<Icon name="edit" />}
-      onClick={() => {
-        onSave((data) =>
-          applyCreateSession(data, {
-            mode,
-            runConfigYaml: request.runConfigYaml,
-            tags: request.tags,
-            assetSelection: request.assetSelection?.map(({path}) => ({
-              assetKey: {path},
-            })),
-          }),
-        );
-
-        openInNewTab(
-          workspacePathFromAddress(
-            repoAddress,
-            `/${isJob ? 'jobs' : 'pipelines'}/${pipelineName}/playground`,
-          ),
-        );
-      }}
-    >
-      Open in Launchpad
-    </Button>
+    <Tooltip content="Preview run config and tags" placement="left-start">
+      <Button icon={<Icon name="data_object" />} onClick={onClick} />
+    </Tooltip>
   );
 }