diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ErrorBoundary.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ErrorBoundary.tsx index dc050ee118e88..16df64c8e45c9 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/ErrorBoundary.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/ErrorBoundary.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import {Box} from './Box'; import {Colors} from './Color'; -import {Body, Subtitle} from './Text'; +import {Body, Subheading} from './Text'; import {FontFamily} from './styles'; export type ErrorCollectionContextValue = { @@ -71,7 +71,7 @@ export class ErrorBoundary extends React.Component - Sorry, {this.props.region} can't be displayed. + Sorry, {this.props.region} can't be displayed. {errorCollectionMessage} {errorStackIncluded && {`${error.message}\n\n${error.stack}`}} 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 index aa5423de0e43c..6931dabab7d1e 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx @@ -4,7 +4,7 @@ import {Box} from './Box'; import {Colors} from './Color'; import {Icon, IconName} from './Icon'; import {Spinner} from './Spinner'; -import {Subtitle} from './Text'; +import {Subheading} from './Text'; export type NonIdealStateProps = React.DetailedHTMLProps< React.InputHTMLAttributes, @@ -54,7 +54,7 @@ export const NonIdealState = ({ grow: 1, }} > - {title && {title}} + {title && {title}} {description &&
{description}
} {action} diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ProductTour.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ProductTour.tsx index 6aae562ca094d..92275b6e1d16b 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/ProductTour.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/ProductTour.tsx @@ -7,7 +7,7 @@ import {Box} from './Box'; import {Button} from './Button'; import {Colors} from './Color'; import {Popover} from './Popover'; -import {Subtitle} from './Text'; +import {Subheading} from './Text'; export enum ProductTourPosition { TOP_LEFT = 'top-start', @@ -89,7 +89,7 @@ export const ProductTour = ({ {media} - {title} + {title}
{description}
{actionsJsx} diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx index 334c03d56631d..08d24442aefbe 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx @@ -12,78 +12,80 @@ const Text = styled.span` `; export const Title = styled(Text)` - font-size: 32px; - line-height: 36px; + font-size: 24px; font-weight: 600; + line-height: 30px; -webkit-font-smoothing: antialiased; `; export const Heading = styled(Text)` - font-size: 20px; - line-height: 24px; + font-size: 18px; font-weight: 500; + line-height: 24px; -webkit-font-smoothing: antialiased; `; -export const SubtitleLarge = styled(Text)` - font-size: 16px; - line-height: 20px; +export const Headline = styled(Text)` + font-size: 18px; font-weight: 500; + line-height: 24px; -webkit-font-smoothing: antialiased; `; -export const Subtitle = styled(Text)` +export const Subheading = styled(Text)` font-size: 14px; + font-weight: 600; line-height: 20px; - font-weight: 500; -webkit-font-smoothing: antialiased; `; -export const SubtitleSmall = styled(Text)` - font-size: 12px; - line-height: 16px; - font-weight: 500; +export const Subtitle1 = styled(Text)` + font-size: 16px; + font-weight: 600; + line-height: 24px; + -webkit-font-smoothing: antialiased; `; -export const BodyLarge = styled(Text)` - font-size: 16px; +export const Subtitle2 = styled(Text)` + font-size: 14px; + font-weight: 600; line-height: 20px; - font-weight: 400; + -webkit-font-smoothing: antialiased; `; export const Body = styled(Text)` font-family: ${FontFamily.default}; font-size: 14px; - line-height: 20px; - font-weight: 400; `; -export const BodySmall = styled(Text)` - font-family: ${FontFamily.default}; - font-size: 12px; - line-height: 16px; +export const Body1 = styled(Text)` + font-size: 16px; font-weight: 400; + line-height: 24px; `; -export const MonoLarge = styled(Text)` - font-family: ${FontFamily.monospace}; - font-size: 16px; +export const Body2 = styled(Text)` + font-family: ${FontFamily.default}; line-height: 20px; + font-size: 14px; font-weight: 400; `; -export const Mono = styled(Text)` - font-family: ${FontFamily.monospace}; - font-size: 14px; - line-height: 20px; - font-weight: 400; +export const Caption = styled(Text)` + font-family: ${FontFamily.default}; + font-size: 12px; `; -export const MonoSmall = styled(Text)` - font-family: ${FontFamily.monospace}; +export const CaptionSubtitle = styled(Text)` font-size: 12px; + font-weight: 600; line-height: 16px; - font-weight: 400; +`; + +export const CaptionBolded = styled(Text)` + font-family: ${FontFamily.default}; + font-size: 12px; + font-weight: 900; `; export const Code = styled(Text)` @@ -94,8 +96,12 @@ export const Code = styled(Text)` padding: 2px 4px; `; -//Depricated – Use BodySmall moving forward -export const Caption = styled(Text)` - font-family: ${FontFamily.default}; +export const Mono = styled(Text)` + font-family: ${FontFamily.monospace}; + font-size: 14px; +`; + +export const CaptionMono = styled(Text)` + font-family: ${FontFamily.monospace}; font-size: 12px; `; diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Group.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Group.stories.tsx index 21166e145b9dc..dec2eb3fa9c38 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Group.stories.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Group.stories.tsx @@ -5,7 +5,7 @@ import {Box} from '../Box'; import {ButtonLink} from '../ButtonLink'; import {Colors} from '../Color'; import {Group} from '../Group'; -import {Body, Code, Heading, Subtitle} from '../Text'; +import {Body, Code, Heading, Subheading} from '../Text'; import {AlignItems, FlexWrap, Spacing} from '../types'; // eslint-disable-next-line import/no-default-export @@ -119,7 +119,7 @@ export const PointerEventsTest = () => { relevant margins. - Subtitle + Subheading ); diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/DagsterPlusLaunchPromotion.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/DagsterPlusLaunchPromotion.tsx index 870c69528da07..50561d04dff66 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/DagsterPlusLaunchPromotion.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/DagsterPlusLaunchPromotion.tsx @@ -1,11 +1,4 @@ -import { - BodyLarge, - Box, - Button, - Dialog, - ExternalAnchorButton, - Icon, -} from '@dagster-io/ui-components'; +import {Body1, Box, Button, Dialog, ExternalAnchorButton, Icon} from '@dagster-io/ui-components'; import styled from 'styled-components'; import dagster_plus from './dagster_plus.png'; @@ -37,10 +30,10 @@ export const DagsterPlusLaunchPromotion = () => {
Introducing Dagster+
- + Join us on April 17 at 12 ET for the unveiling of the next generation of Dagster Cloud. - + - Preferences + Preferences
Timezone
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx index d57fe9b1424e2..cbe92c09d4ea2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx @@ -5,7 +5,7 @@ import { Dialog, DialogBody, DialogFooter, - Subtitle, + Subheading, } from '@dagster-io/ui-components'; import * as React from 'react'; @@ -79,7 +79,7 @@ const UserSettingsDialogContent = ({onClose, visibleFlags}: DialogContentProps) - Experimental features + Experimental features {visibleFlags.map(({key, label, flagType}) => ( - Event + Event {event.__typename === 'MaterializationEvent' ? ( @@ -68,7 +68,7 @@ export const AssetEventDetail = ({ {event.partition && ( - Partition + Partition {hidePartitionLinks ? ( event.partition ) : ( @@ -95,7 +95,7 @@ export const AssetEventDetail = ({ )} - Run + Run {run ? ( @@ -108,7 +108,7 @@ export const AssetEventDetail = ({ )} - Job + Job {run && !isHiddenAssetGroupJob(run.pipelineName) ? ( @@ -133,13 +133,13 @@ export const AssetEventDetail = ({ {event.description && ( - Description + Description )} - Metadata + Metadata - Source data + Source data )} - System tags + System tags {assetLineage.length > 0 && ( - Parent materializations + Parent materializations )} @@ -185,18 +185,18 @@ export const AssetEventDetailEmpty = () => ( padding={{vertical: 16}} > - Event + Event - Run— + Run— - Job— + Job— - Metadata + Metadata diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEvents.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEvents.tsx index 4c2e42ecdc4b7..a7552fa4322fe 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEvents.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEvents.tsx @@ -10,7 +10,7 @@ import { MenuItem, Popover, Spinner, - Subtitle, + Subheading, } from '@dagster-io/ui-components'; import * as React from 'react'; @@ -124,7 +124,7 @@ export const AssetEvents = ({ padding={{vertical: 16, horizontal: 24}} style={{marginBottom: -1}} > - Asset Events + Asset Events
- {label} + {label} )} diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeDefinition.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeDefinition.tsx index 017242fae7ef8..db373170fe35a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeDefinition.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeDefinition.tsx @@ -7,7 +7,7 @@ import { ConfigTypeSchema, Icon, Mono, - Subtitle, + Subheading, } from '@dagster-io/ui-components'; import {Link} from 'react-router-dom'; @@ -72,7 +72,7 @@ export const AssetNodeDefinition = ({ border="bottom" flex={{justifyContent: 'space-between', gap: 8}} > - Description + Description - Code version + Code version {assetNode.opVersion} @@ -99,7 +99,7 @@ export const AssetNodeDefinition = ({ {assetNode.freshnessPolicy && ( <> - Freshness policy + Freshness policy - Backfill policy + Backfill policy - Upstream assets{upstream?.length ? ` (${upstream.length})` : ''} + + Upstream assets{upstream?.length ? ` (${upstream.length})` : ''} + View upstream graph @@ -151,9 +153,9 @@ export const AssetNodeDefinition = ({ border="top-and-bottom" flex={{justifyContent: 'space-between', gap: 8}} > - + Downstream assets{downstream?.length ? ` (${downstream.length})` : ''} - + {/** Ensures the line between the left and right columns goes to the bottom of the page */} @@ -163,7 +165,7 @@ export const AssetNodeDefinition = ({ <> - Required resources + Required resources {[...assetNode.requiredResources] @@ -200,7 +202,7 @@ export const AssetNodeDefinition = ({ <> - Config + Config {assetConfigSchema ? ( @@ -223,7 +225,7 @@ export const AssetNodeDefinition = ({ <> - Type + Type {assetType && assetType.displayName !== 'Any' ? ( @@ -245,7 +247,7 @@ export const AssetNodeDefinition = ({ border="top-and-bottom" flex={{justifyContent: 'space-between', gap: 8}} > - Metadata + Metadata {assetMetadata.length > 0 ? ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeOverview.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeOverview.tsx index a8daa672d1ecb..bb1834c600047 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeOverview.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeOverview.tsx @@ -1,6 +1,7 @@ // eslint-disable-next-line no-restricted-imports import { Body, + Body2, Box, Button, ButtonLink, @@ -11,7 +12,7 @@ import { MiddleTruncate, NonIdealState, Skeleton, - Subtitle, + Subtitle2, Tag, } from '@dagster-io/ui-components'; import dayjs from 'dayjs'; @@ -120,7 +121,7 @@ export const AssetNodeOverview = ({ - Latest {assetNode?.isSource ? 'observation' : 'materialization'} + Latest {assetNode?.isSource ? 'observation' : 'materialization'} {liveData ? ( @@ -134,7 +135,7 @@ export const AssetNodeOverview = ({ {liveData?.assetChecks.length ? ( - Check results + Check results - Upstream assets + Upstream assets {upstream?.length ? ( ) : ( @@ -185,7 +186,7 @@ export const AssetNodeOverview = ({ )} - Downstream assets + Downstream assets {downstream?.length ? ( ) : ( @@ -504,15 +505,15 @@ const AttributeAndValue = ({ return ( - {label} - + {label} + {children} - + ); }; -const NoValue = () => –; +const NoValue = () => –; export const AssetNodeOverviewNonSDA = ({ assetKey, @@ -618,8 +619,8 @@ const SectionEmptyState = ({ style={{background: Colors.backgroundLight(), borderRadius: 8}} flex={{direction: 'column', gap: 8}} > - {title} - {description} + {title} + {description} {learnMoreLink ? ( Learn more diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionDetail.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionDetail.tsx index ec1f9dbc05aec..3bf0a8f3fde57 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionDetail.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionDetail.tsx @@ -9,7 +9,7 @@ import { MiddleTruncate, Mono, Spinner, - Subtitle, + Subheading, Tag, } from '@dagster-io/ui-components'; import {useMemo} from 'react'; @@ -294,7 +294,7 @@ export const AssetPartitionDetail = ({ > {!latest ? ( - Latest materialization + Latest materialization None @@ -302,11 +302,11 @@ export const AssetPartitionDetail = ({ ) : ( - + {latest.__typename === 'MaterializationEvent' ? 'Latest materialization' : 'Latest observation'} - + {latest.__typename === 'MaterializationEvent' ? ( @@ -318,7 +318,7 @@ export const AssetPartitionDetail = ({ )} - Run + Run {latestEventRun && latest ? ( @@ -331,7 +331,7 @@ export const AssetPartitionDetail = ({ )} - Job + Job {latest && latestEventRun && !isHiddenAssetGroupJob(latestEventRun.pipelineName) ? ( @@ -364,7 +364,7 @@ export const AssetPartitionDetail = ({ - Metadata + Metadata - Source data + Source data - System tags + System tags diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitions.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitions.tsx index e9cc4fb1a8833..b90870ea7ebaf 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitions.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitions.tsx @@ -6,7 +6,7 @@ import { MenuItem, Popover, Spinner, - Subtitle, + Subheading, Tooltip, } from '@dagster-io/ui-components'; import isEqual from 'lodash/isEqual'; @@ -240,7 +240,7 @@ export const AssetPartitions = ({ {selection.dimension.name !== 'default' && ( - {selection.dimension.name} + {selection.dimension.name} )}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPlotsPage.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPlotsPage.tsx index ea21ad6ff0ab3..d28d199909b06 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPlotsPage.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPlotsPage.tsx @@ -1,4 +1,4 @@ -import {Box, Subtitle} from '@dagster-io/ui-components'; +import {Box, Subheading} from '@dagster-io/ui-components'; import {useEffect} from 'react'; import {AssetPlots} from './AssetPlots'; @@ -18,7 +18,7 @@ export const AssetPlotsPage = (props: React.ComponentProps) = padding={{vertical: 16, left: 24, right: 12}} style={{marginBottom: -1}} > - Asset plots + Asset plots diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeLeftPanel.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeLeftPanel.tsx index caf0b89cedd0e..d70aebda0b310 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeLeftPanel.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeLeftPanel.tsx @@ -1,12 +1,12 @@ import { - Body, + Body2, Box, Caption, Colors, CursorPaginationControls, Icon, MiddleTruncate, - SubtitleLarge, + Subtitle1, } from '@dagster-io/ui-components'; import React from 'react'; import {Link} from 'react-router-dom'; @@ -77,7 +77,7 @@ export const AutomaterializeLeftList = (props: ListProps) => { return ( - Evaluations + Evaluations { - + {repoAddress && sensorName ? ( { ) : ( {sensorName ?? 'Automation'} )} - + diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeMiddlePanel.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeMiddlePanel.tsx index 926f0f1d9a3c5..59298bceb4223 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeMiddlePanel.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeMiddlePanel.tsx @@ -1,7 +1,7 @@ import {gql, useQuery} from '@apollo/client'; import { BaseTag, - Body, + Body2, Box, Colors, Icon, @@ -9,7 +9,8 @@ import { MiddleTruncate, NonIdealState, Popover, - Subtitle, + Subheading, + Subtitle2, Tag, TagSelectorContainer, TagSelectorDefaultTagTooltipStyle, @@ -117,7 +118,7 @@ export const AutomaterializeMiddlePanel = (props: Props) => { padding={{horizontal: 16}} flex={{alignItems: 'center', justifyContent: 'space-between'}} > - Result + Result ); @@ -167,12 +168,12 @@ export const AutomaterializeMiddlePanel = (props: Props) => { icon="sensors" title="No evaluations" description={ - + - + This asset’s automation policy has not been evaluated yet. Make sure your automation sensor is running. - +
{ Learn more about automation policies - + } /> @@ -325,24 +326,24 @@ export const AutomaterializeMiddlePanelWithData = ({ border="bottom" flex={{alignItems: 'center', justifyContent: 'space-between'}} > - Result + Result {selectedEvaluation ? (
- Evaluation result + Evaluation result
{statusTag}
 {selectedEvaluation?.timestamp ? ( - Timestamp + Timestamp ) : null} - Duration + Duration
{selectedEvaluation?.startTimestamp && selectedEvaluation?.endTimestamp ? formatElapsedTimeWithMsec( @@ -355,11 +356,11 @@ export const AutomaterializeMiddlePanelWithData = ({
- Runs launched ({selectedEvaluation.runIds.length}) + Runs launched ({selectedEvaluation.runIds.length}) - Policy evaluation + Policy evaluation {definition?.partitionDefinition ? ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRunsTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRunsTable.tsx index 3c71a271ed273..23b821e95f51c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRunsTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRunsTable.tsx @@ -1,5 +1,5 @@ import {gql, useQuery} from '@apollo/client'; -import {Body, Box, Colors, Mono, Table} from '@dagster-io/ui-components'; +import {Body2, Box, Colors, Mono, Table} from '@dagster-io/ui-components'; import {Link} from 'react-router-dom'; import { @@ -26,14 +26,14 @@ export const AutomaterializeRunsTable = ({runIds}: {runIds: string[]}) => { if (!runIds.length) { return ( - + None - + ); } if (error) { - return An error occurred fetching runs. Check your network status; + return An error occurred fetching runs. Check your network status; } if (loading || !data) { @@ -45,7 +45,7 @@ export const AutomaterializeRunsTable = ({runIds}: {runIds: string[]}) => { } if (data.runsOrError.__typename === 'InvalidPipelineRunsFilterError') { - return {data.runsOrError.message}; + return {data.runsOrError.message}; } return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx index 260590c47707b..9f713fee970fd 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx @@ -1,4 +1,4 @@ -import {Box, Colors, Icon, Subtitle, Tooltip} from '@dagster-io/ui-components'; +import {Box, Colors, Icon, Subheading, Tooltip} from '@dagster-io/ui-components'; import * as React from 'react'; import styled from 'styled-components'; @@ -21,7 +21,7 @@ export const CollapsibleSection = ({header, details, headerRightSide, children}: }} > - {header} + {header} {details ? ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/ChangedReasons.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/ChangedReasons.tsx index 9dfa866700582..610bf78a78b0f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/ChangedReasons.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/ChangedReasons.tsx @@ -4,7 +4,7 @@ import { Colors, Icon, Popover, - Subtitle, + Subtitle2, Tag, ifPlural, } from '@dagster-io/ui-components'; @@ -70,10 +70,10 @@ export const ChangedReasonsPopover = ({ content={ - + {numberFormatter.format(modifiedChanges.length)}{' '} {ifPlural(modifiedChanges.length, 'change', 'changes')} in this branch - + {modifiedChanges.map((change) => { return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/LargeCollapsibleSection.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/LargeCollapsibleSection.tsx index f63b02a449d36..d9cb24ed34002 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/LargeCollapsibleSection.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/LargeCollapsibleSection.tsx @@ -1,6 +1,6 @@ // eslint-disable-next-line no-restricted-imports import {Collapse} from '@blueprintjs/core'; -import {Box, Icon, IconName, SubtitleLarge, UnstyledButton} from '@dagster-io/ui-components'; +import {Box, Icon, IconName, Subtitle1, UnstyledButton} from '@dagster-io/ui-components'; import React from 'react'; import {useStateWithStorage} from '../hooks/useStateWithStorage'; @@ -39,12 +39,10 @@ export const LargeCollapsibleSection = ({ border="bottom" > {icon && } - + {header} {count !== undefined ? ` (${count.toLocaleString()})` : ''} - + {right} - Partition selection + Partition selection All partitions } @@ -482,7 +482,7 @@ const LaunchAssetChoosePartitionsDialogBody = ({ isInitiallyOpen={true} title={ - Partition selection + Partition selection {target.type === 'pureWithAnchorAsset' ? ( // we won't know until runtime ) : ( @@ -498,7 +498,7 @@ const LaunchAssetChoosePartitionsDialogBody = ({ data-testid={testId('anchor-asset-label')} > - {displayNameForAssetKey(target.anchorAssetKey)} + {displayNameForAssetKey(target.anchorAssetKey)} )} {selections.map((range, idx) => ( @@ -507,7 +507,7 @@ const LaunchAssetChoosePartitionsDialogBody = ({ border={idx < selections.length - 1 ? 'bottom' : undefined} padding={{vertical: 12, horizontal: 20}} > - + {range.dimension.name} @@ -550,7 +550,7 @@ const LaunchAssetChoosePartitionsDialogBody = ({ - Tags + Tags {tags.length} tags } @@ -588,7 +588,7 @@ const LaunchAssetChoosePartitionsDialogBody = ({ {target.type === 'job' && ( Options} + title={Options} > {showSingleRunBackfillToggle ? ( - Launch as... + Launch as... - Warnings + Warnings {alerts.length > 1 ? `${alerts.length} warnings` : `1 warning`} diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/RecentUpdatesTimeline.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/RecentUpdatesTimeline.tsx index 3641cf22a8304..ac7a5a96118f1 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/RecentUpdatesTimeline.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/RecentUpdatesTimeline.tsx @@ -5,7 +5,7 @@ import { Icon, Popover, Spinner, - Subtitle, + Subtitle2, Tag, useViewport, } from '@dagster-io/ui-components'; @@ -121,7 +121,7 @@ export const RecentUpdatesTimeline = ({ if (loading) { return ( - Recent updates + Recent updates ); @@ -130,7 +130,7 @@ export const RecentUpdatesTimeline = ({ if (!materializations?.length) { return ( - Recent updates + Recent updates No materialization events found ); @@ -139,7 +139,7 @@ export const RecentUpdatesTimeline = ({ return ( - Recent updates + Recent updates {materializations.length === 100 ? 'Last 100 updates' @@ -181,7 +181,7 @@ export const RecentUpdatesTimeline = ({ content={ - Updates + Updates
{bucket.materializations diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/Stale.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/Stale.tsx index ce0e1b3e19d03..2abc8b675358c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/Stale.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/Stale.tsx @@ -4,11 +4,11 @@ import { Box, ButtonLink, Caption, + CaptionSubtitle, Colors, Icon, Popover, - Subtitle, - SubtitleSmall, + Subtitle2, Tag, ifPlural, } from '@dagster-io/ui-components'; @@ -203,10 +203,10 @@ const StaleCausesPopoverSummary = ({ return ( - + {numberFormatter.format(totalCauses)} {ifPlural(totalCauses, 'change', 'changes')} since last materialization - + {Object.entries(grouped).map(([label, causes], idx) => { const isSelf = isEqual(assetKey.path, causes[0]!.key.path); @@ -216,9 +216,9 @@ const StaleCausesPopoverSummary = ({ padding={{horizontal: 12, vertical: 8}} border={idx === 0 ? 'bottom' : 'top-and-bottom'} > - + {getCollapsedHeaderLabel(isSelf, causes[0]!.category, causes.length)} - + {causes.map((cause, idx) => ( - + A database schema migration is required to use asset checks. Run{' '} dagster instance migrate. - + } /> @@ -119,10 +119,10 @@ export function AgentUpgradeRequired() { title="Agent upgrade required" description={ - + Checks require Dagster Cloud Agent version 1.5 or higher. Upgrade your agent(s) to use checks. - + } /> @@ -138,10 +138,10 @@ export function NeedsUserCodeUpgrade() { title="Upgrade required" description={ - + Checks aren't supported with dagster versions before 1.5. Upgrade the dagster library in this code location to use them. - + } /> @@ -157,10 +157,10 @@ export function NoChecks() { title="No checks found for this asset" description={ - + Asset Checks run after a materialization and can verify a particular property of a data asset. Checks can help ensure that the contents of each data asset is correct. - + {/* - + Asset checks can verify properties of a data asset, e.g. that there are no null values in a particular column. - + Learn more about asset checks @@ -167,9 +167,9 @@ export const AssetChecks = ({ flex={{justifyContent: 'space-between', alignItems: 'center'}} padding={{left: 24, vertical: 12, right: 12}} > - + Checks {checks.length ? <>({numberFormatter.format(checks.length)}) : null} - + {getCheckIcon(check)} - {check.name} + {check.name} - {selectedCheck.name} + {selectedCheck.name} @@ -245,16 +245,16 @@ export const AssetChecks = ({ padding={{horizontal: 24, vertical: 12}} > About} + header={About} headerWrapperProps={headerWrapperProps} arrowSide="right" > - + {selectedCheck.description ?? ( No description provided )} - + {/* {selectedCheck.dependencies?.length ? ( {assetNode.dependencies.map((dep) => { @@ -272,7 +272,7 @@ export const AssetChecks = ({ Latest execution} + header={Latest execution} headerWrapperProps={headerWrapperProps} arrowSide="right" > @@ -284,7 +284,7 @@ export const AssetChecks = ({
- Evaluation result + Evaluation result
{lastExecution ? ( - Timestamp + Timestamp - Target materialization + Target materialization @@ -315,14 +315,14 @@ export const AssetChecks = ({
{lastExecution?.evaluation?.metadataEntries.length ? ( - Metadata + Metadata ) : null} Execution history} + header={Execution history} headerWrapperProps={headerWrapperProps} arrowSide="right" > diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksStatusSummary.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksStatusSummary.tsx index 0af9d084611a6..548079734545c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksStatusSummary.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksStatusSummary.tsx @@ -4,7 +4,7 @@ import { Icon, Popover, Spinner, - Subtitle, + Subtitle2, Tag, TagIntent, } from '@dagster-io/ui-components'; @@ -94,7 +94,7 @@ const ChecksSummaryPopover = ({ return ( - {`${titlePerCheckType(type)} checks`} + {`${titlePerCheckType(type)} checks`} {assetChecks.map((check) => ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/VirtualizedAssetCheckTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/VirtualizedAssetCheckTable.tsx index 03137b98b0d57..d9874bdef82bf 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/VirtualizedAssetCheckTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/VirtualizedAssetCheckTable.tsx @@ -1,5 +1,5 @@ import {gql} from '@apollo/client'; -import {Body, Box, Caption, Colors} from '@dagster-io/ui-components'; +import {Body2, Box, Caption, Colors} from '@dagster-io/ui-components'; import {useVirtualizer} from '@tanstack/react-virtual'; import {useRef} from 'react'; import {Link} from 'react-router-dom'; @@ -79,7 +79,7 @@ export const VirtualizedAssetCheckRow = ({assetNode, height, start, row}: AssetC - {row.name} + {row.name} {row.description} diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationEvaluationHistoryTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationEvaluationHistoryTable.tsx index 6a98148fb0167..b3a1df7df7323 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationEvaluationHistoryTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationEvaluationHistoryTable.tsx @@ -1,5 +1,5 @@ import { - Body, + Body2, Box, ButtonGroup, ButtonLink, @@ -122,9 +122,9 @@ export const AutomaterializationEvaluationHistoryTable = ({ setSelectedTick(tick); }} > - + {tick.requestedAssetMaterializationCount} materializations requested - + ) : ( ' - ' diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationTickDetailDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationTickDetailDialog.tsx index 64fcd279f2e8d..e6c57f6a750ba 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationTickDetailDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationTickDetailDialog.tsx @@ -1,5 +1,5 @@ import {gql, useQuery} from '@apollo/client'; -import {Box, Caption, Colors, Icon, Spinner, Subtitle} from '@dagster-io/ui-components'; +import {Box, Caption, Colors, Icon, Spinner, Subtitle2} from '@dagster-io/ui-components'; import {useVirtualizer} from '@tanstack/react-virtual'; import {memo, useMemo, useRef, useState} from 'react'; import {Link} from 'react-router-dom'; @@ -167,7 +167,7 @@ export const AutomaterializationTickDetailDialog = memo( padding={{vertical: 12, horizontal: 24}} border={filteredAssetKeys.length > 0 ? undefined : 'bottom'} > - Materializations requested + Materializations requested {content} diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/GlobalAutomaterializationContent.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/GlobalAutomaterializationContent.tsx index 6fc9acc41f62f..2fc63bf4c6411 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/GlobalAutomaterializationContent.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/GlobalAutomaterializationContent.tsx @@ -1,5 +1,5 @@ import {useLazyQuery} from '@apollo/client'; -import {Alert, Box, Checkbox, Colors, Spinner, Subtitle, Table} from '@dagster-io/ui-components'; +import {Alert, Box, Checkbox, Colors, Spinner, Subtitle2, Table} from '@dagster-io/ui-components'; import {useCallback, useMemo, useState} from 'react'; import {ASSET_DAEMON_TICKS_QUERY} from './AssetDaemonTicksQuery'; @@ -174,7 +174,7 @@ export const GlobalAutomaterializationContent = () => { - Evaluation timeline + Evaluation timeline {!data ? ( - + Let Dagster know about a materialization that happened outside of Dagster. Typically used for testing or for manually fixing incorrect information in the asset catalog, not for normal operations. - + {asset.isPartitioned ? ( @@ -194,7 +194,7 @@ const ReportEventDialogBody = ({ isInitiallyOpen={true} title={ - Partition selection + Partition selection {partitionCountString(keyCountInSelections(selections))} } @@ -205,7 +205,7 @@ const ReportEventDialogBody = ({ border="bottom" padding={{vertical: 12, horizontal: 20}} > - + {range.dimension.name} diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/CodeLocationsPage.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/CodeLocationsPage.tsx index 8e812b812237f..6a0e3ef7adb5f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/CodeLocationsPage.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/CodeLocationsPage.tsx @@ -1,4 +1,4 @@ -import {Box, Heading, PageHeader, Subtitle, TextInput} from '@dagster-io/ui-components'; +import {Box, Heading, PageHeader, Subheading, TextInput} from '@dagster-io/ui-components'; import * as React from 'react'; import {InstancePageContext} from './InstancePageContext'; @@ -32,7 +32,7 @@ export const CodeLocationsPageContent = () => { const entryCount = flattened.length; const showSearch = entryCount > SEARCH_THRESHOLD; - const SubtitleText = () => { + const subheadingText = () => { if (loading || !entryCount) { return 'Code locations'; } @@ -56,7 +56,7 @@ export const CodeLocationsPageContent = () => { style={{width: '400px'}} /> ) : ( - {SubtitleText()} + {subheadingText()} )} {showSearch ?
{`${entryCount} code locations`}
: null} diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConcurrency.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConcurrency.tsx index 3a245bbf2fa08..809d68733c1f2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConcurrency.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConcurrency.tsx @@ -19,7 +19,7 @@ import { Popover, Spinner, StyledRawCodeMirror, - Subtitle, + Subheading, Table, Tag, TextInput, @@ -165,7 +165,7 @@ export const RunConcurrencyContent = ({ border="bottom" flex={{direction: 'row', alignItems: 'center', justifyContent: 'space-between'}} > - Run concurrency + Run concurrency {refreshState ? : null}
@@ -244,7 +244,7 @@ const RunConcurrencyLimitHeader = ({ padding={{vertical: 16, horizontal: 24}} border="bottom" > - Run concurrency + Run concurrency {refreshState ? : null} {onEdit ? ( @@ -396,7 +396,7 @@ const ConcurrencyLimitHeader = ({onAdd}: {onAdd?: () => void}) => ( border="top-and-bottom" > - Global op/asset concurrency + Global op/asset concurrency Experimental {onAdd ? ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx index c60c6cc16910a..1b3ce33d1c824 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx @@ -9,7 +9,7 @@ import { PageHeader, Spinner, StyledRawCodeMirror, - Subtitle, + Subheading, } from '@dagster-io/ui-components'; import CodeMirror from 'codemirror'; import {memo, useContext, useMemo} from 'react'; @@ -87,9 +87,9 @@ export const InstanceConfigContent = memo(() => { border="bottom" flex={{direction: 'row', alignItems: 'center', justifyContent: 'space-between'}} > - + Dagster version: {data.version} - + {/* Div wrapper on CodeMirror to allow entire page to scroll */} diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceHealthPage.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceHealthPage.tsx index 0b3b6aa8cc96c..a56961d637b81 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceHealthPage.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceHealthPage.tsx @@ -1,5 +1,5 @@ import {gql, useQuery} from '@apollo/client'; -import {Box, Colors, Heading, PageHeader, Subtitle} from '@dagster-io/ui-components'; +import {Box, Colors, Heading, PageHeader, Subheading} from '@dagster-io/ui-components'; import {useContext} from 'react'; import {DaemonList} from './DaemonList'; @@ -47,7 +47,7 @@ export const InstanceHealthPageContent = () => { padding={{vertical: 16, horizontal: 24}} flex={{direction: 'row', alignItems: 'center', justifyContent: 'space-between'}} > - Daemon statuses + Daemon statuses
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickDetailsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickDetailsDialog.tsx index f602f24323482..00386a9d05764 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickDetailsDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickDetailsDialog.tsx @@ -9,7 +9,7 @@ import { DialogHeader, MiddleTruncate, Spinner, - Subtitle, + Subtitle2, Tab, Table, Tabs, @@ -124,7 +124,7 @@ const TickDetailsDialogImpl = ({tickId, instigationSelector}: InnerProps) => { {tick.runIds.length || tick.originRunIds.length ? ( <> - Requested + Requested {tick.runIds.length ? ( @@ -136,7 +136,7 @@ const TickDetailsDialogImpl = ({tickId, instigationSelector}: InnerProps) => { {addedPartitionRequests?.length ? ( <> - Added partitions + Added partitions @@ -144,7 +144,7 @@ const TickDetailsDialogImpl = ({tickId, instigationSelector}: InnerProps) => { {deletedPartitionRequests?.length ? ( <> - Deleted partitions + Deleted partitions @@ -187,7 +187,7 @@ export function TickDetailSummary({tick}: {tick: HistoryTickFragment | AssetDaem <>
- Status + Status {tick.status === InstigationTickStatus.STARTED ? ( @@ -216,7 +216,7 @@ export function TickDetailSummary({tick}: {tick: HistoryTickFragment | AssetDaem - Timestamp + Timestamp
{tick ? ( @@ -226,7 +226,7 @@ export function TickDetailSummary({tick}: {tick: HistoryTickFragment | AssetDaem
- Duration + Duration
{tick?.endTimestamp ? formatElapsedTimeWithoutMsec(tick.endTimestamp * 1000 - tick.timestamp * 1000) diff --git a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx index ed6c2b35f6dff..fe6c4223215a9 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx @@ -13,7 +13,7 @@ import { IconWrapper, NonIdealState, Spinner, - Subtitle, + Subheading, Table, ifPlural, } from '@dagster-io/ui-components'; @@ -323,7 +323,7 @@ export const TickHistoryTimeline = ({ return ( <> - Recent ticks + Recent ticks @@ -365,7 +365,7 @@ export const TickHistoryTimeline = ({ onClose={() => onTickClick(undefined)} /> - Recent ticks + Recent ticks {record}
} placement="top" > - {record.length > 20 ? `${record.slice(0, 20)}…` : record} + + {record.length > 20 ? `${record.slice(0, 20)}…` : record} +
diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/ScheduleAndSensorDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/ScheduleAndSensorDialog.tsx index 87acfc0853ff3..8ab5e365df2e9 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/ScheduleAndSensorDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/ScheduleAndSensorDialog.tsx @@ -1,4 +1,4 @@ -import {Box, Button, Dialog, DialogFooter, Subtitle, Table} from '@dagster-io/ui-components'; +import {Box, Button, Dialog, DialogFooter, Subheading, Table} from '@dagster-io/ui-components'; import {Link} from 'react-router-dom'; import {ScheduleSwitch} from '../schedules/ScheduleSwitch'; @@ -50,7 +50,7 @@ export const ScheduleAndSensorDialog = ({ <> {sensorCount ? ( - Schedules ({scheduleCount}) + Schedules ({scheduleCount}) ) : null} @@ -89,7 +89,7 @@ export const ScheduleAndSensorDialog = ({ <> {scheduleCount ? ( - Sensors ({sensorCount}) + Sensors ({sensorCount}) ) : null}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/AssetJobPartitionsView.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/AssetJobPartitionsView.tsx index 8824737cdb044..b5620951fb0ce 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/AssetJobPartitionsView.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/AssetJobPartitionsView.tsx @@ -1,4 +1,4 @@ -import {Box, Button, Subtitle, useViewport} from '@dagster-io/ui-components'; +import {Box, Button, Subheading, useViewport} from '@dagster-io/ui-components'; import {useEffect, useMemo, useState} from 'react'; import {JobBackfillsTable} from './JobBackfillsTable'; @@ -96,7 +96,7 @@ export const AssetJobPartitionsView = ({ border="bottom" padding={{vertical: 16, horizontal: 24}} > - Status + Status
@@ -284,7 +284,7 @@ const ResourceConfig = (props: { )} - Configuration + Configuration
@@ -377,7 +377,7 @@ const ResourceUses = (props: { {parentResources.length > 0 && ( - Parent resources + Parent resources
@@ -408,7 +408,7 @@ const ResourceUses = (props: { {resourceDetails.assetKeysUsing.length > 0 && ( - Assets + Assets
@@ -433,7 +433,7 @@ const ResourceUses = (props: { {resourceDetails.jobsOpsUsing.length > 0 && ( - Jobs + Jobs
@@ -523,7 +523,7 @@ const ResourceUses = (props: { .map(({name, objects, icon}) => (
- {name} + {name}
@@ -585,7 +585,7 @@ const ResourceEntry = (props: {name: string; url?: string; description?: string} )} - {description} + {description} ); }; 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 index c820990ebc153..3a64709b866d1 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunConfigDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunConfigDialog.tsx @@ -4,7 +4,7 @@ import { Dialog, DialogFooter, StyledRawCodeMirror, - Subtitle, + Subheading, } from '@dagster-io/ui-components'; import styled from 'styled-components'; @@ -47,7 +47,7 @@ export const RunConfigDialog = (props: Props) => { {hasTags ? ( - Tags + Tags
@@ -56,7 +56,7 @@ export const RunConfigDialog = (props: Props) => { {hasTags ? ( - Config + Config ) : null} diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx index c41d106e0c79d..c872313221cc8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx @@ -1,4 +1,4 @@ -import {Box, Colors, FontFamily, MonoSmall, Popover} from '@dagster-io/ui-components'; +import {Box, CaptionMono, Colors, FontFamily, Popover} from '@dagster-io/ui-components'; import {Link} from 'react-router-dom'; import styled from 'styled-components'; @@ -77,7 +77,7 @@ export const RunStatusOverlay = ({name, run}: OverlayProps) => { - {titleForRun(run)} + {titleForRun(run)} diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusTag.tsx index 6c9081a84d88e..cbf4db02e6f23 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusTag.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusTag.tsx @@ -1,4 +1,4 @@ -import {Box, Colors, MonoSmall, Popover, Tag} from '@dagster-io/ui-components'; +import {Box, CaptionMono, Colors, Popover, Tag} from '@dagster-io/ui-components'; import {RunStats} from './RunStats'; import {RunStatusIndicator} from './RunStatusDots'; @@ -105,7 +105,7 @@ export const RunStatusTagWithID = ({runId, status}: {runId: string; status: RunS - {runId.slice(0, 8)} + {runId.slice(0, 8)} ); diff --git a/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulesNextTicks.tsx b/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulesNextTicks.tsx index 4e954636cc481..39edda2f9d1bc 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulesNextTicks.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulesNextTicks.tsx @@ -16,7 +16,7 @@ import { Popover, Spinner, StyledRawCodeMirror, - Subtitle, + Subheading, Table, } from '@dagster-io/ui-components'; import qs from 'qs'; @@ -367,14 +367,14 @@ const NextTickDialog = ({ body = ( - Tags + Tags {selectedRunRequest.tags.length ? ( ) : null}
- Config + Config ): JSX.Element[] parsedString += stringBeforeMatch; const match = result.item.label.slice(longestMatch[0], longestMatch[1] + 1); - labelComponents.push({match}); + labelComponents.push({match}); parsedString += match; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx index b5cd46da59d98..ac1ffd93ccd6b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx @@ -1,5 +1,5 @@ import {useLazyQuery} from '@apollo/client'; -import {Alert, Box, Colors, Spinner, Subtitle} from '@dagster-io/ui-components'; +import {Alert, Box, Colors, Spinner, Subtitle2} from '@dagster-io/ui-components'; import {useCallback, useMemo, useState} from 'react'; import {ASSET_SENSOR_TICKS_QUERY} from './AssetSensorTicksQuery'; @@ -172,7 +172,7 @@ export const SensorPageAutomaterialize = (props: Props) => { - Evaluation timeline + Evaluation timeline {!sensor && loading ? ( {}} isOpen={isOpen} /> - + {title} ({numberFormatter.format(assets.length)}) - + ) : null} diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/DynamicPartitionRequests.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/DynamicPartitionRequests.tsx index 0e7ba964b0348..9a3481d918b60 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ticks/DynamicPartitionRequests.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/DynamicPartitionRequests.tsx @@ -1,4 +1,4 @@ -import {Box, Colors, Icon, Subtitle, Table, Tag} from '@dagster-io/ui-components'; +import {Box, Colors, Icon, Subheading, Table, Tag} from '@dagster-io/ui-components'; import {useMemo} from 'react'; import {DynamicPartitionRequestFragment} from './types/SensorDryRunDialog.types'; @@ -37,7 +37,7 @@ export function DynamicPartitionRequests({ {includeTitle ? ( - Dynamic Partition Requests + Dynamic Partition Requests ) : null}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateScheduleDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateScheduleDialog.tsx index f76f33c7b6204..46ba27c6930e9 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateScheduleDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateScheduleDialog.tsx @@ -13,7 +13,7 @@ import { NonIdealState, Popover, Spinner, - Subtitle, + Subheading, Tag, useViewport, } from '@dagster-io/ui-components'; @@ -299,7 +299,7 @@ const EvaluateScheduleContent = ({ if (!evaluationResult.runRequests?.length) { return (
- Skip Reason + Skip Reason
{evaluationResult?.skipReason || 'No skip reason was output'}
); @@ -324,7 +324,7 @@ const EvaluateScheduleContent = ({
- Result + Result
{error ? ( @@ -338,7 +338,7 @@ const EvaluateScheduleContent = ({
- Tick + Tick {timestampToString({ @@ -397,7 +397,7 @@ const Grid = styled.div` padding-bottom: 12px; border-bottom: 1px solid ${Colors.keylineDefault()}; margin-bottom: 12px; - ${Subtitle} { + ${Subheading} { padding-bottom: 4px; display: block; } 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 index a1af3af285a9f..9769f04bb4896 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ticks/SensorDryRunDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/SensorDryRunDialog.tsx @@ -11,7 +11,7 @@ import { Icon, NonIdealState, Spinner, - Subtitle, + Subheading, Tag, TextInput, } from '@dagster-io/ui-components'; @@ -219,7 +219,7 @@ const SensorDryRun = ({repoAddress, name, currentCursor, onClose, jobName}: Prop
- Result + Result
{error ? ( @@ -233,11 +233,11 @@ const SensorDryRun = ({repoAddress, name, currentCursor, onClose, jobName}: Prop
- Used cursor value + Used cursor value 
{cursor?.length ? cursor : 'None'}
- Computed cursor value + Computed cursor value 
                   {sensorExecutionData?.evaluationResult?.cursor?.length
                     ? sensorExecutionData?.evaluationResult.cursor
@@ -276,7 +276,7 @@ const SensorDryRun = ({repoAddress, name, currentCursor, onClose, jobName}: Prop
             ) : null}
             {didSkip ? (
               

-                Skip reason
+                Skip reason
                 

                   {sensorExecutionData?.evaluationResult?.skipReason || 'No skip reason was output'}
                 

@@ -398,7 +398,7 @@ const Grid = styled.div`
   padding-bottom: 12px;
   border-bottom: 1px solid ${Colors.keylineDefault()};
   margin-bottom: 12px;
-  ${Subtitle} {
+  ${Subheading} {
     padding-bottom: 4px;
     display: block;
   }