[8/n] [RFC] Implement updated designs: Sensor cursor page [2/N] (#26135)

## Summary & Motivation Linear: https://linear.app/dagster-labs/issue/FE-698/implement-updated-designs-sensor-cursor-page-[2n] Implement redesign for sensor cursor page ![image](https://github.com/user-attachments/assets/6cf2e862-d535-43ae-8027-24efcc464671) ## How I Tested These Changes Tested locally
dagster-io · Dec 9, 2024 · 2723796 · 2723796
1 parent 8f80e08
commit 2723796
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 28 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
@@ -268,6 +268,7 @@ import password from '../icon-svgs/password.svg';
 import pause from '../icon-svgs/pause.svg';
 import people from '../icon-svgs/people.svg';
 import plots from '../icon-svgs/plots.svg';
+import preview_tick from '../icon-svgs/preview_tick.svg';
 import priority_1 from '../icon-svgs/priority_1.svg';
 import priority_2 from '../icon-svgs/priority_2.svg';
 import priority_3 from '../icon-svgs/priority_3.svg';
@@ -664,6 +665,7 @@ export const Icons = {
   pause,
   people,
   plots,
+  preview_tick,
   priority_1,
   priority_2,
   priority_3,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/preview_tick.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/preview_tick.svg
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateTickButtonSensor.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateTickButtonSensor.tsx
@@ -1,4 +1,4 @@
-import {Box, Button, Tooltip} from '@dagster-io/ui-components';
+import {Box, Button, Icon, Tooltip} from '@dagster-io/ui-components';
 import {useState} from 'react';
 
 import {SensorDryRunDialog} from './SensorDryRunDialog';
@@ -32,6 +32,7 @@ export const EvaluateTickButtonSensor = ({
         <Button
           disabled={sensorType !== SensorType.STANDARD}
           onClick={() => setShowTestTickDialog(true)}
+          icon={<Icon name="preview_tick" />}
         >
           Preview tick result
         </Button>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/SensorDryRunDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/SensorDryRunDialog.tsx
@@ -8,7 +8,6 @@ import {
   DialogFooter,
   Group,
   Icon,
-  NonIdealState,
   Spinner,
   Subheading,
   Tag,
@@ -64,8 +63,8 @@ export const SensorDryRunDialog = (props: Props) => {
       isOpen={isOpen}
       onClose={onClose}
       style={{width: '70vw', display: 'flex'}}
-      icon="sensors"
-      title={name}
+      icon="preview_tick"
+      title={`Preview tick result for ${name}`}
     >
       <SensorDryRun {...props} />
     </Dialog>
@@ -198,8 +197,8 @@ const SensorDryRun = ({repoAddress, name, currentCursor, onClose, jobName}: Prop
       return (
         <Box flex={{direction: 'row', gap: 8}}>
           <Button onClick={onClose}>Cancel</Button>
-          <Button onClick={submitTest} intent="primary" data-testid={testId('evaluate')}>
-            Evaluate
+          <Button onClick={submitTest} intent="primary" data-testid={testId('continue')}>
+            Continue
           </Button>
         </Box>
       );
@@ -376,29 +375,24 @@ const SensorDryRun = ({repoAddress, name, currentCursor, onClose, jobName}: Prop
     } else {
       return (
         <Box flex={{direction: 'column', gap: 8}}>
-          <div>Cursor</div>
+          <div>Cursor value (optional)</div>
           <TextInput
             value={cursor}
             onChange={(e) => setCursor(e.target.value)}
             data-testid={testId('cursor-input')}
+            placeholder="Enter a cursor value"
           />
-          {currentCursor === '' || !currentCursor ? (
-            <Box padding={{top: 16, bottom: 32}} flex={{justifyContent: 'center'}}>
-              <NonIdealState
-                icon="no-results"
-                title="You're not using a cursor"
-                description={
-                  <span>
-                    Check our{' '}
-                    <a href="https://docs.dagster.io/concepts/partitions-schedules-sensors/sensors#idempotence-and-cursors">
-                      sensor documentation
-                    </a>{' '}
-                    to learn how to use cursors
-                  </span>
-                }
-              />
-            </Box>
-          ) : null}
+          <div>
+            A cursor tracks where a sensor left off, allowing the sensor to efficiently process new
+            changes or events without missing anything or duplicating work. The cursor is typically
+            a string, and can be updated within the sensor&apos;s logic to reflect the latest state.
+          </div>
+          <div>
+            <a href="https://docs.dagster.io/concepts/partitions-schedules-sensors/sensors#idempotence-and-cursors">
+              Learn more
+            </a>{' '}
+            about cursors
+          </div>
         </Box>
       );
     }

diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/__tests__/SensorDryRunDialog.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/__tests__/SensorDryRunDialog.test.tsx
@@ -38,7 +38,7 @@ describe('SensorDryRunTest', () => {
     render(<Test mocks={[Mocks.SensorDryRunMutationRunRequests, Mocks.PersistCursorValueMock]} />);
     const cursorInput = await screen.findByTestId('cursor-input');
     await userEvent.type(cursorInput, 'testing123');
-    await userEvent.click(screen.getByTestId('evaluate'));
+    await userEvent.click(screen.getByTestId('continue'));
     await waitFor(() => {
       expect(screen.getByText(/3\srun requests/g)).toBeVisible();
       expect(screen.queryByText('Skipped')).toBe(null);
@@ -55,7 +55,7 @@ describe('SensorDryRunTest', () => {
     render(<Test mocks={[Mocks.SensorDryRunMutationError]} />);
     const cursorInput = await screen.findByTestId('cursor-input');
     await userEvent.type(cursorInput, 'testing123');
-    await userEvent.click(screen.getByTestId('evaluate'));
+    await userEvent.click(screen.getByTestId('continue'));
     await waitFor(() => {
       expect(screen.getByText('Failed')).toBeVisible();
       expect(screen.queryByText('Skipped')).toBe(null);
@@ -66,7 +66,7 @@ describe('SensorDryRunTest', () => {
     render(<Test mocks={[Mocks.SensorDryRunMutationError]} />);
     const cursorInput = await screen.findByTestId('cursor-input');
     await userEvent.type(cursorInput, 'testing123');
-    await userEvent.click(screen.getByTestId('evaluate'));
+    await userEvent.click(screen.getByTestId('continue'));
     await waitFor(() => {
       expect(screen.getByText('Failed')).toBeVisible();
       expect(screen.queryByText('Skipped')).toBe(null);
@@ -81,7 +81,7 @@ describe('SensorDryRunTest', () => {
     render(<Test mocks={[Mocks.SensorDryRunMutationSkipped]} />);
     const cursorInput = await screen.findByTestId('cursor-input');
     await userEvent.type(cursorInput, 'testing123');
-    await userEvent.click(screen.getByTestId('evaluate'));
+    await userEvent.click(screen.getByTestId('continue'));
     await waitFor(() => {
       expect(screen.getByText('Skipped')).toBeVisible();
     });