From 684a01cf14d2bdcc5b168540b6176ba04d24a855 Mon Sep 17 00:00:00 2001 From: Isaac Hellendag <2823852+hellendag@users.noreply.github.com> Date: Mon, 6 Nov 2023 09:35:37 -0600 Subject: [PATCH] [ui] Eliminate React.FC (#17446) ## Summary & Motivation Remove React.FC from JS packages, some by hand but mostly using https://github.com/gndelia/codemod-replace-react-fc-typescript. In some places, I went in and manually tidied things to prevent huge whitespace shifts, especially around `React.memo`. ## How I Tested These Changes TS, lint, jest. --- .../packages/app-oss/src/NUX/CommunityNux.tsx | 14 +- .../packages/eslint-config/index.js | 13 + .../ui-components/src/components/Alert.tsx | 2 +- .../ui-components/src/components/Checkbox.tsx | 19 +- .../src/components/ConfigEditorDialog.tsx | 4 +- .../src/components/ConfigEditorWithSchema.tsx | 4 +- .../src/components/CursorControls.tsx | 8 +- .../ui-components/src/components/Dialog.tsx | 8 +- .../ui-components/src/components/Menu.tsx | 6 +- .../src/components/MiddleTruncate.tsx | 97 +++--- .../src/components/NonIdealState.tsx | 4 +- .../src/components/ProductTour.tsx | 4 +- .../src/components/ProgressBar.tsx | 9 +- .../ui-components/src/components/Slider.tsx | 24 +- .../ui-components/src/components/Spinner.tsx | 12 +- .../src/components/SubwayDot.tsx | 34 +- .../ui-components/src/components/Tag.tsx | 21 +- .../src/components/TokenizingField.tsx | 4 +- .../components/__stories__/Colors.stories.tsx | 2 +- .../configeditor/ConfigEditorHelp.tsx | 4 +- .../packages/ui-core/src/app/AppProvider.tsx | 2 +- .../packages/ui-core/src/app/AppTopNav.tsx | 6 +- .../src/app/CustomConfirmationProvider.tsx | 4 +- .../ui-core/src/app/PythonErrorInfo.tsx | 4 +- .../ui-core/src/app/UserSettingsDialog.tsx | 4 +- .../ui-core/src/app/WebSocketProvider.tsx | 4 +- .../src/app/__tests__/AppTopNav.test.tsx | 5 +- .../src/app/__tests__/analytics.test.tsx | 5 +- .../ui-core/src/app/time/HourCycleSelect.tsx | 2 +- .../ui-core/src/app/time/Timestamp.tsx | 2 +- .../ui-core/src/app/time/TimezoneSelect.tsx | 2 +- .../src/asset-data/AssetDataRefreshButton.tsx | 2 +- .../ui-core/src/asset-graph/AssetEdges.tsx | 14 +- .../src/asset-graph/AssetGraphExplorer.tsx | 10 +- .../src/asset-graph/AssetGraphJobSidebar.tsx | 6 +- .../src/asset-graph/AssetGroupNode.tsx | 7 +- .../ui-core/src/asset-graph/AssetNode.tsx | 28 +- .../src/asset-graph/AssetRunLinking.tsx | 15 +- .../src/asset-graph/AssetRunLogObserver.tsx | 6 +- .../ui-core/src/asset-graph/ForeignNode.tsx | 4 +- .../src/asset-graph/SidebarAssetInfo.tsx | 14 +- .../__stories__/SidebarAssetInfo.stories.tsx | 7 +- .../src/assets/AllIndividualEventsLink.tsx | 31 +- .../ui-core/src/assets/AssetActionMenu.tsx | 2 +- .../AssetDefinedInMultipleReposNotice.tsx | 8 +- .../ui-core/src/assets/AssetEventDetail.tsx | 7 +- .../ui-core/src/assets/AssetEventList.tsx | 17 +- .../assets/AssetEventMetadataEntriesTable.tsx | 7 +- .../src/assets/AssetEventSystemTags.tsx | 8 +- .../ui-core/src/assets/AssetEvents.tsx | 11 +- .../src/assets/AssetFeatureContext.tsx | 2 +- .../ui-core/src/assets/AssetGroupRoot.tsx | 10 +- .../ui-core/src/assets/AssetGroupSuggest.tsx | 8 +- .../src/assets/AssetLineageElements.tsx | 14 +- .../packages/ui-core/src/assets/AssetLink.tsx | 4 +- .../src/assets/AssetMaterializationGraphs.tsx | 4 +- .../AssetMaterializationUpstreamData.tsx | 24 +- .../ui-core/src/assets/AssetMetadata.tsx | 7 +- .../src/assets/AssetNodeDefinition.tsx | 16 +- .../src/assets/AssetNodeInstigatorTag.tsx | 7 +- .../ui-core/src/assets/AssetNodeLineage.tsx | 19 +- .../src/assets/AssetNodeLineageGraph.tsx | 8 +- .../ui-core/src/assets/AssetNodeList.tsx | 4 +- .../src/assets/AssetNodePartitionCounts.tsx | 26 +- .../ui-core/src/assets/AssetPageHeader.tsx | 2 +- .../src/assets/AssetPartitionDetail.tsx | 26 +- .../ui-core/src/assets/AssetPartitionList.tsx | 4 +- .../assets/AssetPartitionStatusCheckboxes.tsx | 10 +- .../ui-core/src/assets/AssetPartitions.tsx | 4 +- .../ui-core/src/assets/AssetPlots.tsx | 7 +- .../assets/AssetSidebarActivitySummary.tsx | 4 +- .../ui-core/src/assets/AssetTable.tsx | 11 +- .../ui-core/src/assets/AssetValueGraph.tsx | 4 +- .../packages/ui-core/src/assets/AssetView.tsx | 8 +- .../ui-core/src/assets/AssetWipeDialog.tsx | 10 +- .../ui-core/src/assets/AssetsCatalogTable.tsx | 4 +- .../assets/AssetsGroupsGlobalGraphRoot.tsx | 2 +- .../src/assets/AutomaterializePolicyTag.tsx | 8 +- .../ui-core/src/assets/CurrentRunsBanner.tsx | 8 +- .../src/assets/DependsOnSelfBanner.tsx | 2 +- .../FailedRunSinceMaterializationBanner.tsx | 9 +- .../assets/LastMaterializationMetadata.tsx | 8 +- .../LaunchAssetChoosePartitionsDialog.tsx | 28 +- .../src/assets/LaunchAssetExecutionButton.tsx | 9 +- .../assets/LaunchAssetObservationButton.tsx | 8 +- .../ui-core/src/assets/OverdueTag.tsx | 24 +- .../src/assets/PartitionHealthSummary.tsx | 7 +- .../ui-core/src/assets/RunlessEventTag.tsx | 6 +- .../src/assets/RunningBackfillsNotice.tsx | 4 +- .../packages/ui-core/src/assets/Stale.tsx | 26 +- .../src/assets/UnderlyingOpsOrGraph.tsx | 8 +- .../PartitionHealthSummary.stories.tsx | 7 +- .../assets/__tests__/AssetPartitions.test.tsx | 7 +- .../usePartitionKeyInParams.test.tsx | 12 +- .../VirtualizedAssetCheckTable.tsx | 2 +- .../src/assets/useReportEventsModal.tsx | 10 +- .../ui-core/src/dagstertype/DagsterType.tsx | 12 +- .../packages/ui-core/src/gantt/GanttChart.tsx | 4 +- .../src/gantt/GanttChartModeControl.tsx | 46 +-- .../ui-core/src/gantt/GanttStatusPanel.tsx | 16 +- .../ui-core/src/gantt/RunGroupPanel.tsx | 5 +- .../packages/ui-core/src/gantt/ZoomSlider.tsx | 5 +- .../gantt/__stories__/GanttChart.stories.tsx | 8 +- .../src/graph/ExternalConnectionNode.tsx | 4 +- .../ui-core/src/graph/MappingLine.tsx | 4 +- .../packages/ui-core/src/graph/OpEdges.tsx | 9 +- .../packages/ui-core/src/graph/OpGraph.tsx | 2 +- .../packages/ui-core/src/graph/OpIOBox.tsx | 4 +- .../packages/ui-core/src/graph/OpNode.tsx | 2 +- .../packages/ui-core/src/graph/OpTags.tsx | 7 +- .../ui-core/src/graph/ParentOpNode.tsx | 2 +- .../ui-core/src/graph/SVGComponents.tsx | 10 +- .../hooks/__tests__/useDocumentTitle.test.tsx | 2 +- .../__tests__/useQueryPersistedState.test.tsx | 2 +- .../ui-core/src/instance/DaemonList.tsx | 2 +- .../src/instance/DeploymentStatusProvider.tsx | 2 +- .../src/instance/InstanceConcurrency.tsx | 51 ++- .../ui-core/src/instance/LastRunSummary.tsx | 4 +- .../ui-core/src/instance/RepoFilterButton.tsx | 2 +- .../src/instance/backfill/BackfillRow.tsx | 7 +- .../src/instigation/InstigationTick.tsx | 6 +- .../src/instigation/InstigationUtils.tsx | 8 +- .../src/instigation/TickDetailsDialog.tsx | 7 +- .../ui-core/src/instigation/Unloadable.tsx | 18 +- .../launchpad/ConfigEditorConfigPicker.tsx | 321 +++++++++--------- .../src/launchpad/ConfigEditorModePicker.tsx | 2 +- .../ui-core/src/launchpad/LaunchButton.tsx | 4 +- .../launchpad/LaunchRootExecutionButton.tsx | 2 +- .../src/launchpad/LaunchpadHooksContext.tsx | 2 +- .../ui-core/src/launchpad/LaunchpadRoot.tsx | 12 +- .../src/launchpad/LaunchpadSession.tsx | 9 +- .../src/launchpad/LaunchpadSessionError.tsx | 2 +- .../launchpad/LaunchpadSetupFromRunRoot.tsx | 4 +- .../src/launchpad/LaunchpadSetupRoot.tsx | 4 +- .../ui-core/src/launchpad/LoadingOverlay.tsx | 5 +- .../ui-core/src/launchpad/RunPreview.tsx | 9 +- .../ui-core/src/launchpad/TagEditor.tsx | 4 +- .../ui-core/src/metadata/MetadataEntry.tsx | 28 +- .../ui-core/src/metadata/TableSchema.tsx | 16 +- .../packages/ui-core/src/nav/JobMetadata.tsx | 11 +- .../packages/ui-core/src/nav/LatestRunTag.tsx | 5 +- .../src/nav/LeftNavRepositorySection.tsx | 8 +- .../packages/ui-core/src/nav/PipelineNav.tsx | 2 +- .../nav/ReloadRepositoryLocationButton.tsx | 4 +- .../packages/ui-core/src/nav/RepoNavItem.tsx | 7 +- .../packages/ui-core/src/nav/RepoSelector.tsx | 4 +- .../ui-core/src/nav/RepositoryLink.tsx | 8 +- .../ui-core/src/nav/ScheduleOrSensorTag.tsx | 25 +- .../ui-core/src/nav/WorkspaceStatus.tsx | 2 +- .../ReloadRepositoryLocationButton.test.tsx | 2 +- .../src/nav/useCodeLocationsStatus.tsx | 2 +- .../packages/ui-core/src/ops/OpCard.tsx | 2 +- .../ui-core/src/ops/OpDetailsRoot.tsx | 2 +- .../ui-core/src/ops/OpTypeSignature.tsx | 2 +- .../packages/ui-core/src/ops/OpsRoot.tsx | 11 +- .../src/overview/OverviewAssetsRoot.tsx | 4 +- .../src/overview/OverviewJobsTable.tsx | 2 +- .../src/overview/OverviewResourcesTable.tsx | 2 +- .../src/overview/OverviewSchedulesRoot.tsx | 6 +- .../src/overview/OverviewSensorsRoot.tsx | 6 +- .../src/overview/OverviewTimelineRoot.tsx | 4 +- .../src/partitions/AssetJobPartitionsView.tsx | 30 +- .../src/partitions/BackfillMessaging.tsx | 13 +- .../src/partitions/BackfillSelector.tsx | 42 +-- .../src/partitions/DimensionRangeInput.tsx | 9 +- .../src/partitions/DimensionRangeWizard.tsx | 36 +- .../src/partitions/OpJobPartitionsView.tsx | 20 +- .../src/partitions/PartitionRunList.tsx | 2 +- .../PartitionRunStatusCheckboxes.tsx | 10 +- .../src/partitions/PartitionStatus.tsx | 4 +- .../src/partitions/PartitionStepStatus.tsx | 65 ++-- .../src/partitions/PipelinePartitionsRoot.tsx | 2 +- .../ui-core/src/partitions/RunMatrixUtils.tsx | 2 +- .../ui-core/src/pipelines/GraphExplorer.tsx | 2 +- .../ui-core/src/pipelines/GraphNotices.tsx | 9 +- .../pipelines/NonIdealPipelineQueryResult.tsx | 2 +- .../src/pipelines/PipelineExplorerRoot.tsx | 14 +- .../PipelineOrJobDisambiguationRoot.tsx | 2 +- .../src/pipelines/PipelineOverviewRoot.tsx | 2 +- .../src/pipelines/PipelinePathUtils.tsx | 4 +- .../src/pipelines/PipelineReference.tsx | 4 +- .../ui-core/src/pipelines/PipelineRoot.tsx | 2 +- .../src/pipelines/PipelineRunsRoot.tsx | 2 +- .../src/pipelines/SidebarComponents.tsx | 2 +- .../pipelines/SidebarContainerOverview.tsx | 7 +- .../ui-core/src/pipelines/SidebarOp.tsx | 4 +- .../src/pipelines/SidebarOpDefinition.tsx | 9 +- .../pipelines/SidebarOpExecutionGraphs.tsx | 9 +- .../src/pipelines/SidebarOpHelpers.tsx | 2 +- .../src/pipelines/SidebarOpInvocation.tsx | 2 +- .../src/pipelines/SidebarResourcesSection.tsx | 7 +- .../ui-core/src/pipelines/SidebarRoot.tsx | 2 +- .../packages/ui-core/src/plugins/generic.tsx | 2 +- .../packages/ui-core/src/plugins/index.ts | 2 +- .../packages/ui-core/src/plugins/ipynb.tsx | 2 +- .../packages/ui-core/src/plugins/sql.tsx | 2 +- .../ui-core/src/resources/ResourceRoot.tsx | 16 +- .../ui-core/src/resources/ResourceTabs.tsx | 4 +- .../resources/VirtualizedResourceTable.tsx | 2 +- .../ui-core/src/runs/AssetTagCollections.tsx | 14 +- .../ui-core/src/runs/CapturedLogPanel.tsx | 15 +- .../ui-core/src/runs/ComputeLogPanel.tsx | 4 +- .../ui-core/src/runs/LogFilterSelect.tsx | 2 +- .../ui-core/src/runs/LogsFilterInput.tsx | 6 +- .../ui-core/src/runs/LogsProvider.tsx | 4 +- .../packages/ui-core/src/runs/LogsRow.tsx | 14 +- .../ui-core/src/runs/LogsRowComponents.tsx | 6 +- .../src/runs/LogsRowStructuredContent.tsx | 46 ++- .../ui-core/src/runs/LogsScrollingTable.tsx | 2 +- .../packages/ui-core/src/runs/LogsToolbar.tsx | 2 +- .../ui-core/src/runs/QueuedRunsBanners.tsx | 2 +- .../ui-core/src/runs/RawLogContent.tsx | 7 +- .../packages/ui-core/src/runs/Run.tsx | 6 +- .../ui-core/src/runs/RunActionButtons.tsx | 6 +- .../ui-core/src/runs/RunActionsMenu.tsx | 7 +- .../ui-core/src/runs/RunConfigDialog.tsx | 2 +- .../ui-core/src/runs/RunMetadataProvider.tsx | 2 +- .../packages/ui-core/src/runs/RunRoot.tsx | 2 +- .../ui-core/src/runs/RunStatusDots.tsx | 11 +- .../packages/ui-core/src/runs/RunTable.tsx | 22 +- .../packages/ui-core/src/runs/RunTags.tsx | 7 +- .../ui-core/src/runs/RunTimingDetails.tsx | 15 +- .../packages/ui-core/src/runs/RunUtils.tsx | 4 +- .../ui-core/src/runs/StepLogsDialog.tsx | 17 +- .../src/runs/TerminateAllRunsButton.tsx | 8 +- .../runs/__tests__/TerminationDialog.test.tsx | 7 +- .../ui-core/src/schedules/ScheduleDetails.tsx | 4 +- .../src/schedules/SchedulePartitionStatus.tsx | 14 +- .../ui-core/src/schedules/ScheduleRoot.tsx | 10 +- .../ui-core/src/schedules/ScheduleSwitch.tsx | 2 +- .../ui-core/src/schedules/SchedulerInfo.tsx | 2 +- .../src/schedules/SchedulesNextTicks.tsx | 33 +- .../ui-core/src/search/SearchDialog.tsx | 2 +- .../ui-core/src/search/SearchResults.tsx | 2 +- .../ui-core/src/sensors/EditCursorDialog.tsx | 9 +- .../ui-core/src/sensors/SensorDetails.tsx | 9 +- .../ui-core/src/sensors/SensorInfo.tsx | 2 +- .../src/sensors/SensorMonitoredAssets.tsx | 4 +- .../src/sensors/SensorPreviousRuns.tsx | 8 +- .../ui-core/src/sensors/SensorRoot.tsx | 2 +- .../ui-core/src/sensors/SensorSwitch.tsx | 2 +- .../ui-core/src/sensors/SensorTargetList.tsx | 7 +- .../src/testing/ApolloTestProvider.tsx | 2 +- .../ui-core/src/testing/StorybookProvider.tsx | 2 +- .../ui-core/src/ticks/DryRunRequestTable.tsx | 8 +- .../src/ticks/EvaluateScheduleDialog.tsx | 13 +- .../ui-core/src/ticks/SensorDryRunDialog.tsx | 4 +- .../ui-core/src/ticks/TickLogDialog.tsx | 12 +- .../ui-core/src/typeexplorer/TypeExplorer.tsx | 2 +- .../typeexplorer/TypeExplorerContainer.tsx | 4 +- .../ui-core/src/typeexplorer/TypeList.tsx | 2 +- .../src/typeexplorer/TypeListContainer.tsx | 5 +- .../__stories__/useFilters.stories.tsx | 2 +- .../packages/ui-core/src/ui/Loading.tsx | 2 +- .../packages/ui-core/src/ui/Markdown.tsx | 2 +- .../packages/ui-core/src/ui/MenuLink.tsx | 2 +- .../ui-core/src/ui/NotebookButton.tsx | 8 +- .../packages/ui-core/src/ui/TimeFromNow.tsx | 2 +- .../ui-core/src/ui/__mocks__/Markdown.tsx | 2 +- .../ui/__tests__/useFormatDateTime.test.tsx | 2 +- .../src/workspace/CodeLocationMenu.tsx | 26 +- .../src/workspace/CodeLocationRowSet.tsx | 14 +- .../src/workspace/CodeLocationSource.tsx | 2 +- .../ui-core/src/workspace/GraphRoot.tsx | 4 +- .../ui-core/src/workspace/ReloadAllButton.tsx | 2 +- .../src/workspace/RepositoryCountTags.tsx | 7 +- .../src/workspace/RepositoryInformation.tsx | 6 +- .../RepositoryLocationErrorDialog.tsx | 11 +- .../src/workspace/VirtualizedAssetRow.tsx | 11 +- .../src/workspace/VirtualizedAssetTable.tsx | 2 +- .../src/workspace/VirtualizedGraphTable.tsx | 2 +- .../src/workspace/VirtualizedJobTable.tsx | 2 +- .../workspace/VirtualizedRepoAssetTable.tsx | 14 +- .../workspace/VirtualizedWorkspaceTable.tsx | 27 +- 274 files changed, 1632 insertions(+), 1053 deletions(-) diff --git a/js_modules/dagster-ui/packages/app-oss/src/NUX/CommunityNux.tsx b/js_modules/dagster-ui/packages/app-oss/src/NUX/CommunityNux.tsx index 83a80e870e5ab..df68aaf299813 100644 --- a/js_modules/dagster-ui/packages/app-oss/src/NUX/CommunityNux.tsx +++ b/js_modules/dagster-ui/packages/app-oss/src/NUX/CommunityNux.tsx @@ -44,7 +44,7 @@ export const CommunityNux = () => { // Wait 1 second before trying to show Nux const TIMEOUT = 1000; -const CommunityNuxImpl: React.FC<{dismiss: () => void}> = ({dismiss}) => { +const CommunityNuxImpl = ({dismiss}: {dismiss: () => void}) => { const [shouldShowNux, setShouldShowNux] = React.useState(false); React.useEffect(() => { const timeout = setTimeout(() => { @@ -77,10 +77,12 @@ const CommunityNuxImpl: React.FC<{dismiss: () => void}> = ({dismiss}) => { ); }; -const Form: React.FC<{ +interface FormProps { dismiss: () => void; submit: (email: string, newsletter: boolean) => void; -}> = ({dismiss, submit}) => { +} + +const Form = ({dismiss, submit}: FormProps) => { const [email, setEmail] = React.useState(''); const [newsletter, setNewsLetter] = React.useState(false); const validEmail = isEmail(email); @@ -169,11 +171,13 @@ const Form: React.FC<{ ); }; -const RecaptchaIFrame: React.FC<{ +interface RecaptchaIFrameProps { newsletter: boolean; email: string; dismiss: () => void; -}> = ({dismiss, newsletter, email}) => { +} + +const RecaptchaIFrame = ({dismiss, newsletter, email}: RecaptchaIFrameProps) => { const [iframeLoaded, setIframeLoaded] = React.useState(false); const [width, setWidth] = React.useState(680); const [height, setHeight] = React.useState(462); diff --git a/js_modules/dagster-ui/packages/eslint-config/index.js b/js_modules/dagster-ui/packages/eslint-config/index.js index cfe901716d64a..25acaa54c1e8d 100644 --- a/js_modules/dagster-ui/packages/eslint-config/index.js +++ b/js_modules/dagster-ui/packages/eslint-config/index.js @@ -86,6 +86,19 @@ module.exports = { 'react/prefer-stateless-function': 'error', 'react/prop-types': 'off', 'react/display-name': 'off', + '@typescript-eslint/ban-types': [ + 'error', + { + types: { + 'React.FC': + 'Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177', + 'React.FunctionComponent': + 'Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177', + 'React.FunctionalComponent': + 'Preact specific, useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177', + }, + }, + ], '@typescript-eslint/no-unused-vars': [ 'error', { diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Alert.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Alert.tsx index b2aaa2809de0a..dfb1d5c3d8f30 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/Alert.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/Alert.tsx @@ -16,7 +16,7 @@ interface Props { onClose?: () => void; } -export const Alert: React.FC = (props) => { +export const Alert = (props: Props) => { const {intent, title, description, onClose} = props; const {backgroundColor, borderColor, icon, iconColor, textColor} = React.useMemo(() => { diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Checkbox.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Checkbox.tsx index 06392f036efb4..94380bbf7b61b 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/Checkbox.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/Checkbox.tsx @@ -30,7 +30,7 @@ interface IconProps { fillColor: string; } -const StarIcon: React.FC = ({checked, indeterminate, fillColor, disabled}) => ( +const StarIcon = ({checked, indeterminate, fillColor, disabled}: IconProps) => ( = ({checked, indeterminate, fillColor, disab ); -const SwitchIcon: React.FC = ({checked, indeterminate, fillColor, disabled}) => ( +const SwitchIcon = ({checked, indeterminate, fillColor, disabled}: IconProps) => ( @@ -103,7 +103,7 @@ const SwitchIcon: React.FC = ({checked, indeterminate, fillColor, dis ); -const CheckIcon: React.FC = ({checked, indeterminate, fillColor, disabled}) => ( +const CheckIcon = ({checked, indeterminate, fillColor, disabled}: IconProps) => ( { const uid = useRef(id || uniqueId()); - const Component: React.FC = {star: StarIcon, check: CheckIcon, switch: SwitchIcon}[ - format - ]; + const Component = React.useMemo(() => { + switch (format) { + case 'star': + return StarIcon; + case 'check': + return CheckIcon; + case 'switch': + return SwitchIcon; + } + }, [format]); return ( {truncatedText} - {text} - - ); - }, -); +export const MiddleTruncate = ({text, showTitle = true}: Props) => { + // Track the font style and target maximum width. `null` means no measurement has + // taken place yet. + const [truncatedText, setTruncatedText] = React.useState(null); + + // An element that renders the full text into the container, for the purpose of + // measuring the maximum available/necessary width for our truncated string. + const measure = React.useRef(null); + + // Given the target font style and allotted width, calculate the largest possible middle- + // truncated string. + const calculateTargetStyle = React.useCallback(() => { + if (measure.current) { + setTruncatedText(calculateMiddleTruncatedText(measure.current, text)); + } + }, [text]); + + // Use a layout effect to trigger the process of calculating the truncated text, for the + // initial render. + React.useLayoutEffect(() => { + calculateTargetStyle(); + }, [calculateTargetStyle]); + + // If the container has just been resized, recalculate. + useResizeObserver(measure.current, () => { + calculateTargetStyle(); + }); + + // Copy the full text, not just the truncated version shown in the DOM. + const handleCopy = React.useCallback( + (e: React.ClipboardEvent) => { + e.preventDefault(); + const clipboardAPI = navigator.clipboard; + clipboardAPI.writeText(text); + }, + [text], + ); + + return ( + + {truncatedText} + {text} + + ); +}; // An invisible target element that contains the full, no-wrapped text. This is used // to measure the maximum available width for our truncated string. 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 6a1ba59a2bfcb..1ca2f4b343f96 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 @@ -17,13 +17,13 @@ export type NonIdealStateProps = React.DetailedHTMLProps< shrinkable?: boolean; }; -export const NonIdealState: React.FC = ({ +export const NonIdealState = ({ title, description, icon, action, shrinkable, -}) => { +}: NonIdealStateProps) => { const singleContentElement = [title, description, action].filter(Boolean).length === 1; return ( 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 d54c00335551c..f21fe23ac5604 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 @@ -36,7 +36,7 @@ type Props = { width?: CSSProperties['width']; } & ObjectType; -export const ProductTour: React.FC = ({ +export const ProductTour = ({ title, description, actions, @@ -46,7 +46,7 @@ export const ProductTour: React.FC = ({ video, object, width = '260px', -}) => { +}: Props) => { const media = React.useMemo(() => { if (img) { return ; diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ProgressBar.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ProgressBar.tsx index 758cfa84d5036..e96543af5bf9f 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/ProgressBar.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/ProgressBar.tsx @@ -5,10 +5,11 @@ import styled from 'styled-components'; import {Colors} from './Colors'; -export const ProgressBar: React.FC = ({ - fillColor = Colors.Gray600, - ...rest -}) => { +interface Props extends ProgressBarProps { + fillColor?: string; +} + +export const ProgressBar = ({fillColor = Colors.Gray600, ...rest}: Props) => { return ( = ({ - fillColor = Colors.Gray600, - ...rest -}) => { +interface SliderProps extends BlueprintSliderProps { + fillColor?: string; +} + +export const Slider = ({fillColor = Colors.Gray600, ...rest}: SliderProps) => { return ; }; -export const MultiSlider: React.FC< - MultiSliderProps & {fillColor?: string; children: React.ReactNode} -> & { - Handle: typeof BlueprintMultiSlider.Handle; -} = ({fillColor = Colors.Gray600, ...rest}) => { +interface MultiSliderProps extends BlueprintMultiSliderProps { + fillColor?: string; + children: React.ReactNode; +} + +export const MultiSlider = ({fillColor = Colors.Gray600, ...rest}: MultiSliderProps) => { return ; }; diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx index a1c343caa752a..2d355d0e2bb6d 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx @@ -7,13 +7,21 @@ import {Colors} from './Colors'; type SpinnerPurpose = 'page' | 'section' | 'body-text' | 'caption-text'; -export const Spinner: React.FC<{ +interface Props { purpose: SpinnerPurpose; value?: number; fillColor?: string; stopped?: boolean; title?: string; -}> = ({purpose, value, fillColor = Colors.Gray600, stopped, title = 'Loading…'}) => { +} + +export const Spinner = ({ + purpose, + value, + fillColor = Colors.Gray600, + stopped, + title = 'Loading…', +}: Props) => { const size = () => { switch (purpose) { case 'page': diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx index 9772bb23cc042..a67f22576e376 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx @@ -43,27 +43,31 @@ const colorForString = memoize((s: string) => { type IconProps = React.ComponentProps; -export const SubwayDot: React.FC<{ +interface Props { label: string; fontSize?: number; icon?: IconName; iconSize?: IconProps['size']; blobColor?: string; blobSize?: number; -}> = React.memo(({label, fontSize = 13, blobColor, icon, iconSize = 16, blobSize = 24}) => ( - - {icon ? ( - - ) : ( - label.slice(0, 1) - )} - -)); +} + +export const SubwayDot = React.memo( + ({label, fontSize = 13, blobColor, icon, iconSize = 16, blobSize = 24}: Props) => ( + + {icon ? ( + + ) : ( + label.slice(0, 1) + )} + + ), +); interface BlobProps { $color: string; diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Tag.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Tag.tsx index e98bd733b7f7e..9d26d827ccce5 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/Tag.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/Tag.tsx @@ -62,16 +62,19 @@ interface Props extends Omit, 'icon' | tooltipText?: string; } -const IconOrSpinner: React.FC<{icon: IconName | 'spinner' | null; color: string}> = React.memo( - ({icon, color}) => { - if (icon === 'spinner') { - return ; - } - return icon ? : null; - }, -); +interface IconOrSpinnerProps { + icon: IconName | 'spinner' | null; + color: string; +} + +const IconOrSpinner = React.memo(({icon, color}: IconOrSpinnerProps) => { + if (icon === 'spinner') { + return ; + } + return icon ? : null; +}); -export const Tag: React.FC = (props) => { +export const Tag = (props: Props) => { const {children, icon = null, rightIcon = null, intent, ...rest} = props; const fillColor = intentToFillColor(intent); diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TokenizingField.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TokenizingField.tsx index 54cdf2186c555..9924a2924dc1e 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/TokenizingField.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/TokenizingField.tsx @@ -116,7 +116,7 @@ const isEqual = (a: TokenizingFieldValue, b?: TokenizingFieldValue) => * to build the tree of autocompletions. * * The input also allows for freeform typing (`value` items with no token value) */ -export const TokenizingField: React.FC = ({ +export const TokenizingField = ({ suggestionProviders, suggestionProvidersFilter, values: externalValues, @@ -131,7 +131,7 @@ export const TokenizingField: React.FC = ({ className, fullwidth, suggestionRenderer, -}) => { +}: TokenizingFieldProps) => { const [open, setOpen] = React.useState(false); const [active, setActive] = React.useState(null); const [typed, setTyped] = React.useState(''); diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Colors.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Colors.stories.tsx index 6d1a49abdf08d..f4d465502b465 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Colors.stories.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Colors.stories.tsx @@ -8,7 +8,7 @@ import rgbHex from 'rgb-hex'; import {Box} from '../Box'; import {Colors} from '../Colors'; -const ColorExample: React.FC<{name: string; color: string}> = ({color, name}) => ( +const ColorExample = ({color, name}: {name: string; color: string}) => ( {name} diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/configeditor/ConfigEditorHelp.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/configeditor/ConfigEditorHelp.tsx index 59547786a7d78..c3b610043bc0b 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/configeditor/ConfigEditorHelp.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/configeditor/ConfigEditorHelp.tsx @@ -12,8 +12,8 @@ interface ConfigEditorHelpProps { allInnerTypes: TypeData[]; } -export const ConfigEditorHelp: React.FC = React.memo( - ({context, allInnerTypes}) => { +export const ConfigEditorHelp = React.memo( + ({context, allInnerTypes}: ConfigEditorHelpProps) => { if (!context) { return ; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx index e7ebf370c0387..17c4b33681cd8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx @@ -111,7 +111,7 @@ export interface AppProviderProps { }; } -export const AppProvider: React.FC = (props) => { +export const AppProvider = (props: AppProviderProps) => { const {appCache, config} = props; const { apolloLinks, diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav.tsx index 007313008f398..518eeade3d8da 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav.tsx @@ -28,13 +28,13 @@ interface Props { allowGlobalReload?: boolean; } -export const AppTopNav: React.FC = ({ +export const AppTopNav = ({ children, rightOfSearchBar, searchPlaceholder, getNavLinks, allowGlobalReload = false, -}) => { +}: Props) => { const history = useHistory(); const navLinks = () => { @@ -160,7 +160,7 @@ export const AppTopNav: React.FC = ({ ); }; -export const AppTopNavLogo: React.FC = () => { +export const AppTopNavLogo = () => { const {nav} = React.useContext(LayoutContext); const navButton = React.useRef(null); diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/CustomConfirmationProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/CustomConfirmationProvider.tsx index ffd4121ed17d9..6cadb1e61703f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/CustomConfirmationProvider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/CustomConfirmationProvider.tsx @@ -18,7 +18,7 @@ interface ConfirmationDialogProps extends ConfirmationOptions { onClose: () => void; } -const ConfirmationDialog: React.FC = ({ +const ConfirmationDialog = ({ open, icon, title, @@ -27,7 +27,7 @@ const ConfirmationDialog: React.FC = ({ description, onSubmit, onClose, -}) => { +}: ConfirmationDialogProps) => { return ( {description} diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/PythonErrorInfo.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/PythonErrorInfo.tsx index 3a796590c2c53..89d0c69ebd945 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/PythonErrorInfo.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/PythonErrorInfo.tsx @@ -26,7 +26,7 @@ interface IPythonErrorInfoProps { errorSource?: ErrorSource | null; } -export const PythonErrorInfo: React.FC = (props) => { +export const PythonErrorInfo = (props: IPythonErrorInfoProps) => { const {message, stack = [], errorChain = []} = props.error; const Wrapper = props.centered ? ErrorWrapperCentered : ErrorWrapper; @@ -80,7 +80,7 @@ export const PythonErrorInfo: React.FC = (props) => { ); }; -const ErrorContext: React.FC<{errorSource: ErrorSource}> = ({errorSource}) => { +const ErrorContext = ({errorSource}: {errorSource: ErrorSource}) => { switch (errorSource) { case ErrorSource.UNEXPECTED_ERROR: return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog.tsx index ceb9f51b36f9c..3010478b7b0cb 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog.tsx @@ -28,7 +28,7 @@ interface DialogProps { visibleFlags: VisibleFlag[]; } -export const UserSettingsDialog: React.FC = ({isOpen, onClose, visibleFlags}) => { +export const UserSettingsDialog = ({isOpen, onClose, visibleFlags}: DialogProps) => { return ( = ({onClose, visibleFlags}) => { +const UserSettingsDialogContent = ({onClose, visibleFlags}: DialogContentProps) => { const [flags, setFlags] = React.useState(() => getFeatureFlags()); const [reloading, setReloading] = React.useState(false); diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/WebSocketProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/WebSocketProvider.tsx index 49359eae70c33..27962523396d2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/WebSocketProvider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/WebSocketProvider.tsx @@ -43,7 +43,7 @@ interface Props { websocketClient: SubscriptionClient; } -export const WebSocketProvider: React.FC = (props) => { +export const WebSocketProvider = (props: Props) => { const {children, websocketClient} = props; const [status, setStatus] = React.useState(websocketClient.status); const {flagDisableWebsockets: disabled} = useFeatureFlags(); @@ -133,7 +133,7 @@ const Circle = styled.div` border: 1px solid rgba(255, 255, 255, 0.6); `; -export const WebSocketStatus: React.FC = (props) => ( +export const WebSocketStatus = (props: React.ComponentProps) => ( {({status}) => ({ diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/__tests__/AppTopNav.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/__tests__/AppTopNav.test.tsx index dd610b008fd06..d28d78d728f7f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/__tests__/AppTopNav.test.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/__tests__/AppTopNav.test.tsx @@ -56,9 +56,12 @@ describe('AppTopNav', () => { }), }; - const Test: React.FC<{statusPolling?: Set; children: React.ReactNode}> = ({ + const Test = ({ children, statusPolling = new Set(['code-locations', 'daemons']), + }: { + statusPolling?: Set; + children: React.ReactNode; }) => { return {children}; }; diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/__tests__/analytics.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/__tests__/analytics.test.tsx index db4235fa3eea1..d7251bc697b76 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/__tests__/analytics.test.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/__tests__/analytics.test.tsx @@ -11,9 +11,12 @@ describe('Analytics', () => { track: jest.fn(), }); - const Test: React.FC<{mockAnalytics: GenericAnalytics; children: React.ReactNode}> = ({ + const Test = ({ children, mockAnalytics, + }: { + mockAnalytics: GenericAnalytics; + children: React.ReactNode; }) => { return {children}; }; diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/time/HourCycleSelect.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/time/HourCycleSelect.tsx index 293144e408d14..34a2418ea5df5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/time/HourCycleSelect.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/time/HourCycleSelect.tsx @@ -14,7 +14,7 @@ import {TimeContext} from './TimeContext'; * We detect the automatic behavior for the user's locale and show that as an option * as well. The user can override this with one of the choices above. */ -export const HourCycleSelect: React.FC = () => { +export const HourCycleSelect = () => { const { hourCycle: [hourCycle, setHourCycle], } = React.useContext(TimeContext); diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/time/Timestamp.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/time/Timestamp.tsx index 414cffe6e82c1..8c32324380759 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/time/Timestamp.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/time/Timestamp.tsx @@ -9,7 +9,7 @@ interface Props { timeFormat?: TimeFormat; } -export const Timestamp: React.FC = (props) => { +export const Timestamp = (props: Props) => { const {timestamp, timeFormat} = props; const { timezone: [timezone], diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/time/TimezoneSelect.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/time/TimezoneSelect.tsx index 4b45aab0cac03..3455f4e32b32a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/time/TimezoneSelect.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/time/TimezoneSelect.tsx @@ -56,7 +56,7 @@ interface Props { * - Locale timezones: other timezones for the user's locale, if possible. * - Everything else */ -export const TimezoneSelect: React.FC = ({trigger}) => { +export const TimezoneSelect = ({trigger}: Props) => { const { timezone: [timezone, setTimezone], } = React.useContext(TimeContext); diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx index 7e5b24fe96d43..a589ef7b6d009 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx @@ -59,7 +59,7 @@ export const AssetDataRefreshButton = ({ ); }; -const TimeFromNowWithSeconds: React.FC<{timestamp: number}> = ({timestamp}) => { +const TimeFromNowWithSeconds = ({timestamp}: {timestamp: number}) => { const [text, setText] = React.useState(dayjs(timestamp).fromNow(true)); React.useEffect(() => { const interval = setInterval(() => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetEdges.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetEdges.tsx index 039217e49670d..c8bcd5fa1c507 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetEdges.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetEdges.tsx @@ -4,21 +4,23 @@ import React from 'react'; import {buildSVGPath} from './Utils'; import {AssetLayoutEdge} from './layout'; -export const AssetEdges: React.FC<{ +interface AssetEdgesProps { edges: AssetLayoutEdge[]; selected: string[] | null; highlighted: string | null; strokeWidth?: number; baseColor?: string; viewportRect: {top: number; left: number; right: number; bottom: number}; -}> = ({ +} + +export const AssetEdges = ({ edges, selected, highlighted, strokeWidth = 4, baseColor = Colors.KeylineGray, viewportRect, -}) => { +}: AssetEdgesProps) => { // Note: we render the highlighted edges twice, but it's so that the first item with // all the edges in it can remain memoized. @@ -52,12 +54,14 @@ export const AssetEdges: React.FC<{ ); }; -const AssetEdgeSet: React.FC<{ +interface AssetEdgeSetProps { edges: AssetLayoutEdge[]; color: string; strokeWidth: number; viewportRect: {top: number; left: number; right: number; bottom: number}; -}> = React.memo(({edges, color, strokeWidth}) => ( +} + +const AssetEdgeSet = React.memo(({edges, color, strokeWidth}: AssetEdgeSetProps) => ( <> = (props) => { +export const AssetGraphExplorer = (props: Props) => { const { fetchResult, assetGraphData, @@ -119,15 +119,15 @@ export const AssetGraphExplorer: React.FC = (props) => { ); }; -type WithDataProps = { +interface WithDataProps extends Props { allAssetKeys: AssetKey[]; assetGraphData: GraphData; fullAssetGraphData: GraphData; graphQueryItems: AssetGraphQueryItem[]; applyingEmptyDefault: boolean; -} & Props; +} -const AssetGraphExplorerWithData: React.FC = ({ +const AssetGraphExplorerWithData = ({ options, setOptions, explorerPath, @@ -140,7 +140,7 @@ const AssetGraphExplorerWithData: React.FC = ({ fetchOptions, fetchOptionFilters, allAssetKeys, -}) => { +}: WithDataProps) => { const findAssetLocation = useFindAssetLocation(); const {layout, loading, async} = useAssetLayout(assetGraphData); const viewportEl = React.useRef(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphJobSidebar.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphJobSidebar.tsx index 8401a44bc4b70..d347e45483cce 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphJobSidebar.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphJobSidebar.tsx @@ -16,9 +16,11 @@ import { AssetGraphSidebarQueryVariables, } from './types/AssetGraphJobSidebar.types'; -export const AssetGraphJobSidebar: React.FC<{ +interface Props { pipelineSelector: PipelineSelector; -}> = ({pipelineSelector}) => { +} + +export const AssetGraphJobSidebar = ({pipelineSelector}: Props) => { const queryResult = useQuery( ASSET_GRAPH_JOB_SIDEBAR, { diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGroupNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGroupNode.tsx index e1bc7feabd7bb..752fe90c89279 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGroupNode.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGroupNode.tsx @@ -10,7 +10,12 @@ import {workspacePath} from '../workspace/workspacePath'; import {MINIMAL_SCALE, GROUPS_ONLY_SCALE} from './AssetGraphExplorer'; import {GroupLayout} from './layout'; -export const AssetGroupNode: React.FC<{group: GroupLayout; scale: number}> = ({group, scale}) => { +interface Props { + group: GroupLayout; + scale: number; +} + +export const AssetGroupNode = ({group, scale}: Props) => { const {repositoryLocationName, repositoryDisambiguationRequired, repositoryName, groupName} = group; diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx index 8e4cc18bd7cb0..b5a5c35bfa737 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx @@ -21,10 +21,12 @@ import {LiveDataForNode} from './Utils'; import {ASSET_NODE_NAME_MAX_LENGTH} from './layout'; import {AssetNodeFragment} from './types/AssetNode.types'; -export const AssetNode: React.FC<{ +interface Props { definition: AssetNodeFragment; selected: boolean; -}> = React.memo(({definition, selected}) => { +} + +export const AssetNode = React.memo(({definition, selected}: Props) => { const displayName = definition.assetKey.path[definition.assetKey.path.length - 1]!; const isSource = definition.isSource; @@ -76,10 +78,12 @@ export const AssetNode: React.FC<{ ); }, isEqual); -const AssetTopTags: React.FC<{ +interface AssetTopTagsProps { definition: AssetNodeFragment; liveData?: LiveDataForNode; -}> = ({definition, liveData}) => ( +} + +const AssetTopTags = ({definition, liveData}: AssetTopTagsProps) => ( @@ -104,7 +108,7 @@ interface StatusRowProps { liveData: LiveDataForNode | undefined; } -const AssetNodeStatusRow: React.FC = ({definition, liveData}) => { +const AssetNodeStatusRow = ({definition, liveData}: StatusRowProps) => { const {content, background} = buildAssetNodeStatusContent({ assetKey: definition.assetKey, definition, @@ -157,10 +161,13 @@ const AssetCheckIconsOrdered: {type: AssetCheckIconType; content: React.ReactNod }, ]; -const AssetNodeChecksRow: React.FC<{ +const AssetNodeChecksRow = ({ + definition, + liveData, +}: { definition: AssetNodeFragment; liveData: LiveDataForNode | undefined; -}> = ({definition, liveData}) => { +}) => { if (!liveData || !liveData.assetChecks.length) { return ; } @@ -205,10 +212,13 @@ const AssetNodeChecksRow: React.FC<{ ); }; -export const AssetNodeMinimal: React.FC<{ +export const AssetNodeMinimal = ({ + selected, + definition, +}: { selected: boolean; definition: AssetNodeFragment; -}> = ({selected, definition}) => { +}) => { const {isSource, assetKey} = definition; const {liveData} = useAssetLiveData(assetKey); const {border, background} = buildAssetNodeStatusContent({assetKey, definition, liveData}); diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetRunLinking.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetRunLinking.tsx index c6973d8afe8ad..d4e95791373bf 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetRunLinking.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetRunLinking.tsx @@ -9,10 +9,15 @@ import {titleForRun, linkToRunEvent} from '../runs/RunUtils'; import {LiveDataForNode} from './Utils'; -export const AssetLatestRunSpinner: React.FC<{ +interface AssetLatestRunSpinnerProps { liveData?: LiveDataForNode; purpose?: 'caption-text' | 'body-text' | 'section'; -}> = ({liveData, purpose = 'body-text'}) => { +} + +export const AssetLatestRunSpinner = ({ + liveData, + purpose = 'body-text', +}: AssetLatestRunSpinnerProps) => { if (liveData?.inProgressRunIds?.length) { return ( @@ -30,12 +35,14 @@ export const AssetLatestRunSpinner: React.FC<{ return null; }; -export const AssetRunLink: React.FC<{ +interface AssetRunLinkProps { runId: string; assetKey: AssetKeyInput; children?: React.ReactNode; event?: Parameters[1]; -}> = ({assetKey, runId, children, event}) => { +} + +export const AssetRunLink = ({assetKey, runId, children, event}: AssetRunLinkProps) => { const content = children || ( {titleForRun({id: runId})} diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetRunLogObserver.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetRunLogObserver.tsx index a36d9edd85447..f9e5c79ec4708 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetRunLogObserver.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetRunLogObserver.tsx @@ -68,10 +68,12 @@ export const AssetRunLogObserver = () => { ); }; -const SingleRunLogObserver: React.FC<{ +interface SingleRunLogObserverProps { runId: string; callback: (runId: string, events: ObservedEvent[]) => void; -}> = React.memo(({runId, callback}) => { +} + +const SingleRunLogObserver = React.memo(({runId, callback}: SingleRunLogObserverProps) => { const counter = React.useRef(0); // Useful for testing this component: diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/ForeignNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/ForeignNode.tsx index ec809dd09ae30..7fe0fed92e484 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/ForeignNode.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/ForeignNode.tsx @@ -6,9 +6,7 @@ import {withMiddleTruncation} from '../app/Util'; import {ASSET_LINK_NAME_MAX_LENGTH} from './layout'; -export const AssetNodeLink: React.FC<{ - assetKey: {path: string[]}; -}> = React.memo(({assetKey}) => { +export const AssetNodeLink = React.memo(({assetKey}: {assetKey: {path: string[]}}) => { const label = assetKey.path[assetKey.path.length - 1]!; return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/SidebarAssetInfo.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/SidebarAssetInfo.tsx index 43cd2e3b824ef..4a53aa146d0a4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/SidebarAssetInfo.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/SidebarAssetInfo.tsx @@ -42,9 +42,7 @@ import {displayNameForAssetKey, GraphNode, nodeDependsOnSelf, stepKeyForAsset} f import {SidebarAssetQuery, SidebarAssetQueryVariables} from './types/SidebarAssetInfo.types'; import {AssetNodeForGraphQueryFragment} from './types/useAssetGraphData.types'; -export const SidebarAssetInfo: React.FC<{ - graphNode: GraphNode; -}> = ({graphNode}) => { +export const SidebarAssetInfo = ({graphNode}: {graphNode: GraphNode}) => { const {assetKey, definition} = graphNode; const {liveData} = useAssetLiveData(assetKey); const partitionHealthRefreshHint = healthRefreshHintFromLiveData(liveData); @@ -177,9 +175,7 @@ export const SidebarAssetInfo: React.FC<{ ); }; -const TypeSidebarSection: React.FC<{ - assetType: DagsterTypeFragment; -}> = ({assetType}) => { +const TypeSidebarSection = ({assetType}: {assetType: DagsterTypeFragment}) => { return ( @@ -187,11 +183,13 @@ const TypeSidebarSection: React.FC<{ ); }; -const Header: React.FC<{ +interface HeaderProps { assetNode: AssetNodeForGraphQueryFragment; opName?: string; repoAddress?: RepoAddress | null; -}> = ({assetNode, repoAddress}) => { +} + +const Header = ({assetNode, repoAddress}: HeaderProps) => { const displayName = displayNameForAssetKey(assetNode.assetKey); return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/__stories__/SidebarAssetInfo.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/__stories__/SidebarAssetInfo.stories.tsx index cf3f7fdac4025..d7dada166cc51 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/__stories__/SidebarAssetInfo.stories.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/__stories__/SidebarAssetInfo.stories.tsx @@ -233,10 +233,13 @@ const buildEventsMock = ({reported}: {reported: boolean}): MockedResponse>[]; children: React.ReactNode; -}> = ({children, mocks}) => ( +}) => ( void; -}> = ({hasPartitions, hasLineage, groups, focused, setFocused}) => { +} + +const AssetEventsTable = ({ + hasPartitions, + hasLineage, + groups, + focused, + setFocused, +}: AssetEventsTableProps) => { return ( @@ -82,10 +90,12 @@ const AssetEventsTable: React.FC<{ const NoneSpan = () => None; -const MetadataEntriesRow: React.FC<{ +interface MetadataEntriesRowProps { group: AssetEventGroup; hasLineage: boolean; -}> = React.memo(({group, hasLineage}) => { +} + +const MetadataEntriesRow = React.memo(({group, hasLineage}: MetadataEntriesRowProps) => { const {latest, timestamp} = group; if (!latest) { return ; @@ -165,12 +175,15 @@ const MetadataEntriesRow: React.FC<{ ); }); -const EventGroupRow: React.FC<{ +interface EventGroupRowProps { group: AssetEventGroup; hasPartitions: boolean; hasLineage: boolean; isFocused: boolean; -}> = React.memo(({group, hasPartitions, hasLineage, isFocused}) => { +} + +const EventGroupRow = React.memo((props: EventGroupRowProps) => { + const {group, hasPartitions, hasLineage, isFocused} = props; const {latest, partition, timestamp, all} = group; const focusCss = isFocused @@ -283,12 +296,12 @@ interface PredecessorDialogProps { children: React.ReactNode; } -export const AllIndividualEventsLink: React.FC = ({ +export const AllIndividualEventsLink = ({ hasLineage, hasPartitions, events, children, -}) => { +}: PredecessorDialogProps) => { const [open, setOpen] = React.useState(false); const [focused, setFocused] = React.useState(); const groups = React.useMemo( @@ -343,7 +356,7 @@ export const AllIndividualEventsLink: React.FC = ({ ); }; -const DisclosureTriangle: React.FC<{open: boolean; onClick?: () => void}> = ({open, onClick}) => ( +const DisclosureTriangle = ({open, onClick}: {open: boolean; onClick?: () => void}) => ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetActionMenu.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetActionMenu.tsx index 323d16f4fbd08..b0ca520c0a028 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetActionMenu.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetActionMenu.tsx @@ -21,7 +21,7 @@ interface Props { onWipe?: (assets: AssetKeyInput[]) => void; } -export const AssetActionMenu: React.FC = (props) => { +export const AssetActionMenu = (props: Props) => { const {repoAddress, path, definition, onWipe} = props; const { permissions: {canWipeAssets}, diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetDefinedInMultipleReposNotice.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetDefinedInMultipleReposNotice.tsx index 756170c0304d2..114f9360013c5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetDefinedInMultipleReposNotice.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetDefinedInMultipleReposNotice.tsx @@ -16,11 +16,15 @@ import { export const MULTIPLE_DEFINITIONS_WARNING = 'Multiple asset definitions found'; -export const AssetDefinedInMultipleReposNotice: React.FC<{ +export const AssetDefinedInMultipleReposNotice = ({ + assetKey, + loadedFromRepo, + padded, +}: { assetKey: AssetKey; loadedFromRepo: RepoAddress; padded?: boolean; -}> = ({assetKey, loadedFromRepo, padded}) => { +}) => { const {data} = useQuery( ASSET_DEFINITION_COLLISION_QUERY, { diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx index 686def4a8c2f9..8c4e544679965 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx @@ -23,10 +23,13 @@ import { AssetObservationFragment, } from './types/useRecentAssetEvents.types'; -export const AssetEventDetail: React.FC<{ +export const AssetEventDetail = ({ + event, + assetKey, +}: { assetKey: AssetKeyInput; event: AssetMaterializationFragment | AssetObservationFragment; -}> = ({event, assetKey}) => { +}) => { const run = event.runOrError?.__typename === 'Run' ? event.runOrError : null; const repositoryOrigin = run?.repositoryOrigin; const repoAddress = repositoryOrigin diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx index 6507dfea6799d..5c396c16cc511 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx @@ -16,13 +16,19 @@ import {isRunlessEvent} from './isRunlessEvent'; // This component is on the feature-flagged AssetOverview page and replaces AssetEventTable -export const AssetEventList: React.FC<{ +export const AssetEventList = ({ + groups, + focused, + setFocused, + xAxis, + assetKey, +}: { xAxis: 'time' | 'partition'; groups: AssetEventGroup[]; assetKey: AssetKeyInput; focused?: AssetEventGroup; setFocused?: (item: AssetEventGroup | undefined) => void; -}> = ({groups, focused, setFocused, xAxis, assetKey}) => { +}) => { const parentRef = React.useRef(null); const focusedRowRef = React.useRef(null); @@ -113,7 +119,7 @@ export const AssetListRow = styled(Row)<{$focused: boolean}>` `} `; -const AssetEventListPartitionRow: React.FC<{group: AssetEventGroup}> = ({group}) => { +const AssetEventListPartitionRow = ({group}: {group: AssetEventGroup}) => { const {partition, latest, timestamp} = group; return ( <> @@ -137,9 +143,12 @@ const AssetEventListPartitionRow: React.FC<{group: AssetEventGroup}> = ({group}) ); }; -const AssetEventListEventRow: React.FC<{group: AssetEventGroup; assetKey: AssetKeyInput}> = ({ +const AssetEventListEventRow = ({ group, assetKey, +}: { + group: AssetEventGroup; + assetKey: AssetKeyInput; }) => { const {latest, partition, timestamp} = group; const run = latest?.runOrError.__typename === 'Run' ? latest.runOrError : null; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventMetadataEntriesTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventMetadataEntriesTable.tsx index 4766bb5dac15b..6ab053ecdf15e 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventMetadataEntriesTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventMetadataEntriesTable.tsx @@ -17,10 +17,13 @@ import { * This component shows the metadata entries attached to an Asset Materialization or Observation event. * AssetNodes also have definition-time metadata, which is unrelated to this event metadata. */ -export const AssetEventMetadataEntriesTable: React.FC<{ +export const AssetEventMetadataEntriesTable = ({ + event, + observations, +}: { event: AssetObservationFragment | AssetMaterializationFragment | null; observations?: (AssetObservationFragment | AssetMaterializationFragment)[]; -}> = ({event, observations}) => { +}) => { if (!event || (!event.metadataEntries.length && !observations?.length)) { return ; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventSystemTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventSystemTags.tsx index 8a7ba40204919..a17ac78794367 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventSystemTags.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventSystemTags.tsx @@ -15,11 +15,15 @@ const ORDER = [ DagsterTag.AssetEventCodeVersion.valueOf(), ]; -export const AssetEventSystemTags: React.FC<{ +export const AssetEventSystemTags = ({ + event, + paddingLeft, + collapsible, +}: { event: AssetEventGroup['latest'] | null; paddingLeft?: number; collapsible?: boolean; -}> = ({event, paddingLeft, collapsible}) => { +}) => { const [shown, setShown] = useStateWithStorage('show-asset-system-tags', Boolean); if (collapsible && !shown) { 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 6b6402fc3d478..54a945beb4411 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 @@ -44,14 +44,14 @@ interface Props { opName?: string | null; } -export const AssetEvents: React.FC = ({ +export const AssetEvents = ({ assetKey, assetNode, params, setParams, liveData, dataRefreshHint, -}) => { +}: Props) => { const {xAxis, materializations, observations, loadedPartitionKeys, refetch, loading} = useRecentAssetEvents(assetKey, params, {assetHasDefinedPartitions: false}); @@ -228,10 +228,13 @@ type EventType = 'observation' | 'materialization'; const ALL_EVENT_TYPES: EventType[] = ['observation', 'materialization']; -export const EventTypeSelect: React.FC<{ +export const EventTypeSelect = ({ + value, + onChange, +}: { value: EventType[]; onChange: (value: EventType[]) => void; -}> = ({value, onChange}) => { +}) => { const [showMenu, setShowMenu] = React.useState(false); const onToggle = (type: EventType) => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetFeatureContext.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetFeatureContext.tsx index ed94ac1ebf0db..fda68e80cbf45 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetFeatureContext.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetFeatureContext.tsx @@ -14,7 +14,7 @@ export type AssetViewFeatureInput = { type AssetFeatureContextType = { tabBuilder: (input: AssetTabConfigInput) => AssetTabConfig[]; renderFeatureView: (input: AssetViewFeatureInput) => React.ReactNode; - AssetChecksBanner: React.FunctionComponent>; + AssetChecksBanner: React.ComponentType>; }; export const AssetFeatureContext = React.createContext({ diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupRoot.tsx index 3256824fe761e..f0b8009facaf1 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupRoot.tsx @@ -34,9 +34,12 @@ interface AssetGroupRootParams { 0: string; } -export const AssetGroupRoot: React.FC<{repoAddress: RepoAddress; tab: 'lineage' | 'list'}> = ({ +export const AssetGroupRoot = ({ repoAddress, tab, +}: { + repoAddress: RepoAddress; + tab: 'lineage' | 'list'; }) => { useTrackPageView(); @@ -131,9 +134,12 @@ const ASSET_GROUP_METADATA_QUERY = gql` } `; -const AssetGroupTags: React.FC<{groupSelector: AssetGroupSelector; repoAddress: RepoAddress}> = ({ +const AssetGroupTags = ({ repoAddress, groupSelector, +}: { + groupSelector: AssetGroupSelector; + repoAddress: RepoAddress; }) => { const {data} = useQuery( ASSET_GROUP_METADATA_QUERY, diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupSuggest.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupSuggest.tsx index 76fb82d61e951..319a4e8442245 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupSuggest.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupSuggest.tsx @@ -35,11 +35,15 @@ const FAKE_SELECTED_ITEM: AssetGroupSelector = { repositoryName: '-', }; -export const AssetGroupSuggest: React.FC<{ +export const AssetGroupSuggest = ({ + assetGroups, + value, + onChange, +}: { assetGroups: AssetGroupSelector[]; value: AssetGroupSelector[]; onChange: (g: AssetGroupSelector[]) => void; -}> = ({assetGroups, value, onChange}) => { +}) => { const repoKey = (g: AssetGroupSelector) => `${g.repositoryName}@${g.repositoryLocationName}`; const repoKey1 = assetGroups[0] ? repoKey(assetGroups[0]) : ''; const repoContextNeeded = !assetGroups.every((g) => repoKey1 === repoKey(g)); diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetLineageElements.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetLineageElements.tsx index 176ec0a310a29..91b6a46782f98 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetLineageElements.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetLineageElements.tsx @@ -8,10 +8,13 @@ import {Timestamp} from '../app/time/Timestamp'; import {assetDetailsPathForKey} from './assetDetailsPathForKey'; import {AssetLineageFragment} from './types/AssetLineageElements.types'; -const AssetLineageInfoElement: React.FC<{ +const AssetLineageInfoElement = ({ + lineage_info, + timestamp, +}: { lineage_info: AssetLineageFragment; timestamp: string; -}> = ({lineage_info, timestamp}) => { +}) => { const partition_list_label = lineage_info.partitions.length === 1 ? 'Partition' : 'Partitions'; const partition_list_str = lineage_info.partitions .map((partition) => `"${partition}"`) @@ -59,10 +62,13 @@ const AssetLineageInfoElement: React.FC<{ const MAX_COLLAPSED = 5; -export const AssetLineageElements: React.FC<{ +export const AssetLineageElements = ({ + elements, + timestamp, +}: { elements: AssetLineageFragment[]; timestamp: string; -}> = ({elements, timestamp}) => { +}) => { const [collapsed, setCollapsed] = React.useState(true); return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetLink.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetLink.tsx index fe3db1973d7de..388c3f346a226 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetLink.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetLink.tsx @@ -4,13 +4,13 @@ import {Link} from 'react-router-dom'; import {assetDetailsPathForKey} from './assetDetailsPathForKey'; -export const AssetLink: React.FC<{ +export const AssetLink = (props: { path: string[]; icon?: 'asset' | 'asset_non_sda' | 'folder'; textStyle?: 'break-word' | 'middle-truncate'; url?: string; isGroup?: boolean; -}> = (props) => { +}) => { const {path, icon, url, isGroup, textStyle = 'break-word'} = props; const linkUrl = url ? url : assetDetailsPathForKey({path}); const assetPath = diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMaterializationGraphs.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMaterializationGraphs.tsx index e7d925f5429b7..b259831ac73dc 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMaterializationGraphs.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMaterializationGraphs.tsx @@ -13,12 +13,12 @@ import * as React from 'react'; import {AssetValueGraph, AssetValueGraphData} from './AssetValueGraph'; import {AssetEventGroup} from './groupByPartition'; -export const AssetMaterializationGraphs: React.FC<{ +export const AssetMaterializationGraphs = (props: { groups: AssetEventGroup[]; xAxis: 'partition' | 'time'; asSidebarSection?: boolean; columnCount?: number; -}> = (props) => { +}) => { const [xHover, setXHover] = React.useState(null); const reversed = React.useMemo(() => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMaterializationUpstreamData.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMaterializationUpstreamData.tsx index d7059a26b0fbd..d9fd87e92e34a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMaterializationUpstreamData.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMaterializationUpstreamData.tsx @@ -20,12 +20,17 @@ import { dayjs.extend(relativeTime); -export const AssetMaterializationUpstreamTable: React.FC<{ +export const AssetMaterializationUpstreamTable = ({ + data, + assetKey, + maximumLagMinutes, + relativeTo, +}: { data: AssetMaterializationUpstreamTableFragment | undefined; assetKey: AssetKeyInput; relativeTo: number | 'now'; maximumLagMinutes?: number; // pass to get red "late" highlighting -}> = ({data, assetKey, maximumLagMinutes, relativeTo}) => { +}) => { const displayName = displayNameForAssetKey(assetKey); if (!data) { @@ -135,10 +140,13 @@ export const ASSET_MATERIALIZATION_UPSTREAM_TABLE_FRAGMENT = gql` } `; -export const AssetMaterializationUpstreamData: React.FC<{ +export const AssetMaterializationUpstreamData = ({ + assetKey, + timestamp = '', +}: { assetKey: AssetKeyInput; timestamp?: string; -}> = ({assetKey, timestamp = ''}) => { +}) => { const result = useQuery< AssetMaterializationUpstreamQuery, AssetMaterializationUpstreamQueryVariables @@ -161,11 +169,15 @@ export const AssetMaterializationUpstreamData: React.FC<{ ); }; -export const TimeSinceWithOverdueColor: React.FC<{ +export const TimeSinceWithOverdueColor = ({ + timestamp, + maximumLagMinutes, + relativeTo = Date.now(), +}: { timestamp: number; maximumLagMinutes?: number; relativeTo?: number | 'now'; -}> = ({timestamp, maximumLagMinutes, relativeTo = Date.now()}) => { +}) => { const lagMinutes = ((relativeTo === 'now' ? Date.now() : relativeTo) - timestamp) / (60 * 1000); const isOverdue = maximumLagMinutes && lagMinutes > maximumLagMinutes; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMetadata.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMetadata.tsx index 681c459aa8885..a960ef827aea4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMetadata.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetMetadata.tsx @@ -17,10 +17,13 @@ export const metadataForAssetNode = ( return {assetType, assetMetadata}; }; -export const AssetMetadataTable: React.FC<{ +export const AssetMetadataTable = ({ + assetMetadata, + repoLocation, +}: { assetMetadata: MetadataEntryFragment[]; repoLocation: string; -}> = ({assetMetadata, repoLocation}) => { +}) => { const rows = assetMetadata.map((entry) => { return { key: entry.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 ac3ffd5d3dec3..574d8fee662f7 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 @@ -42,12 +42,17 @@ import {UnderlyingOpsOrGraph} from './UnderlyingOpsOrGraph'; import {Version} from './Version'; import {AssetNodeDefinitionFragment} from './types/AssetNodeDefinition.types'; -export const AssetNodeDefinition: React.FC<{ +export const AssetNodeDefinition = ({ + assetNode, + upstream, + downstream, + dependsOnSelf, +}: { assetNode: AssetNodeDefinitionFragment; upstream: AssetNodeForGraphQueryFragment[] | null; downstream: AssetNodeForGraphQueryFragment[] | null; dependsOnSelf: boolean; -}> = ({assetNode, upstream, downstream, dependsOnSelf}) => { +}) => { const {assetMetadata, assetType} = metadataForAssetNode(assetNode); const configType = assetNode.configField?.configType; @@ -293,10 +298,13 @@ export const AssetNodeDefinition: React.FC<{ ); }; -const DescriptionAnnotations: React.FC<{ +const DescriptionAnnotations = ({ + assetNode, + repoAddress, +}: { assetNode: AssetNodeDefinitionFragment; repoAddress: RepoAddress; -}> = ({assetNode, repoAddress}) => ( +}) => ( {assetNode.jobNames .filter((jobName) => !isHiddenAssetGroupJob(jobName)) diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeInstigatorTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeInstigatorTag.tsx index 093532d8db651..9888d301eeaae 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeInstigatorTag.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeInstigatorTag.tsx @@ -9,10 +9,13 @@ import {RepoAddress} from '../workspace/types'; import {AssetNodeInstigatorsFragment} from './types/AssetNodeInstigatorTag.types'; -export const AssetNodeInstigatorTag: React.FC<{ +export const AssetNodeInstigatorTag = ({ + assetNode, + repoAddress, +}: { assetNode: AssetNodeInstigatorsFragment; repoAddress: RepoAddress; -}> = ({assetNode, repoAddress}) => { +}) => { const schedules = flatMap(assetNode.jobs, (j) => j.schedules); const sensors = flatMap(assetNode.jobs, (j) => j.sensors); diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineage.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineage.tsx index 06297f9162030..a349dcce531a2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineage.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineage.tsx @@ -18,14 +18,21 @@ import {AssetNodeLineageGraph} from './AssetNodeLineageGraph'; import {LaunchAssetExecutionButton} from './LaunchAssetExecutionButton'; import {AssetLineageScope, AssetViewParams} from './types'; -export const AssetNodeLineage: React.FC<{ +export const AssetNodeLineage = ({ + params, + setParams, + assetKey, + assetGraphData, + graphQueryItems, + requestedDepth, +}: { params: AssetViewParams; setParams: (params: AssetViewParams) => void; assetKey: AssetKeyInput; assetGraphData: GraphData; requestedDepth: number; graphQueryItems: AssetGraphQueryItem[]; -}> = ({params, setParams, assetKey, assetGraphData, graphQueryItems, requestedDepth}) => { +}) => { const maxDistances = React.useMemo( () => calculateGraphDistances(graphQueryItems, assetKey), [graphQueryItems, assetKey], @@ -99,11 +106,15 @@ const DepthHidesAssetsNotice = styled.div` z-index: 2; `; -const LineageDepthControl: React.FC<{ +const LineageDepthControl = ({ + value, + max, + onChange, +}: { value: number; max: number; onChange: (v: number) => void; -}> = ({value, max, onChange}) => { +}) => { const [text, setText] = React.useState(`${value}`); React.useEffect(() => { setText(`${value}`); diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineageGraph.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineageGraph.tsx index 2081e9d315e42..416d4146b93ac 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineageGraph.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineageGraph.tsx @@ -20,11 +20,15 @@ import {AssetKey, AssetViewParams} from './types'; const LINEAGE_GRAPH_ZOOM_LEVEL = 'lineageGraphZoomLevel'; -export const AssetNodeLineageGraph: React.FC<{ +export const AssetNodeLineageGraph = ({ + assetKey, + assetGraphData, + params, +}: { assetKey: AssetKeyInput; assetGraphData: GraphData; params: AssetViewParams; -}> = ({assetKey, assetGraphData, params}) => { +}) => { const assetGraphId = toGraphId(assetKey); const [highlighted, setHighlighted] = React.useState(null); diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeList.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeList.tsx index d7219246a6bb2..a13a9bd06f4e8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeList.tsx @@ -8,9 +8,7 @@ import {AssetNodeForGraphQueryFragment} from '../asset-graph/types/useAssetGraph import {assetDetailsPathForKey} from './assetDetailsPathForKey'; -export const AssetNodeList: React.FC<{ - items: AssetNodeForGraphQueryFragment[] | null; -}> = ({items}) => { +export const AssetNodeList = ({items}: {items: AssetNodeForGraphQueryFragment[] | null}) => { const history = useHistory(); if (items === null) { diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodePartitionCounts.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodePartitionCounts.tsx index 15e90600756f9..ff83f765520f5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodePartitionCounts.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodePartitionCounts.tsx @@ -59,10 +59,10 @@ export const StyleForAssetPartitionStatus: Record< }, }; -export const PartitionCountTags: React.FC<{ +export const PartitionCountTags = (props: { definition: AssetNodeFragment; liveData: LiveDataForNode | undefined; -}> = (props) => { +}) => { const data = props.liveData?.partitionStats; return ( @@ -85,11 +85,15 @@ export const PartitionCountTags: React.FC<{ ); }; -const PartitionCountTag: React.FC<{ +const PartitionCountTag = ({ + status, + value, + total, +}: { status: AssetPartitionStatus; value: number | undefined; total: number | undefined; -}> = ({status, value, total}) => { +}) => { const style = StyleForAssetPartitionStatus[status]; const foreground = value ? style.foreground : Colors.Gray500; const background = value ? style.background : Colors.Gray50; @@ -109,9 +113,11 @@ const PartitionCountTag: React.FC<{ ); }; -export const PartitionCountLabels: React.FC<{ +export const PartitionCountLabels = ({ + partitionStats, +}: { partitionStats: LiveDataForNode['partitionStats'] | null | undefined; -}> = ({partitionStats}) => { +}) => { return ( = ({status, value, total}) => { +}) => { const style = StyleForAssetPartitionStatus[status]; return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.tsx index 4fd2d5871eb14..3757265e21a6d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.tsx @@ -18,7 +18,7 @@ import {useCopyToClipboard} from '../app/browser'; type Props = {assetKey: {path: string[]}} & Partial>; -export const AssetPageHeader: React.FC = ({assetKey, ...extra}) => { +export const AssetPageHeader = ({assetKey, ...extra}: Props) => { const copy = useCopyToClipboard(); const copyableString = assetKey.path.join('/'); const [didCopy, setDidCopy] = React.useState(false); 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 842b9cd5c47ec..088d7e5a18586 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 @@ -41,9 +41,7 @@ import { } from './types/AssetPartitionDetail.types'; import {ASSET_MATERIALIZATION_FRAGMENT, ASSET_OBSERVATION_FRAGMENT} from './useRecentAssetEvents'; -export const AssetPartitionDetailLoader: React.FC<{assetKey: AssetKey; partitionKey: string}> = ( - props, -) => { +export const AssetPartitionDetailLoader = (props: {assetKey: AssetKey; partitionKey: string}) => { const result = useQuery( ASSET_PARTITION_DETAIL_QUERY, {variables: {assetKey: props.assetKey, partitionKey: props.partitionKey}}, @@ -173,17 +171,7 @@ export const ASSET_PARTITION_STALE_QUERY = gql` } `; -export const AssetPartitionDetail: React.FC<{ - assetKey: AssetKey; - group: AssetEventGroup; - latestRunForPartition: AssetPartitionLatestRunFragment | null; - hasLineage: boolean; - hasLoadingState?: boolean; - hasStaleLoadingState?: boolean; - stepKey?: string; - staleCauses?: LiveDataForNode['staleCauses']; - staleStatus?: LiveDataForNode['staleStatus']; -}> = ({ +export const AssetPartitionDetail = ({ assetKey, stepKey, group, @@ -193,6 +181,16 @@ export const AssetPartitionDetail: React.FC<{ latestRunForPartition, staleCauses, staleStatus, +}: { + assetKey: AssetKey; + group: AssetEventGroup; + latestRunForPartition: AssetPartitionLatestRunFragment | null; + hasLineage: boolean; + hasLoadingState?: boolean; + hasStaleLoadingState?: boolean; + stepKey?: string; + staleCauses?: LiveDataForNode['staleCauses']; + staleStatus?: LiveDataForNode['staleStatus']; }) => { const {latest, partition, all} = group; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionList.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionList.tsx index 9a83ff4f0bb61..11efbfc5e65b0 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionList.tsx @@ -13,12 +13,12 @@ export interface AssetPartitionListProps { focusedDimensionKey?: string; setFocusedDimensionKey?: (dimensionKey: string | undefined) => void; } -export const AssetPartitionList: React.FC = ({ +export const AssetPartitionList = ({ focusedDimensionKey, setFocusedDimensionKey, statusForPartition, partitions, -}) => { +}: AssetPartitionListProps) => { const parentRef = React.useRef(null); const rowVirtualizer = useVirtualizer({ diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionStatusCheckboxes.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionStatusCheckboxes.tsx index 5db85cca6f85e..44de9d131958a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionStatusCheckboxes.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionStatusCheckboxes.tsx @@ -5,13 +5,19 @@ import {testId} from '../testing/testId'; import {AssetPartitionStatus, assetPartitionStatusToText} from './AssetPartitionStatus'; -export const AssetPartitionStatusCheckboxes: React.FC<{ +export const AssetPartitionStatusCheckboxes = ({ + counts, + value, + onChange, + allowed, + disabled, +}: { counts: {[status: string]: number}; value: AssetPartitionStatus[]; allowed: AssetPartitionStatus[]; onChange: (selected: AssetPartitionStatus[]) => void; disabled?: boolean; -}> = ({counts, value, onChange, allowed, disabled}) => { +}) => { return ( {allowed.map((status) => ( 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 39a5799563d64..9ad96ae18f691 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 @@ -66,13 +66,13 @@ enum SortType { REVERSE_ALPHABETICAL, } -export const AssetPartitions: React.FC = ({ +export const AssetPartitions = ({ assetKey, assetPartitionDimensions, params, setParams, dataRefreshHint, -}) => { +}: Props) => { const assetHealth = usePartitionHealthData([assetKey], dataRefreshHint)[0]!; const [selections, setSelections] = usePartitionDimensionSelections({ knownDimensionNames: assetPartitionDimensions, diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPlots.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPlots.tsx index a3111e82aa66c..a2054160a32b2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPlots.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPlots.tsx @@ -13,12 +13,7 @@ interface Props { setParams: (params: AssetViewParams) => void; } -export const AssetPlots: React.FC = ({ - assetKey, - assetHasDefinedPartitions, - params, - setParams, -}) => { +export const AssetPlots = ({assetKey, assetHasDefinedPartitions, params, setParams}: Props) => { const {materializations, observations, loadedPartitionKeys, loading, xAxis} = useRecentAssetEvents(assetKey, params, {assetHasDefinedPartitions}); diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetSidebarActivitySummary.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetSidebarActivitySummary.tsx index 13b1a0c26acf9..bbb191eca9d9d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetSidebarActivitySummary.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetSidebarActivitySummary.tsx @@ -34,13 +34,13 @@ interface Props { assetLastMaterializedAt: string | undefined; } -export const AssetSidebarActivitySummary: React.FC = ({ +export const AssetSidebarActivitySummary = ({ asset, assetLastMaterializedAt, isSourceAsset, liveData, stepKey, -}) => { +}: Props) => { const {materializations, observations, loadedPartitionKeys, loading, refetch, xAxis} = useRecentAssetEvents( asset.assetKey, diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx index 3b1cc3a907dc9..7656095757aa6 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx @@ -40,7 +40,7 @@ interface Props { searchGroups: AssetGroupSelector[]; } -export const AssetTable: React.FC = ({ +export const AssetTable = ({ assets, actionBarComponents, refreshState, @@ -50,7 +50,7 @@ export const AssetTable: React.FC = ({ searchPath, searchGroups, view, -}) => { +}: Props) => { const [toWipe, setToWipe] = React.useState(); const groupedByDisplayKey = groupBy(assets, (a) => JSON.stringify(displayPathForAsset(a))); @@ -195,11 +195,14 @@ export const AssetTable: React.FC = ({ ); }; -const MoreActionsDropdown: React.FC<{ +interface MoreActionsDropdownProps { selected: Asset[]; clearSelection: () => void; requery?: RefetchQueriesFunction; -}> = React.memo(({selected, clearSelection, requery}) => { +} + +const MoreActionsDropdown = React.memo((props: MoreActionsDropdownProps) => { + const {selected, clearSelection, requery} = props; const [showBulkWipeDialog, setShowBulkWipeDialog] = React.useState(false); const { permissions: {canWipeAssets}, diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetValueGraph.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetValueGraph.tsx index fdbb4ee2bf5d8..7e357a9461e76 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetValueGraph.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetValueGraph.tsx @@ -17,14 +17,14 @@ export interface AssetValueGraphData { }[]; } -export const AssetValueGraph: React.FC<{ +export const AssetValueGraph = (props: { label: string; width: string; yAxisLabel?: string; data: AssetValueGraphData; xHover: string | number | null; onHoverX: (value: string | number | null) => void; -}> = (props) => { +}) => { // Note: To get partitions on the X axis, we pass the partition names in as the `labels`, // and pass the partition index as the x value. This prevents ChartJS from auto-coercing // ISO date partition names to dates and then re-formatting the labels away from 2020-01-01. diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx index 1d186d4cfec79..d41bf70297b31 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx @@ -452,11 +452,15 @@ const HistoricalViewAlert = ({asOf, hasDefinition}: {asOf: string; hasDefinition ); }; -const AssetViewPageHeaderTags: React.FC<{ +const AssetViewPageHeaderTags = ({ + definition, + liveData, + onShowUpstream, +}: { definition: AssetViewDefinitionNodeFragment | null; liveData?: LiveDataForNode; onShowUpstream: () => void; -}> = ({definition, liveData, onShowUpstream}) => { +}) => { const repoAddress = definition ? buildRepoAddress(definition.repository.name, definition.repository.location.name) : null; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetWipeDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetWipeDialog.tsx index 00ff1a8a062d4..e213b24d77184 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetWipeDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetWipeDialog.tsx @@ -12,13 +12,19 @@ interface AssetKey { path: string[]; } -export const AssetWipeDialog: React.FC<{ +export const AssetWipeDialog = ({ + assetKeys, + isOpen, + onClose, + onComplete, + requery, +}: { assetKeys: AssetKey[]; isOpen: boolean; onClose: () => void; onComplete: (assetKeys: AssetKey[]) => void; requery?: RefetchQueriesFunction; -}> = ({assetKeys, isOpen, onClose, onComplete, requery}) => { +}) => { const [requestWipe] = useMutation( ASSET_WIPE_MUTATION, { diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx index f9ec0d5f866df..5381bcd396048 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx @@ -78,11 +78,11 @@ interface AssetCatalogTableProps { groupSelector?: AssetGroupSelector; } -export const AssetsCatalogTable: React.FC = ({ +export const AssetsCatalogTable = ({ prefixPath, setPrefixPath, groupSelector, -}) => { +}: AssetCatalogTableProps) => { const [view, setView] = useAssetView(); const [search, setSearch] = useQueryPersistedState({queryKey: 'q'}); const [searchGroups, setSearchGroups] = useQueryPersistedState({ diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGroupsGlobalGraphRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGroupsGlobalGraphRoot.tsx index 255b007e752f4..b3c71aad1690f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGroupsGlobalGraphRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGroupsGlobalGraphRoot.tsx @@ -25,7 +25,7 @@ interface AssetGroupRootParams { 0: string; } -export const AssetsGroupsGlobalGraphRoot: React.FC = () => { +export const AssetsGroupsGlobalGraphRoot = () => { const {0: path} = useParams(); const {visibleRepos} = React.useContext(WorkspaceContext); const history = useHistory(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutomaterializePolicyTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutomaterializePolicyTag.tsx index 30c99101583ee..eb42e3eeaf38d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutomaterializePolicyTag.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutomaterializePolicyTag.tsx @@ -4,13 +4,13 @@ import React from 'react'; import {AutoMaterializePolicyType, AutoMaterializeRule} from '../graphql/types'; -export const AutomaterializePolicyTag: React.FC<{ +export const AutomaterializePolicyTag = ({ + policy, +}: { policy: { policyType: AutoMaterializePolicyType; }; -}> = ({policy}) => ( - {policy.policyType === AutoMaterializePolicyType.LAZY ? 'Lazy' : 'Eager'} -); +}) => {policy.policyType === AutoMaterializePolicyType.LAZY ? 'Lazy' : 'Eager'}; export const automaterializePolicyDescription = (policy: { policyType: AutoMaterializePolicyType; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/CurrentRunsBanner.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/CurrentRunsBanner.tsx index 0b9ce716dbb50..9117a59722475 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/CurrentRunsBanner.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/CurrentRunsBanner.tsx @@ -7,11 +7,15 @@ import {LiveDataForNode} from '../asset-graph/Utils'; import {titleForRun} from '../runs/RunUtils'; import {useStepLogs} from '../runs/StepLogsDialog'; -export const CurrentRunsBanner: React.FC<{ +export const CurrentRunsBanner = ({ + stepKey, + liveData, + border, +}: { liveData?: LiveDataForNode; border: BorderSide | BorderSetting; stepKey: string; -}> = ({stepKey, liveData, border}) => { +}) => { const {inProgressRunIds = [], unstartedRunIds = []} = liveData || {}; const firstRunId = inProgressRunIds[0] || unstartedRunIds[0]; const stepLogs = useStepLogs({runId: firstRunId, stepKeys: [stepKey]}); diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/DependsOnSelfBanner.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/DependsOnSelfBanner.tsx index 985109f6368a3..6127fb0480222 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/DependsOnSelfBanner.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/DependsOnSelfBanner.tsx @@ -1,7 +1,7 @@ import {Alert, Box, Colors, Icon} from '@dagster-io/ui-components'; import React from 'react'; -export const DependsOnSelfBanner: React.FC = () => { +export const DependsOnSelfBanner = () => { return ( = ({run, stepKey, border, padding = {vertical: 16, left: 24, right: 12}}) => { +}) => { const stepLogs = useStepLogs({runId: run?.id, stepKeys: stepKey ? [stepKey] : []}); return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/LastMaterializationMetadata.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/LastMaterializationMetadata.tsx index 1ca2235292a5d..df20e73797a1e 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/LastMaterializationMetadata.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/LastMaterializationMetadata.tsx @@ -22,11 +22,15 @@ import { AssetMaterializationFragment, } from './types/useRecentAssetEvents.types'; -export const LatestMaterializationMetadata: React.FC<{ +export const LatestMaterializationMetadata = ({ + assetKey, + latest, + liveData, +}: { assetKey: AssetKeyInput; latest: AssetObservationFragment | AssetMaterializationFragment | undefined; liveData: LiveDataForNode | undefined; -}> = ({assetKey, latest, liveData}) => { +}) => { const latestRun = latest?.runOrError.__typename === 'Run' ? latest?.runOrError : null; const repositoryOrigin = latestRun?.repositoryOrigin; const repoAddress = repositoryOrigin diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetChoosePartitionsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetChoosePartitionsDialog.tsx index ef35156d0b3a1..17adc27146ff6 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetChoosePartitionsDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetChoosePartitionsDialog.tsx @@ -103,7 +103,7 @@ interface Props { refetch?: () => Promise; } -export const LaunchAssetChoosePartitionsDialog: React.FC = (props) => { +export const LaunchAssetChoosePartitionsDialog = (props: Props) => { const displayName = props.assets.length > 1 ? `${props.assets.length} assets` @@ -132,14 +132,14 @@ export const LaunchAssetChoosePartitionsDialog: React.FC = (props) => { // Additionally, we want the dialog to reset when it's closed and re-opened so // that partition health, etc. is up-to-date. // -const LaunchAssetChoosePartitionsDialogBody: React.FC = ({ +const LaunchAssetChoosePartitionsDialogBody = ({ setOpen, assets, repoAddress, target, upstreamAssetKeys, refetch: _refetch, -}) => { +}: Props) => { const partitionedAssets = assets.filter((a) => !!a.partitionDefinition); const { @@ -663,12 +663,16 @@ const LaunchAssetChoosePartitionsDialogBody: React.FC = ({ ); }; -const UpstreamUnavailableWarning: React.FC<{ +const UpstreamUnavailableWarning = ({ + upstreamAssetKeys, + selections, + setSelections, +}: { upstreamAssetKeys: AssetKey[]; selections: PartitionDimensionSelection[]; setSelections: (next: PartitionDimensionSelection[]) => void; displayedPartitionDefinition?: PartitionDefinitionForLaunchAssetFragment; -}> = ({upstreamAssetKeys, selections, setSelections}) => { +}) => { // We want to warn if an immediately upstream asset 1) has the same partitioning and // 2) is missing materializations for keys in `allSelected`. We only offer this feature // for single-dimensional partitioned assets because it's difficult to express the @@ -758,18 +762,18 @@ export const LAUNCH_ASSET_WARNINGS_QUERY = gql` ${USING_DEFAULT_LAUNCHER_ALERT_INSTANCE_FRAGMENT} `; -const Warnings: React.FC<{ - launchAsBackfill: boolean; - upstreamAssetKeys: AssetKey[]; - selections: PartitionDimensionSelection[]; - setSelections: (next: PartitionDimensionSelection[]) => void; - displayedPartitionDefinition?: PartitionDefinitionForLaunchAssetFragment | null; -}> = ({ +const Warnings = ({ launchAsBackfill, upstreamAssetKeys, selections, setSelections, displayedPartitionDefinition, +}: { + launchAsBackfill: boolean; + upstreamAssetKeys: AssetKey[]; + selections: PartitionDimensionSelection[]; + setSelections: (next: PartitionDimensionSelection[]) => void; + displayedPartitionDefinition?: PartitionDefinitionForLaunchAssetFragment | null; }) => { const warningsResult = useQuery( LAUNCH_ASSET_WARNINGS_QUERY, diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetExecutionButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetExecutionButton.tsx index cc71483648663..90e6a6a96f6c2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetExecutionButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetExecutionButton.tsx @@ -155,7 +155,12 @@ export function executionDisabledMessageForAssets( : null; } -export const LaunchAssetExecutionButton: React.FC<{ +export const LaunchAssetExecutionButton = ({ + scope, + preferredJobName, + additionalDropdownOptions, + intent = 'primary', +}: { scope: AssetsInScope; intent?: 'primary' | 'none'; preferredJobName?: string; @@ -164,7 +169,7 @@ export const LaunchAssetExecutionButton: React.FC<{ icon?: JSX.Element; onClick: () => void; }[]; -}> = ({scope, preferredJobName, additionalDropdownOptions, intent = 'primary'}) => { +}) => { const {onClick, loading, launchpadElement} = useMaterializationAction(preferredJobName); const [isOpen, setIsOpen] = React.useState(false); diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetObservationButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetObservationButton.tsx index 9973733c50a53..8e036241fe161 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetObservationButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetObservationButton.tsx @@ -31,11 +31,15 @@ type ObserveAssetsState = executionParams: LaunchPipelineExecutionMutationVariables['executionParams']; }; -export const LaunchAssetObservationButton: React.FC<{ +export const LaunchAssetObservationButton = ({ + scope, + preferredJobName, + intent = 'none', +}: { scope: AssetsInScope; intent?: 'primary' | 'none'; preferredJobName?: string; -}> = ({scope, preferredJobName, intent = 'none'}) => { +}) => { const {useLaunchWithTelemetry} = useLaunchPadHooks(); const launchWithTelemetry = useLaunchWithTelemetry(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/OverdueTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/OverdueTag.tsx index 67e0206e22676..680ce04facc01 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/OverdueTag.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/OverdueTag.tsx @@ -39,10 +39,13 @@ export function isAssetOverdue(liveData?: LiveDataForNode): liveData is LiveData export const humanizedMinutesLateString = (minLate: number) => dayjs.duration(minLate, 'minutes').humanize(false); -export const OverdueTag: React.FC<{ +export const OverdueTag = ({ + policy, + assetKey, +}: { policy: Pick; assetKey: AssetKeyInput; -}> = ({policy, assetKey}) => { +}) => { const {liveData} = useAssetLiveData(assetKey); if (!liveData?.freshnessInfo) { @@ -89,9 +92,13 @@ type OverdueLineagePopoverProps = { liveData: LiveDataForNode; }; -export const OverdueLineagePopover: React.FC< - OverdueLineagePopoverProps & {children: React.ReactNode} -> = ({children, assetKey, liveData}) => { +export const OverdueLineagePopover = ({ + children, + assetKey, + liveData, +}: OverdueLineagePopoverProps & { + children: React.ReactNode; +}) => { return ( = ({assetKey, timestamp}) => { +}) => { const result = useQuery( OVERDUE_POPOVER_QUERY, {variables: {assetKey: {path: assetKey.path}, timestamp}}, diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/PartitionHealthSummary.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/PartitionHealthSummary.tsx index 0cf47d4cdd968..c7439ec37e87f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/PartitionHealthSummary.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/PartitionHealthSummary.tsx @@ -9,12 +9,15 @@ import {isTimeseriesDimension} from './MultipartitioningSupport'; import {AssetKey} from './types'; import {PartitionHealthData, PartitionDimensionSelection} from './usePartitionHealthData'; -export const PartitionHealthSummary: React.FC<{ +interface Props { assetKey: AssetKey; showAssetKey?: boolean; data: PartitionHealthData[]; selections?: PartitionDimensionSelection[]; -}> = React.memo(({showAssetKey, assetKey, data, selections}) => { +} + +export const PartitionHealthSummary = React.memo((props: Props) => { + const {showAssetKey, assetKey, data, selections} = props; const assetData = data.find((d) => JSON.stringify(d.assetKey) === JSON.stringify(assetKey)); if (!assetData) { diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/RunlessEventTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/RunlessEventTag.tsx index 3f865b4d0e871..aba0fe5545b33 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/RunlessEventTag.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/RunlessEventTag.tsx @@ -3,9 +3,11 @@ import React from 'react'; import {DagsterTag} from '../runs/RunTag'; -export const RunlessEventTag: React.FC<{ +export const RunlessEventTag = ({ + tags, +}: { tags: Array<{__typename: 'EventTag'; key: string; value: string}>; -}> = ({tags}) => { +}) => { const user = tags.find((t) => t.key === DagsterTag.ReportingUser); // Note: This does not use UserDisplay because in cloud, the UserDisplay component is hardcoded to a diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/RunningBackfillsNotice.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/RunningBackfillsNotice.tsx index aa4a11512b8ef..faadaf820979f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/RunningBackfillsNotice.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/RunningBackfillsNotice.tsx @@ -8,9 +8,7 @@ import { RunningBackfillsNoticeQueryVariables, } from './types/RunningBackfillsNotice.types'; -export const RunningBackfillsNotice: React.FC<{partitionSetName: string}> = ({ - partitionSetName, -}) => { +export const RunningBackfillsNotice = ({partitionSetName}: {partitionSetName: string}) => { const {data} = useQuery( RUNNING_BACKFILLS_NOTICE_QUERY, ); 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 875404e380215..99fee46a35d16 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 @@ -41,11 +41,15 @@ const LABELS = { }, }; -export const StaleReasonsLabel: React.FC<{ +export const StaleReasonsLabel = ({ + liveData, + include, + assetKey, +}: { assetKey: AssetKeyInput; include: 'all' | 'upstream' | 'self'; liveData?: StaleDataForNode; -}> = ({liveData, include, assetKey}) => { +}) => { if (!isAssetStale(liveData) || !liveData?.staleCauses.length) { return null; } @@ -64,12 +68,17 @@ export const StaleReasonsLabel: React.FC<{ ); }; -export const StaleReasonsTags: React.FC<{ +export const StaleReasonsTags = ({ + liveData, + include, + assetKey, + onClick, +}: { assetKey: AssetKeyInput; include: 'all' | 'upstream' | 'self'; liveData?: StaleDataForNode; onClick?: () => void; -}> = ({liveData, include, assetKey, onClick}) => { +}) => { if (!isAssetStale(liveData) || !liveData?.staleCauses.length) { return null; } @@ -120,9 +129,7 @@ function groupedCauses( return groupBy(all, (cause) => cause.label); } -const StaleCausesPopoverSummary: React.FC<{causes: LiveDataForNode['staleCauses']}> = ({ - causes, -}) => ( +const StaleCausesPopoverSummary = ({causes}: {causes: LiveDataForNode['staleCauses']}) => ( Changes since last materialization: @@ -140,9 +147,12 @@ const StaleCausesPopoverSummary: React.FC<{causes: LiveDataForNode['staleCauses' ); -const StaleReason: React.FC<{reason: string; dependency: AssetNodeKeyFragment | null}> = ({ +const StaleReason = ({ reason, dependency, +}: { + reason: string; + dependency: AssetNodeKeyFragment | null; }) => { if (!dependency) { return ; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/UnderlyingOpsOrGraph.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/UnderlyingOpsOrGraph.tsx index 0fad946556cd8..914690889fbca 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/UnderlyingOpsOrGraph.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/UnderlyingOpsOrGraph.tsx @@ -9,11 +9,15 @@ import {workspacePathFromAddress} from '../workspace/workspacePath'; import {UnderlyingOpsAssetNodeFragment} from './types/UnderlyingOpsOrGraph.types'; -export const UnderlyingOpsOrGraph: React.FC<{ +export const UnderlyingOpsOrGraph = ({ + assetNode, + repoAddress, + minimal, +}: { assetNode: UnderlyingOpsAssetNodeFragment; repoAddress: RepoAddress; minimal?: boolean; -}> = ({assetNode, repoAddress, minimal}) => { +}) => { const {assetKey, graphName, opNames, jobNames} = assetNode; const opCount = opNames.length; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/__stories__/PartitionHealthSummary.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/__stories__/PartitionHealthSummary.stories.tsx index 8daea809a6375..1957ea3b58748 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/__stories__/PartitionHealthSummary.stories.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/__stories__/PartitionHealthSummary.stories.tsx @@ -19,10 +19,13 @@ export default { component: PartitionHealthSummary, }; -const PartitionHealthSummaryWithData: React.FC<{ +const PartitionHealthSummaryWithData = ({ + assetKey, + ranges, +}: { assetKey: AssetKey; ranges?: [string, string][]; -}> = ({assetKey, ranges}) => { +}) => { const data = usePartitionHealthData([assetKey]); // Convert the convenient test shorthand into a PartitionDimensionSelection diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetPartitions.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetPartitions.test.tsx index 818601c50e0f5..71801b1dad1c8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetPartitions.test.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetPartitions.test.tsx @@ -35,10 +35,13 @@ jest.mock('../AssetPartitionList', () => ({ ), })); -const SingleDimensionAssetPartitions: React.FC<{ +const SingleDimensionAssetPartitions = ({ + assetKey, + mocks, +}: { assetKey: AssetKeyInput; mocks?: MockedResponse[]; -}> = ({assetKey, mocks}) => { +}) => { const [params, setParams] = React.useState({}); return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/usePartitionKeyInParams.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/usePartitionKeyInParams.test.tsx index 1dc2d1a352194..2722cb58e3fce 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/usePartitionKeyInParams.test.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/usePartitionKeyInParams.test.tsx @@ -5,7 +5,7 @@ import {usePartitionKeyInParams} from '../usePartitionKeyInParams'; describe('usePartitionKeyInParams', () => { it('should parse and set a one-dimensional partition key', async () => { - const HookUse: React.FC = () => { + const HookUse = () => { const setParams = jest.fn(); const [focusedDimensionKeys, setFocusedDimensionKey] = usePartitionKeyInParams({ params: {partition: 'VA'}, @@ -25,7 +25,7 @@ describe('usePartitionKeyInParams', () => { }); it('should default to no value for a one-dimensional partition key', async () => { - const HookUse: React.FC = () => { + const HookUse = () => { const [focusedDimensionKeys] = usePartitionKeyInParams({ params: {}, setParams: jest.fn(), @@ -41,7 +41,7 @@ describe('usePartitionKeyInParams', () => { }); it('should parse and set a two-dimensional partition key', async () => { - const HookUse: React.FC = () => { + const HookUse = () => { const setParams = jest.fn(); const [focusedDimensionKeys, setFocusedDimensionKey] = usePartitionKeyInParams({ params: {partition: '2022-05-01|VA'}, @@ -69,7 +69,7 @@ describe('usePartitionKeyInParams', () => { }); it('should allow a partial selection of just the first partition key', async () => { - const HookUse: React.FC = () => { + const HookUse = () => { const setParams = jest.fn(); const [, setFocusedDimensionKey] = usePartitionKeyInParams({ params: {partition: ''}, @@ -88,7 +88,7 @@ describe('usePartitionKeyInParams', () => { }); it('should default to no values for a two-dimensional partition key', async () => { - const HookUse: React.FC = () => { + const HookUse = () => { const [focusedDimensionKeys] = usePartitionKeyInParams({ params: {}, setParams: jest.fn(), @@ -105,7 +105,7 @@ describe('usePartitionKeyInParams', () => { }); it('should default to the 1st key of dimension 1 if dimension 2 is selected first', async () => { - const HookUse: React.FC = () => { + const HookUse = () => { const setParams = jest.fn(); const [focusedDimensionKeys, setFocusedDimensionKey] = usePartitionKeyInParams({ params: {}, 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 05d703629c7b6..86996b57f97b8 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 @@ -22,7 +22,7 @@ type Props = { rows: AssetCheckTableFragment[]; }; -export const VirtualizedAssetCheckTable: React.FC = ({assetNode, rows}: Props) => { +export const VirtualizedAssetCheckTable = ({assetNode, rows}: Props) => { const parentRef = React.useRef(null); const count = rows.length; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/useReportEventsModal.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/useReportEventsModal.tsx index 919ff9d24cc03..ada1506680012 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/useReportEventsModal.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/useReportEventsModal.tsx @@ -75,13 +75,19 @@ export function useReportEventsModal(asset: Asset | null, onEventReported: () => }; } -const ReportEventDialogBody: React.FC<{ +const ReportEventDialogBody = ({ + asset, + repoAddress, + isOpen, + setIsOpen, + onEventReported, +}: { asset: Asset; repoAddress: RepoAddress; isOpen: boolean; setIsOpen: (open: boolean) => void; onEventReported: () => void; -}> = ({asset, repoAddress, isOpen, setIsOpen, onEventReported}) => { +}) => { const [description, setDescription] = React.useState(''); const { permissions: {canReportRunlessAssetEvents}, diff --git a/js_modules/dagster-ui/packages/ui-core/src/dagstertype/DagsterType.tsx b/js_modules/dagster-ui/packages/ui-core/src/dagstertype/DagsterType.tsx index c46e7faf4b208..6bc157b7401b5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/dagstertype/DagsterType.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/dagstertype/DagsterType.tsx @@ -22,10 +22,7 @@ export const dagsterTypeKind = (type: {metadataEntries: MetadataEntryFragment[]} } }; -const _DagsterTypeName: React.FC<{type: DagsterTypeFragment; className?: string}> = ({ - type, - className, -}) => { +const _DagsterTypeName = ({type, className}: {type: DagsterTypeFragment; className?: string}) => { const typeKind = dagsterTypeKind(type); const displayName = typeKind === 'standard' ? type.name : `${type.name} (${typeKind})`; return {displayName}; @@ -38,10 +35,13 @@ const DagsterTypeName = styled(_DagsterTypeName)` text-overflow: ellipsis; `; -export const DagsterTypeSummary: React.FC<{ +export const DagsterTypeSummary = ({ + type, + horizontalPadding, +}: { type: DagsterTypeFragment; horizontalPadding?: Spacing; -}> = ({type, horizontalPadding}) => { +}) => { horizontalPadding = horizontalPadding || 0; const tableSchemaEntry = (type.metadataEntries || []).find( gqlTypePredicate('TableSchemaMetadataEntry'), diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx index 20f3e314f6b2c..f45dda6085463 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx @@ -109,7 +109,7 @@ interface GanttChartState { options: GanttChartLayoutOptions; } -export const GanttChart: React.FC = (props) => { +export const GanttChart = (props: GanttChartProps) => { const {graph, onSetSelection, options, selection, toolbarActions} = props; const [mode, setMode] = useGanttChartMode(); const [state, setState] = React.useState(() => ({ @@ -442,7 +442,7 @@ interface GanttChartViewportContentsProps { onClickStep: (step: string, evt: React.MouseEvent) => void; } -const GanttChartViewportContents: React.FC = (props) => { +const GanttChartViewportContents = (props: GanttChartViewportContentsProps) => { const {viewport, layout, hoveredStep, focusedSteps, metadata, options} = props; const items: React.ReactChild[] = []; diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChartModeControl.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChartModeControl.tsx index 5129ac058e618..4d5a5ca5ee2f1 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChartModeControl.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChartModeControl.tsx @@ -3,26 +3,32 @@ import * as React from 'react'; import {GanttChartMode} from './Constants'; -export const GanttChartModeControl: React.FC<{ - value: GanttChartMode; - hideTimedMode: boolean; - onChange: (mode: GanttChartMode) => void; -}> = React.memo(({value, onChange, hideTimedMode}) => { - const buttons: ButtonGroupItem[] = [ - {id: GanttChartMode.FLAT, icon: 'gantt_flat', tooltip: 'Flat view'}, - {id: GanttChartMode.WATERFALL, icon: 'gantt_waterfall', tooltip: 'Waterfall view'}, - ]; +export const GanttChartModeControl = React.memo( + ({ + value, + onChange, + hideTimedMode, + }: { + value: GanttChartMode; + hideTimedMode: boolean; + onChange: (mode: GanttChartMode) => void; + }) => { + const buttons: ButtonGroupItem[] = [ + {id: GanttChartMode.FLAT, icon: 'gantt_flat', tooltip: 'Flat view'}, + {id: GanttChartMode.WATERFALL, icon: 'gantt_waterfall', tooltip: 'Waterfall view'}, + ]; - if (!hideTimedMode) { - buttons.push({ - id: GanttChartMode.WATERFALL_TIMED, - icon: 'timer', - tooltip: 'Timed view', - }); - } + if (!hideTimedMode) { + buttons.push({ + id: GanttChartMode.WATERFALL_TIMED, + icon: 'timer', + tooltip: 'Timed view', + }); + } - const activeItems = React.useMemo(() => new Set([value]), [value]); - const onClick = React.useCallback((id: GanttChartMode) => onChange(id), [onChange]); + const activeItems = React.useMemo(() => new Set([value]), [value]); + const onClick = React.useCallback((id: GanttChartMode) => onChange(id), [onChange]); - return ; -}); + return ; + }, +); diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttStatusPanel.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttStatusPanel.tsx index 2448c4723622d..3d4b525698f0e 100755 --- a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttStatusPanel.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttStatusPanel.tsx @@ -25,7 +25,7 @@ interface GanttStatusPanelProps { onDoubleClickStep?: (step: string) => void; } -export const GanttStatusPanel: React.FC = ({ +export const GanttStatusPanel = ({ runId, nowMs, graph, @@ -34,7 +34,7 @@ export const GanttStatusPanel: React.FC = ({ onClickStep, onDoubleClickStep, onHighlightStep, -}) => { +}: GanttStatusPanelProps) => { const {preparing, executing, errored, succeeded, notExecuted} = React.useMemo(() => { const keys = Object.keys(metadata.steps); const preparing = []; @@ -137,7 +137,15 @@ export const GanttStatusPanel: React.FC = ({ ); }; -const StepItem: React.FC<{ +const StepItem = ({ + nowMs, + name, + selected, + metadata, + onClick, + onHover, + onDoubleClick, +}: { name: string; selected: boolean; metadata: IRunMetadataDict; @@ -145,7 +153,7 @@ const StepItem: React.FC<{ onClick?: (step: string, evt: React.MouseEvent) => void; onHover?: (name: string | null) => void; onDoubleClick?: (name: string) => void; -}> = ({nowMs, name, selected, metadata, onClick, onHover, onDoubleClick}) => { +}) => { const step = metadata.steps[name]; const end = (step && step.end) ?? nowMs; return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/RunGroupPanel.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/RunGroupPanel.tsx index 2632e273fc932..e43f31d1710f3 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/gantt/RunGroupPanel.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/gantt/RunGroupPanel.tsx @@ -25,9 +25,12 @@ function subsetTitleForRun(run: {tags: {key: string; value: string}[]}) { return stepsTag ? stepsTag.value : '*'; } -export const RunGroupPanel: React.FC<{runId: string; runStatusLastChangedAt: number}> = ({ +export const RunGroupPanel = ({ runId, runStatusLastChangedAt, +}: { + runId: string; + runStatusLastChangedAt: number; }) => { const queryResult = useQuery( RUN_GROUP_PANEL_QUERY, diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx index e6c7f58723f06..cc5e097739a5b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx @@ -7,10 +7,7 @@ import styled from 'styled-components'; * It uses Blueprint CSS but not the Slider component, because that renders twice and * forces a DOM layout to determine it's size (I think for tick marks, which we aren't using) */ -export const ZoomSlider: React.FC<{ - value: number; - onChange: (v: number) => void; -}> = React.memo((props) => { +export const ZoomSlider = React.memo((props: {value: number; onChange: (v: number) => void}) => { return ( = ({graph, logs, focusedTime}) => { +}) => { const [selectionQuery, setSelectionQuery] = useState(''); const [selectionKeys, setSelectionKeys] = useState([]); const [progress, setProgress] = useState(5); diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/ExternalConnectionNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/ExternalConnectionNode.tsx index 8b32b55e1cce9..552f6e98a63b8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/ExternalConnectionNode.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/ExternalConnectionNode.tsx @@ -21,7 +21,7 @@ interface ExternalConnectionNodeProps { onDoubleClickLabel: () => void; } -export const ExternalConnectionNode: React.FC = ({ +export const ExternalConnectionNode = ({ layout, target, edges, @@ -31,7 +31,7 @@ export const ExternalConnectionNode: React.FC = ({ highlightedEdges, onHighlightEdges, onDoubleClickLabel, -}) => { +}: ExternalConnectionNodeProps) => { const textProps = {width: 0, size: minified ? 24 : 12, text: label}; const textSize = SVGMonospaceText.intrinsicSizeForProps(textProps); const highlighted = edges.some((e) => isHighlighted(highlightedEdges, e)); diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/MappingLine.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/MappingLine.tsx index 7c3ce0c8b95f9..db38718d71b38 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/MappingLine.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/MappingLine.tsx @@ -13,7 +13,7 @@ interface MappingLineProps { highlightedEdges: Edge[]; onHighlightEdges: (edges: Edge[]) => void; } -export const MappingLine: React.FC = ({ +export const MappingLine = ({ source, target, minified, @@ -21,7 +21,7 @@ export const MappingLine: React.FC = ({ edge, highlightedEdges, onHighlightEdges, -}) => { +}: MappingLineProps) => { const highlighted = isHighlighted(highlightedEdges, edge); return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/OpEdges.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/OpEdges.tsx index 83ee9cbb087a6..546ab221b9938 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/OpEdges.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/OpEdges.tsx @@ -104,12 +104,17 @@ export const OpEdges = React.memo( OpEdges.displayName = 'OpEdges'; -const DynamicMarker: React.FC<{ +const DynamicMarker = ({ + x, + y, + direction, + color, +}: { x: number; y: number; direction: 'output' | 'collect'; color: string; -}> = ({x, y, direction, color}) => ( +}) => ( = React.memo((props) => { +const OpGraphContents = React.memo((props: OpGraphContentsProps) => { const [highlighted, setHighlighted] = React.useState(() => []); const { diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/OpIOBox.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/OpIOBox.tsx index 2bb0056ec090f..161681f99d22e 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/OpIOBox.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/OpIOBox.tsx @@ -34,7 +34,7 @@ interface OpIOBoxProps extends OpIORenderMetadata { onHighlightEdges: (edges: Edge[]) => void; } -export const OpIOBox: React.FC = ({ +export const OpIOBox = ({ minified, title, jumpTargetOp, @@ -45,7 +45,7 @@ export const OpIOBox: React.FC = ({ layoutInfo, onDoubleClick, onHighlightEdges, -}) => { +}: OpIOBoxProps) => { if (!layoutInfo) { return null; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/OpNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/OpNode.tsx index 3851881ed7e5e..1faedf27492ba 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/OpNode.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/OpNode.tsx @@ -190,7 +190,7 @@ export class OpNode extends React.Component { } } -const OpNodeAssociatedAssets: React.FC<{nodes: {assetKey: AssetKey}[]}> = ({nodes}) => { +const OpNodeAssociatedAssets = ({nodes}: {nodes: {assetKey: AssetKey}[]}) => { const more = nodes.length > 1 ? ` + ${nodes.length - 1} more` : ''; return (
diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx index 054d6aa40f027..6489bf19464fd 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx @@ -393,13 +393,16 @@ function coerceToStandardLabel(label: string) { return label.replace(/[ _-]/g, '').toLowerCase(); } -export const AssetComputeKindTag: React.FC<{ +export const AssetComputeKindTag = ({ + definition, + ...rest +}: { definition: {computeKind: string | null}; style: React.CSSProperties; reduceColor?: boolean; reduceText?: boolean; reversed?: boolean; -}> = ({definition, ...rest}) => { +}) => { if (!definition.computeKind) { return null; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/ParentOpNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/ParentOpNode.tsx index e9f414517d0af..3e63f32464695 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/ParentOpNode.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/ParentOpNode.tsx @@ -24,7 +24,7 @@ interface ParentOpNodeProps { onHighlightEdges: (edges: Edge[]) => void; } -export const ParentOpNode: React.FC = (props) => { +export const ParentOpNode = (props: ParentOpNodeProps) => { const {layout, op, minified} = props; const def = props.op.definition; diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/SVGComponents.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/SVGComponents.tsx index 8757888ec3046..7d90ac7e81159 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/SVGComponents.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/SVGComponents.tsx @@ -90,7 +90,13 @@ export class SVGMonospaceText extends React.PureComponent< } } -export const SVGLabeledRect: React.FC<{ +export const SVGLabeledRect = ({ + minified, + label, + fill, + className, + ...rect +}: { x: number; y: number; minified: boolean; @@ -99,7 +105,7 @@ export const SVGLabeledRect: React.FC<{ label: string; fill: string; className?: string; -}> = ({minified, label, fill, className, ...rect}) => ( +}) => ( { - const Test: React.FC<{title: string; children?: React.ReactNode}> = (props) => { + const Test = (props: {title: string; children?: React.ReactNode}) => { const {children, title} = props; useDocumentTitle(title); return
{children}
; diff --git a/js_modules/dagster-ui/packages/ui-core/src/hooks/__tests__/useQueryPersistedState.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/hooks/__tests__/useQueryPersistedState.test.tsx index 56556a08c50dc..1ec8b67e94211 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/hooks/__tests__/useQueryPersistedState.test.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/hooks/__tests__/useQueryPersistedState.test.tsx @@ -5,7 +5,7 @@ import {MemoryRouter, Route} from 'react-router-dom'; import {useQueryPersistedState} from '../useQueryPersistedState'; -const Test: React.FC<{options: Parameters[0]}> = ({options}) => { +const Test = ({options}: {options: Parameters[0]}) => { const [query, setQuery] = useQueryPersistedState(options); return
setQuery('Navigated')}>{`[${query}]`}
; }; diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/DaemonList.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/DaemonList.tsx index 8fbd8c2be8d09..1cbda39013e0b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/DaemonList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/DaemonList.tsx @@ -44,7 +44,7 @@ interface Props { const TIME_FORMAT = {showSeconds: true, showTimezone: false}; -export const DaemonList: React.FC = ({daemonStatuses, showTimestampColumn = true}) => { +export const DaemonList = ({daemonStatuses, showTimestampColumn = true}: Props) => { const automaterialize = useAutomaterializeDaemonStatus(); const assetDaemon = daemonStatuses?.filter((daemon) => daemon.daemonType === 'ASSET')[0]; const nonAssetDaemons = daemonStatuses?.filter((daemon) => daemon.daemonType !== 'ASSET'); diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/DeploymentStatusProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/DeploymentStatusProvider.tsx index 4138dadabb4b5..955f5575c4005 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/DeploymentStatusProvider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/DeploymentStatusProvider.tsx @@ -22,7 +22,7 @@ interface Props { include: Set; } -export const DeploymentStatusProvider: React.FC = (props) => { +export const DeploymentStatusProvider = (props: Props) => { const {children, include} = props; const codeLocations = useCodeLocationsStatus(!include.has('code-locations')); 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 3878946ff5dbf..2f9ad72ce928d 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 @@ -112,12 +112,17 @@ type DialogAction = } | undefined; -export const ConcurrencyLimits: React.FC<{ +export const ConcurrencyLimits = ({ + instanceConfig, + hasSupport, + limits, + refetch, +}: { limits: ConcurrencyLimitFragment[]; refetch: () => void; instanceConfig?: string | null; hasSupport?: boolean; -}> = ({instanceConfig, hasSupport, limits, refetch}) => { +}) => { const [action, setAction] = React.useState(); const [selectedRuns, setSelectedRuns] = React.useState(undefined); const [selectedKey, setSelectedKey] = React.useState(undefined); @@ -266,11 +271,15 @@ export const ConcurrencyLimits: React.FC<{ ); }; -const ConcurrencyLimitActionMenu: React.FC<{ +const ConcurrencyLimitActionMenu = ({ + concurrencyKey, + onDelete, + onEdit, +}: { concurrencyKey: string; onEdit: (key: string) => void; onDelete: (key: string) => void; -}> = ({concurrencyKey, onDelete, onEdit}) => { +}) => { return ( { return value > 0 && value < 1000; }; -const AddConcurrencyLimitDialog: React.FC<{ +const AddConcurrencyLimitDialog = ({ + open, + onClose, + onComplete, +}: { open: boolean; onClose: () => void; onComplete: () => void; -}> = ({open, onClose, onComplete}) => { +}) => { const [isSubmitting, setIsSubmitting] = React.useState(false); const [limitInput, setLimitInput] = React.useState(''); const [keyInput, setKeyInput] = React.useState(''); @@ -370,12 +383,17 @@ const AddConcurrencyLimitDialog: React.FC<{ ); }; -const EditConcurrencyLimitDialog: React.FC<{ +const EditConcurrencyLimitDialog = ({ + concurrencyKey, + open, + onClose, + onComplete, +}: { concurrencyKey: string; open: boolean; onClose: () => void; onComplete: () => void; -}> = ({concurrencyKey, open, onClose, onComplete}) => { +}) => { const [isSubmitting, setIsSubmitting] = React.useState(false); const [limitInput, setLimitInput] = React.useState(''); @@ -438,12 +456,17 @@ const EditConcurrencyLimitDialog: React.FC<{ ); }; -const DeleteConcurrencyLimitDialog: React.FC<{ +const DeleteConcurrencyLimitDialog = ({ + concurrencyKey, + open, + onClose, + onComplete, +}: { concurrencyKey: string; open: boolean; onClose: () => void; onComplete: () => void; -}> = ({concurrencyKey, open, onClose, onComplete}) => { +}) => { const [isSubmitting, setIsSubmitting] = React.useState(false); const [setConcurrencyLimit] = useMutation< @@ -489,11 +512,15 @@ const DeleteConcurrencyLimitDialog: React.FC<{ ); }; -const ConcurrencyRunsDialog: React.FC<{ +const ConcurrencyRunsDialog = ({ + runIds, + onClose, + title, +}: { runIds?: string[]; title: string | React.ReactNode; onClose: () => void; -}> = ({runIds, onClose, title}) => { +}) => { const {data} = useQuery( RUNS_FOR_CONCURRENCY_KEY_QUERY, { diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/LastRunSummary.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/LastRunSummary.tsx index e920997129ca4..5798083dc10bb 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/LastRunSummary.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/LastRunSummary.tsx @@ -19,8 +19,8 @@ interface Props { showSummary?: boolean; } -export const LastRunSummary: React.FC = React.memo( - ({name, run, showHover = false, showButton = true, showSummary = true}) => { +export const LastRunSummary = React.memo( + ({name, run, showHover = false, showButton = true, showSummary = true}: Props) => { const {status} = run; const intent = React.useMemo(() => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/RepoFilterButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/RepoFilterButton.tsx index 781194d01a2c9..bc43b29a8dbbb 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/RepoFilterButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/RepoFilterButton.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import {RepoSelector} from '../nav/RepoSelector'; import {WorkspaceContext} from '../workspace/WorkspaceContext'; -export const RepoFilterButton: React.FC = () => { +export const RepoFilterButton = () => { const {allRepos, visibleRepos, toggleVisible} = React.useContext(WorkspaceContext); const [open, setOpen] = React.useState(false); return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx index 3b93360b06060..a3fbebe678d98 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx @@ -255,10 +255,13 @@ const BackfillRunStatus = ({ ); }; -const BackfillTarget: React.FC<{ +const BackfillTarget = ({ + backfill, + repoAddress, +}: { backfill: BackfillTableFragment; repoAddress: RepoAddress | null; -}> = ({backfill, repoAddress}) => { +}) => { const repo = useRepository(repoAddress); const {assetSelection, partitionSet, partitionSetName} = backfill; diff --git a/js_modules/dagster-ui/packages/ui-core/src/instigation/InstigationTick.tsx b/js_modules/dagster-ui/packages/ui-core/src/instigation/InstigationTick.tsx index ceb1f067637d2..acfadbd816fc3 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instigation/InstigationTick.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instigation/InstigationTick.tsx @@ -16,7 +16,7 @@ import {RunTable, RUN_TABLE_RUN_FRAGMENT} from '../runs/RunTable'; import {LaunchedRunListQuery, LaunchedRunListQueryVariables} from './types/InstigationTick.types'; -export const RunList: React.FC<{runIds: string[]}> = ({runIds}) => { +export const RunList = ({runIds}: {runIds: string[]}) => { const {data, loading} = useQuery( LAUNCHED_RUN_LIST_QUERY, { @@ -55,9 +55,7 @@ export const RunList: React.FC<{runIds: string[]}> = ({runIds}) => { ); }; -export const FailedRunList: React.FC<{ - originRunIds?: string[]; -}> = ({originRunIds}) => { +export const FailedRunList = ({originRunIds}: {originRunIds?: string[]}) => { if (!originRunIds || !originRunIds.length) { return null; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/instigation/InstigationUtils.tsx b/js_modules/dagster-ui/packages/ui-core/src/instigation/InstigationUtils.tsx index ddedc1d7be245..6cf1da8583e74 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instigation/InstigationUtils.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instigation/InstigationUtils.tsx @@ -12,9 +12,11 @@ import {RUN_TIME_FRAGMENT, titleForRun} from '../runs/RunUtils'; import {TICK_TAG_FRAGMENT} from './InstigationTick'; import {InstigationStateFragment, RunStatusFragment} from './types/InstigationUtils.types'; -export const InstigatedRunStatus: React.FC<{ +export const InstigatedRunStatus = ({ + instigationState, +}: { instigationState: InstigationStateFragment; -}> = ({instigationState}) => { +}) => { const [instigationRun] = instigationState.runs; if (!instigationRun) { return None; @@ -22,7 +24,7 @@ export const InstigatedRunStatus: React.FC<{ return ; }; -export const RunStatusLink: React.FC<{run: RunStatusFragment}> = ({run}) => ( +export const RunStatusLink = ({run}: {run: RunStatusFragment}) => ( 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 826c1f2bbffed..3bb777e18c0a1 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 @@ -41,12 +41,7 @@ type Props = { isOpen: boolean; }; -export const TickDetailsDialog: React.FC = ({ - timestamp, - isOpen, - instigationSelector, - onClose, -}) => { +export const TickDetailsDialog = ({timestamp, isOpen, instigationSelector, onClose}: Props) => { return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/instigation/Unloadable.tsx b/js_modules/dagster-ui/packages/ui-core/src/instigation/Unloadable.tsx index 2cb1e35308fd3..03d38265fcf50 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instigation/Unloadable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instigation/Unloadable.tsx @@ -34,10 +34,13 @@ import {InstigatorSelectorInformation} from '../workspace/RepositoryInformation' import {InstigatedRunStatus} from './InstigationUtils'; import {InstigationStateFragment} from './types/InstigationUtils.types'; -export const UnloadableSensors: React.FC<{ +export const UnloadableSensors = ({ + sensorStates, + showSubheading = true, +}: { sensorStates: InstigationStateFragment[]; showSubheading?: boolean; -}> = ({sensorStates, showSubheading = true}) => { +}) => { if (!sensorStates.length) { return null; } @@ -66,10 +69,13 @@ export const UnloadableSensors: React.FC<{ ); }; -export const UnloadableSchedules: React.FC<{ +export const UnloadableSchedules = ({ + scheduleStates, + showSubheading = true, +}: { scheduleStates: InstigationStateFragment[]; showSubheading?: boolean; -}> = ({scheduleStates, showSubheading = true}) => { +}) => { if (!scheduleStates.length) { return null; } @@ -205,9 +211,7 @@ const SensorStateRow = ({sensorState}: {sensorState: InstigationStateFragment}) ); }; -const ScheduleStateRow: React.FC<{ - scheduleState: InstigationStateFragment; -}> = ({scheduleState}) => { +const ScheduleStateRow = ({scheduleState}: {scheduleState: InstigationStateFragment}) => { const [stopSchedule, {loading: toggleOffInFlight}] = useMutation< StopScheduleMutation, StopScheduleMutationVariables diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx index 7c60b90156093..0f3fc05c38af4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx @@ -61,7 +61,7 @@ interface ConfigEditorConfigPickerProps { assetSelection?: IExecutionSession['assetSelection']; } -export const ConfigEditorConfigPicker: React.FC = (props) => { +export const ConfigEditorConfigPicker = (props: ConfigEditorConfigPickerProps) => { const { pipeline, base, @@ -152,16 +152,14 @@ interface ConfigEditorPartitionPickerProps { const SORT_ORDER_KEY_BASE = 'dagster.partition-sort-order'; type SortOrder = 'asc' | 'desc'; -const ConfigEditorPartitionPicker: React.FC = React.memo( - (props) => { - const {partitionSetName, value, onSelect, repoAddress, assetSelection} = props; - const {basePath} = React.useContext(AppContext); - const repositorySelector = repoAddressToSelector(repoAddress); +const ConfigEditorPartitionPicker = React.memo((props: ConfigEditorPartitionPickerProps) => { + const {partitionSetName, value, onSelect, repoAddress, assetSelection} = props; + const {basePath} = React.useContext(AppContext); + const repositorySelector = repoAddressToSelector(repoAddress); - const {data, refetch, loading} = useQuery< - ConfigPartitionsQuery, - ConfigPartitionsQueryVariables - >(CONFIG_PARTITIONS_QUERY, { + const {data, refetch, loading} = useQuery( + CONFIG_PARTITIONS_QUERY, + { variables: { repositorySelector, partitionSetName, @@ -170,166 +168,166 @@ const ConfigEditorPartitionPicker: React.FC = : [], }, fetchPolicy: 'network-only', - }); - - const sortOrderKey = `${SORT_ORDER_KEY_BASE}-${basePath}-${repoAddressAsHumanString( - repoAddress, - )}-${partitionSetName}`; + }, + ); - const [sortOrder, setSortOrder] = useStateWithStorage(sortOrderKey, (value: any) => - value === undefined ? 'asc' : value, - ); + const sortOrderKey = `${SORT_ORDER_KEY_BASE}-${basePath}-${repoAddressAsHumanString( + repoAddress, + )}-${partitionSetName}`; - const partitions: Partition[] = React.useMemo(() => { - const retrieved = - data?.partitionSetOrError.__typename === 'PartitionSet' && - data?.partitionSetOrError.partitionsOrError.__typename === 'Partitions' - ? data.partitionSetOrError.partitionsOrError.results - : []; - return sortOrder === 'asc' ? retrieved : [...retrieved].reverse(); - }, [data, sortOrder]); + const [sortOrder, setSortOrder] = useStateWithStorage(sortOrderKey, (value: any) => + value === undefined ? 'asc' : value, + ); - const error = + const partitions: Partition[] = React.useMemo(() => { + const retrieved = data?.partitionSetOrError.__typename === 'PartitionSet' && - data?.partitionSetOrError.partitionsOrError.__typename !== 'Partitions' - ? data.partitionSetOrError.partitionsOrError - : null; - - const selected = partitions.find((p) => p.name === value); - - const onClickSort = React.useCallback( - (event: React.MouseEvent) => { - event.preventDefault(); - setSortOrder((order) => (order === 'asc' ? 'desc' : 'asc')); - }, - [setSortOrder], - ); + data?.partitionSetOrError.partitionsOrError.__typename === 'Partitions' + ? data.partitionSetOrError.partitionsOrError.results + : []; + return sortOrder === 'asc' ? retrieved : [...retrieved].reverse(); + }, [data, sortOrder]); + + const error = + data?.partitionSetOrError.__typename === 'PartitionSet' && + data?.partitionSetOrError.partitionsOrError.__typename !== 'Partitions' + ? data.partitionSetOrError.partitionsOrError + : null; + + const selected = partitions.find((p) => p.name === value); + + const onClickSort = React.useCallback( + (event: React.MouseEvent) => { + event.preventDefault(); + setSortOrder((order) => (order === 'asc' ? 'desc' : 'asc')); + }, + [setSortOrder], + ); - const rightElement = partitions.length ? ( - - - - ) : undefined; - - const inputProps: InputGroupProps2 & HTMLInputProps = { - placeholder: 'Partition', - style: {width: 180}, - intent: (loading ? !!value : !!selected) ? Intent.NONE : Intent.DANGER, - rightElement, - }; + const rightElement = partitions.length ? ( + + + + ) : undefined; + + const inputProps: InputGroupProps2 & HTMLInputProps = { + placeholder: 'Partition', + style: {width: 180}, + intent: (loading ? !!value : !!selected) ? Intent.NONE : Intent.DANGER, + rightElement, + }; - const {isDynamicPartition, partitionDefinitionName} = React.useMemo(() => { - const assetNodes = data?.assetNodes; - const definition = assetNodes?.find((a) => !!a.partitionDefinition)?.partitionDefinition; - if ( - !definition || - assetNodes?.some( - (node) => - node?.partitionDefinition?.name && node?.partitionDefinition?.name !== definition?.name, - ) - ) { - return {isDynamicPartition: false, partitionDefinitionName: undefined}; - } - return { - isDynamicPartition: definition.type === PartitionDefinitionType.DYNAMIC, - partitionDefinitionName: definition.name, - }; - }, [data?.assetNodes]); - - const [showCreatePartition, setShowCreatePartition] = React.useState(false); - - // If we are loading the partitions and do NOT have any cached data to display, - // show the component in a loading state with a spinner and fill it with the - // current partition's name so it doesn't flicker (if one is set already.) - if (loading && partitions.length === 0) { - return ( - - key="loading" - inputProps={{ - ...inputProps, - rightElement: !value ? ( - - - - ) : undefined, - }} - items={[]} - itemRenderer={() => null} - noResults={} - inputValueRenderer={(str) => str} - selectedItem={value} - onItemSelect={() => {}} - /> - ); + const {isDynamicPartition, partitionDefinitionName} = React.useMemo(() => { + const assetNodes = data?.assetNodes; + const definition = assetNodes?.find((a) => !!a.partitionDefinition)?.partitionDefinition; + if ( + !definition || + assetNodes?.some( + (node) => + node?.partitionDefinition?.name && node?.partitionDefinition?.name !== definition?.name, + ) + ) { + return {isDynamicPartition: false, partitionDefinitionName: undefined}; } + return { + isDynamicPartition: definition.type === PartitionDefinitionType.DYNAMIC, + partitionDefinitionName: definition.name, + }; + }, [data?.assetNodes]); - if (error) { - showCustomAlert({ - body: , - }); - } + const [showCreatePartition, setShowCreatePartition] = React.useState(false); - // Note: We don't want this Suggest to be a fully "controlled" React component. - // Keeping it's state is annoyign and we only want to update our data model on - // selection change. However, we need to set an initial value (defaultSelectedItem) - // and ensure it is re-applied to the internal state when it changes (via `key` below). + // If we are loading the partitions and do NOT have any cached data to display, + // show the component in a loading state with a spinner and fill it with the + // current partition's name so it doesn't flicker (if one is set already.) + if (loading && partitions.length === 0) { return ( - <> - - key={selected ? selected.name : 'none'} - defaultSelectedItem={selected} - items={partitions} - inputProps={inputProps} - inputValueRenderer={(partition) => partition.name} - itemPredicate={(query, partition) => query.length === 0 || partition.name.includes(query)} - itemRenderer={(partition, props) => ( - - )} - noResults={} - onItemSelect={(item) => { - onSelect(repositorySelector, partitionSetName, item.name); + + key="loading" + inputProps={{ + ...inputProps, + rightElement: !value ? ( + + + + ) : undefined, + }} + items={[]} + itemRenderer={() => null} + noResults={} + inputValueRenderer={(str) => str} + selectedItem={value} + onItemSelect={() => {}} + /> + ); + } + + if (error) { + showCustomAlert({ + body: , + }); + } + + // Note: We don't want this Suggest to be a fully "controlled" React component. + // Keeping it's state is annoyign and we only want to update our data model on + // selection change. However, we need to set an initial value (defaultSelectedItem) + // and ensure it is re-applied to the internal state when it changes (via `key` below). + return ( + <> + + key={selected ? selected.name : 'none'} + defaultSelectedItem={selected} + items={partitions} + inputProps={inputProps} + inputValueRenderer={(partition) => partition.name} + itemPredicate={(query, partition) => query.length === 0 || partition.name.includes(query)} + itemRenderer={(partition, props) => ( + + )} + noResults={} + onItemSelect={(item) => { + onSelect(repositorySelector, partitionSetName, item.name); + }} + /> + {isDynamicPartition ? ( + + ) : null} + {/* Wrapper div to avoid any key conflicts with the key on the Suggestion component */} +
+ { + setShowCreatePartition(false); + }} + refetch={async () => { + await refetch(); + }} + onCreated={(partitionName) => { + onSelect(repositorySelector, partitionSetName, partitionName); }} /> - {isDynamicPartition ? ( - - ) : null} - {/* Wrapper div to avoid any key conflicts with the key on the Suggestion component */} -
- { - setShowCreatePartition(false); - }} - refetch={async () => { - await refetch(); - }} - onCreated={(partitionName) => { - onSelect(repositorySelector, partitionSetName, partitionName); - }} - /> -
- - ); - }, -); +
+ + ); +}); interface ConfigEditorConfigGeneratorPickerProps { label: string; @@ -337,8 +335,8 @@ interface ConfigEditorConfigGeneratorPickerProps { onSelect: (configGenerator: ConfigGenerator) => void; } -const ConfigEditorConfigGeneratorPicker: React.FC = - React.memo((props) => { +const ConfigEditorConfigGeneratorPicker = React.memo( + (props: ConfigEditorConfigGeneratorPickerProps) => { const {configGenerators, label, onSelect} = props; const button = React.useRef(null); @@ -414,7 +412,8 @@ const ConfigEditorConfigGeneratorPicker: React.FC
); - }); + }, +); export const SortButton = styled.button` border: 0; diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorModePicker.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorModePicker.tsx index 960a4cc773e59..f4947e38b6862 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorModePicker.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorModePicker.tsx @@ -16,7 +16,7 @@ interface ConfigEditorModePickerProps { const MODE_PICKER_HINT_TEXT = `To add a mode, add a ModeDefinition to the pipeline.`; -export const ConfigEditorModePicker: React.FC = (props) => { +export const ConfigEditorModePicker = (props: ConfigEditorModePickerProps) => { const resolvedMode = props.modeName ? props.modes.find((m) => m.name === props.modeName) : props.modes[0]; diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchButton.tsx index eed9db605adbd..361176a9115fd 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchButton.tsx @@ -187,7 +187,7 @@ interface ButtonWithConfigurationProps { // Basic helper components -const ButtonWithConfiguration: React.FC = ({ +const ButtonWithConfiguration = ({ tooltip, icon, title, @@ -197,7 +197,7 @@ const ButtonWithConfiguration: React.FC = ({ onClick, joined, disabled, -}) => { +}: ButtonWithConfigurationProps) => { const confirm = useConfirmation(); const onClickWithWarning = async () => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchRootExecutionButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchRootExecutionButton.tsx index e16529b191e35..940ecbad03306 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchRootExecutionButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchRootExecutionButton.tsx @@ -20,7 +20,7 @@ interface LaunchRootExecutionButtonProps { export const NO_LAUNCH_PERMISSION_MESSAGE = 'You do not have permission to launch this job'; -export const LaunchRootExecutionButton: React.FC = (props) => { +export const LaunchRootExecutionButton = (props: LaunchRootExecutionButtonProps) => { const {hasLaunchPermission} = props; const {useLaunchWithTelemetry} = useLaunchPadHooks(); const launchWithTelemetry = useLaunchWithTelemetry(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadHooksContext.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadHooksContext.tsx index ebb63d197d4c9..a0a9c7b38a64f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadHooksContext.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadHooksContext.tsx @@ -14,7 +14,7 @@ type LaunchpadHooksContextValue = { useLaunchWithTelemetry?: typeof useLaunchWithTelemetry; UserDisplay?: typeof UserDisplay; MaterializeButton?: typeof Button; - PythonErrorInfoHeader?: React.FC<{ + PythonErrorInfoHeader?: React.ComponentType<{ error: GenericError | PythonErrorFragment; fallback?: React.ReactNode; }>; diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadRoot.tsx index c3c4b297dd574..a9dbb66a16868 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadRoot.tsx @@ -13,13 +13,19 @@ import {LaunchpadAllowedRoot} from './LaunchpadAllowedRoot'; // ##### LAUNCHPAD ROOTS // ######################## -export const AssetLaunchpad: React.FC<{ +export const AssetLaunchpad = ({ + repoAddress, + sessionPresets, + assetJobName, + open, + setOpen, +}: { repoAddress: RepoAddress; sessionPresets?: Partial; assetJobName: string; open: boolean; setOpen: (open: boolean) => void; -}> = ({repoAddress, sessionPresets, assetJobName, open, setOpen}) => { +}) => { const title = 'Launchpad (configure assets)'; return ( @@ -42,7 +48,7 @@ export const AssetLaunchpad: React.FC<{ ); }; -export const JobOrAssetLaunchpad: React.FC<{repoAddress: RepoAddress}> = (props) => { +export const JobOrAssetLaunchpad = (props: {repoAddress: RepoAddress}) => { const {repoAddress} = props; const {pipelinePath, repoPath} = useParams<{repoPath: string; pipelinePath: string}>(); const { diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx index 5d754edfc564c..6f88900bc88e8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx @@ -148,10 +148,13 @@ const reducer = (state: ILaunchpadSessionState, action: Action) => { } }; -const LaunchButtonContainer: React.FC<{ +const LaunchButtonContainer = ({ + launchpadType, + children, +}: { launchpadType: LaunchpadType; children: React.ReactNode; -}> = ({launchpadType, children}) => { +}) => { if (launchpadType === 'asset') { return ( @@ -174,7 +177,7 @@ const initialState: ILaunchpadSessionState = { tagEditorOpen: false, }; -const LaunchpadSession: React.FC = (props) => { +const LaunchpadSession = (props: LaunchpadSessionProps) => { const { launchpadType, session: currentSession, diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSessionError.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSessionError.tsx index eaf9d7fbf9547..3c906859518b2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSessionError.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSessionError.tsx @@ -8,7 +8,7 @@ import * as React from 'react'; import {SessionSettingsBar} from './SessionSettingsBar'; -export const LaunchpadSessionError: React.FC = (props) => ( +export const LaunchpadSessionError = (props: NonIdealStateProps) => ( = (props) => { +export const LaunchpadSetupFromRunRoot = (props: {repoAddress: RepoAddress}) => { const {repoAddress} = props; const { permissions: {canLaunchPipelineExecution}, @@ -56,7 +56,7 @@ interface Props { * values, then redirect to the launchpad. The newly created session will be the open launchpad * config tab. */ -const LaunchpadSetupFromRunAllowedRoot: React.FC = (props) => { +const LaunchpadSetupFromRunAllowedRoot = (props: Props) => { const {pipelinePath, repoAddress, runId} = props; const explorerPath = explorerPathFromString(pipelinePath); diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSetupRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSetupRoot.tsx index f9d5fff492ff3..1b6ee6c050d2e 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSetupRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSetupRoot.tsx @@ -14,7 +14,7 @@ import {isThisThingAJob, useRepository} from '../workspace/WorkspaceContext'; import {RepoAddress} from '../workspace/types'; import {workspacePathFromAddress} from '../workspace/workspacePath'; -export const LaunchpadSetupRoot: React.FC<{repoAddress: RepoAddress}> = (props) => { +export const LaunchpadSetupRoot = (props: {repoAddress: RepoAddress}) => { const {repoAddress} = props; const { permissions: {canLaunchPipelineExecution}, @@ -32,7 +32,7 @@ interface Props { repoAddress: RepoAddress; } -const LaunchpadSetupAllowedRoot: React.FC = (props) => { +const LaunchpadSetupAllowedRoot = (props: Props) => { const {pipelinePath, repoAddress} = props; const explorerPath = explorerPathFromString(pipelinePath); diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LoadingOverlay.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LoadingOverlay.tsx index f73dc37886d39..1c04f0bb07e78 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LoadingOverlay.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LoadingOverlay.tsx @@ -2,10 +2,7 @@ import {Group, Spinner} from '@dagster-io/ui-components'; import * as React from 'react'; import styled from 'styled-components'; -export const LoadingOverlay: React.FC<{ - isLoading: boolean; - message: string; -}> = ({isLoading, message}) => ( +export const LoadingOverlay = ({isLoading, message}: {isLoading: boolean; message: string}) => ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/RunPreview.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/RunPreview.tsx index df80b948dc3c2..5296d55901b76 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/RunPreview.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/RunPreview.tsx @@ -251,7 +251,7 @@ interface RunPreviewProps { solidSelection: string[] | null; } -export const RunPreview: React.FC = (props) => { +export const RunPreview = (props: RunPreviewProps) => { const { document, validation, @@ -623,10 +623,13 @@ const RuntimeAndResourcesSection = styled.div` } `; -const ErrorRow: React.FC<{ +const ErrorRow = ({ + error, + onHighlight, +}: { error: ValidationError | React.ReactNode; onHighlight: (path: string[]) => void; -}> = ({error, onHighlight}) => { +}) => { let message: React.ReactNode = null; let target: ValidationError | null = null; if (isValidationError(error)) { diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/TagEditor.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/TagEditor.tsx index b7bdb2e41d207..3faa8adec8c63 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/TagEditor.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/TagEditor.tsx @@ -32,13 +32,13 @@ interface ITagContainerProps { actions?: TagAction[]; } -export const TagEditor: React.FC = ({ +export const TagEditor = ({ tagsFromDefinition = [], tagsFromSession = [], open, onChange, onRequestClose, -}) => { +}: ITagEditorProps) => { const [editState, setEditState] = React.useState(() => tagsFromSession.length ? tagsFromSession : [{key: '', value: ''}], ); diff --git a/js_modules/dagster-ui/packages/ui-core/src/metadata/MetadataEntry.tsx b/js_modules/dagster-ui/packages/ui-core/src/metadata/MetadataEntry.tsx index febbd081b3c04..e771d69bd681f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/metadata/MetadataEntry.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/metadata/MetadataEntry.tsx @@ -29,10 +29,13 @@ import {NotebookButton} from '../ui/NotebookButton'; import {TableSchema, TABLE_SCHEMA_FRAGMENT} from './TableSchema'; import {MetadataEntryFragment} from './types/MetadataEntry.types'; -export const LogRowStructuredContentTable: React.FC<{ +export const LogRowStructuredContentTable = ({ + rows, + styles, +}: { rows: {label: string; item: JSX.Element}[]; styles?: React.CSSProperties; -}> = ({rows, styles}) => ( +}) => (
@@ -54,10 +57,13 @@ export const LogRowStructuredContentTable: React.FC<{ ); -export const MetadataEntries: React.FC<{ +export const MetadataEntries = ({ + entries, + expandSmallValues, +}: { entries?: MetadataEntryFragment[]; expandSmallValues?: boolean; -}> = ({entries, expandSmallValues}) => { +}) => { if (!entries || !entries.length) { return null; } @@ -71,11 +77,15 @@ export const MetadataEntries: React.FC<{ ); }; -export const MetadataEntry: React.FC<{ +export const MetadataEntry = ({ + entry, + expandSmallValues, + repoLocation, +}: { entry: MetadataEntryFragment; expandSmallValues?: boolean; repoLocation?: string; -}> = ({entry, expandSmallValues, repoLocation}) => { +}) => { switch (entry.__typename) { case 'PathMetadataEntry': return ( @@ -313,12 +323,12 @@ const PythonArtifactLink = ({ ); -const MetadataEntryModalAction: React.FC<{ +const MetadataEntryModalAction = (props: { children: React.ReactNode; label: string; content: () => React.ReactNode; copyContent: () => string; -}> = (props) => { +}) => { const [open, setOpen] = React.useState(false); return ( <> @@ -342,7 +352,7 @@ const MetadataEntryModalAction: React.FC<{ ); }; -export const TableMetadataEntryComponent: React.FC<{entry: TableMetadataEntry}> = ({entry}) => { +export const TableMetadataEntryComponent = ({entry}: {entry: TableMetadataEntry}) => { const [showSchema, setShowSchema] = React.useState(false); const schema = entry.table.schema; diff --git a/js_modules/dagster-ui/packages/ui-core/src/metadata/TableSchema.tsx b/js_modules/dagster-ui/packages/ui-core/src/metadata/TableSchema.tsx index 65588774c4dd5..9ef655edb8d3a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/metadata/TableSchema.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/metadata/TableSchema.tsx @@ -17,7 +17,7 @@ interface ITableSchemaProps { itemHorizontalPadding?: Spacing; } -export const TableSchema: React.FC = ({schema, itemHorizontalPadding}) => { +export const TableSchema = ({schema, itemHorizontalPadding}: ITableSchemaProps) => { const multiColumnConstraints = schema.constraints?.other || []; return (
@@ -51,14 +51,20 @@ export const TableSchema: React.FC = ({schema, itemHorizontal ); }; -const _ColumnItem: React.FC<{ +const _ColumnItem = ({ + name, + type, + description, + constraints, + className, +}: { name: string; type: string; description?: string; constraints: ColumnConstraints; horizontalPadding: number; className?: string; -}> = ({name, type, description, constraints, className}) => { +}) => { return (
@@ -92,13 +98,13 @@ const ColumnName = styled.div` padding-right: 4px; `; -const TypeTag: React.FC<{type: string}> = ({type}) => {type}; +const TypeTag = ({type}: {type: string}) => {type}; const NonNullableTag = non-nullable; const UniqueTag = unique; -const ArbitraryConstraintTag: React.FC<{constraint: string}> = ({constraint}) => { +const ArbitraryConstraintTag = ({constraint}: {constraint: string}) => { if (constraint.length > MAX_CONSTRAINT_TAG_CHARS) { const content = constraint.substring(0, MAX_CONSTRAINT_TAG_CHARS - 3) + '...'; return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/JobMetadata.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/JobMetadata.tsx index c51220182f2a2..5c9ee3998cc94 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/JobMetadata.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/JobMetadata.tsx @@ -77,7 +77,7 @@ interface Props { repoAddress: RepoAddress; } -export const JobMetadata: React.FC = (props) => { +export const JobMetadata = (props: Props) => { const {pipelineName, repoAddress} = props; const metadata = useJobNavMetadata(repoAddress, pipelineName); @@ -97,10 +97,13 @@ export const JobMetadata: React.FC = (props) => { ); }; -const JobScheduleOrSensorTag: React.FC<{ +const JobScheduleOrSensorTag = ({ + job, + repoAddress, +}: { job: JobMetadataFragment; repoAddress: RepoAddress; -}> = ({job, repoAddress}) => { +}) => { const matchingSchedules = React.useMemo(() => { if (job?.__typename === 'Pipeline' && job.schedules.length) { return job.schedules; @@ -134,7 +137,7 @@ function getRelatedAssets(metadata: JobMetadata) { ); } -const RelatedAssetsTag: React.FC<{relatedAssets: string[]}> = ({relatedAssets}) => { +const RelatedAssetsTag = ({relatedAssets}: {relatedAssets: string[]}) => { const [open, setOpen] = React.useState(false); if (relatedAssets.length === 0) { diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/LatestRunTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/LatestRunTag.tsx index 5de6e2a54a311..50562cd16ea84 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/LatestRunTag.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/LatestRunTag.tsx @@ -17,9 +17,12 @@ import {LatestRunTagQuery, LatestRunTagQueryVariables} from './types/LatestRunTa const TIME_FORMAT = {showSeconds: true, showTimezone: false}; -export const LatestRunTag: React.FC<{pipelineName: string; repoAddress: RepoAddress}> = ({ +export const LatestRunTag = ({ pipelineName, repoAddress, +}: { + pipelineName: string; + repoAddress: RepoAddress; }) => { const lastRunQuery = useQuery( LATEST_RUN_TAG_QUERY, diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavRepositorySection.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavRepositorySection.tsx index 34c99189bd74b..3739cb10be44d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavRepositorySection.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavRepositorySection.tsx @@ -9,11 +9,15 @@ import {RepoAddress} from '../workspace/types'; import {RepoNavItem} from './RepoNavItem'; import {RepositoryLocationStateObserver} from './RepositoryLocationStateObserver'; -const LoadedRepositorySection: React.FC<{ +const LoadedRepositorySection = ({ + allRepos, + visibleRepos, + toggleVisible, +}: { allRepos: DagsterRepoOption[]; visibleRepos: DagsterRepoOption[]; toggleVisible: (repoAddresses: RepoAddress[]) => void; -}> = ({allRepos, visibleRepos, toggleVisible}) => { +}) => { const listContent = () => { if (visibleRepos.length) { return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/PipelineNav.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/PipelineNav.tsx index 45d386e625635..61c6af6a20b0a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/PipelineNav.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/PipelineNav.tsx @@ -16,7 +16,7 @@ interface Props { repoAddress: RepoAddress; } -export const PipelineNav: React.FC = (props) => { +export const PipelineNav = (props: Props) => { const {repoAddress} = props; const permissions = usePermissionsForLocation(repoAddress.location); diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/ReloadRepositoryLocationButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/ReloadRepositoryLocationButton.tsx index b907af51149cb..528973b21df17 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/ReloadRepositoryLocationButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/ReloadRepositoryLocationButton.tsx @@ -14,13 +14,13 @@ export type ChildProps = { }; interface Props { - ChildComponent: React.FC; + ChildComponent: React.ComponentType; location: string; } export const NO_RELOAD_PERMISSION_TEXT = 'You do not have permission to reload this code location'; -export const ReloadRepositoryLocationButton: React.FC = (props) => { +export const ReloadRepositoryLocationButton = (props: Props) => { const {ChildComponent, location} = props; const [shown, setShown] = React.useState(false); diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx index f890f8e9352f7..0110157f7febd 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx @@ -33,7 +33,7 @@ interface Props { onToggle: (repoAddresses: RepoAddress[]) => void; } -export const RepoNavItem: React.FC = (props) => { +export const RepoNavItem = (props: Props) => { const {allRepos, selected, onToggle} = props; const [open, setOpen] = React.useState(false); @@ -92,10 +92,7 @@ export const RepoNavItem: React.FC = (props) => { ); }; -const SingleRepoSummary: React.FC<{repo: RepoSelectorOption; onlyRepo: boolean}> = ({ - repo, - onlyRepo, -}) => { +const SingleRepoSummary = ({repo, onlyRepo}: {repo: RepoSelectorOption; onlyRepo: boolean}) => { const repoAddress = buildRepoAddress(repo.repository.name, repo.repositoryLocation.name); const isDunder = repoAddress.name === DUNDER_REPO_NAME; return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx index ca118a430c530..a496fb39a8cae 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx @@ -41,7 +41,7 @@ interface Props { selected: RepoSelectorOption[]; } -export const RepoSelector: React.FC = (props) => { +export const RepoSelector = (props: Props) => { const {onBrowse, onToggle, options, selected} = props; const optionCount = options.length; @@ -144,7 +144,7 @@ const RepoLocation = styled.div` color: ${Colors.Gray700}; `; -const ReloadButton: React.FC<{repoAddress: RepoAddress}> = ({repoAddress}) => { +const ReloadButton = ({repoAddress}: {repoAddress: RepoAddress}) => { return ( = ({repoAddress, showIcon = false, showRefresh = true}) => { +}) => { const {location} = repoAddress; const repoString = repoAddressAsHumanString(repoAddress); diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/ScheduleOrSensorTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/ScheduleOrSensorTag.tsx index 9990274c892fd..351cd70dfe55f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/ScheduleOrSensorTag.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/ScheduleOrSensorTag.tsx @@ -20,12 +20,17 @@ import {workspacePathFromAddress} from '../workspace/workspacePath'; import {ScheduleAndSensorDialog} from './ScheduleAndSensorDialog'; -export const ScheduleOrSensorTag: React.FC<{ +export const ScheduleOrSensorTag = ({ + schedules, + sensors, + repoAddress, + showSwitch = true, +}: { schedules: ScheduleSwitchFragment[]; sensors: SensorSwitchFragment[]; repoAddress: RepoAddress; showSwitch?: boolean; -}> = ({schedules, sensors, repoAddress, showSwitch = true}) => { +}) => { const [open, setOpen] = React.useState(false); const scheduleCount = schedules.length; @@ -79,11 +84,15 @@ export const ScheduleOrSensorTag: React.FC<{ return null; }; -const MatchingSchedule: React.FC<{ +const MatchingSchedule = ({ + schedule, + repoAddress, + showSwitch, +}: { schedule: ScheduleSwitchFragment; repoAddress: RepoAddress; showSwitch: boolean; -}> = ({schedule, repoAddress, showSwitch}) => { +}) => { const {cronSchedule, executionTimezone, scheduleState} = schedule; const running = scheduleState.status === 'RUNNING'; const tag = ( @@ -129,11 +138,15 @@ const MatchingSchedule: React.FC<{ ); }; -const MatchingSensor: React.FC<{ +const MatchingSensor = ({ + sensor, + repoAddress, + showSwitch, +}: { sensor: SensorSwitchFragment; repoAddress: RepoAddress; showSwitch: boolean; -}> = ({sensor, repoAddress, showSwitch}) => { +}) => { const running = sensor.sensorState.status === 'RUNNING'; return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/WorkspaceStatus.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/WorkspaceStatus.tsx index 6d293c5bd065f..782161dfc406f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/WorkspaceStatus.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/WorkspaceStatus.tsx @@ -5,7 +5,7 @@ import {DeploymentStatusContext} from '../instance/DeploymentStatusProvider'; import {WarningTooltip} from './WarningTooltip'; -export const WorkspaceStatus: React.FC<{placeholder: boolean}> = React.memo(({placeholder}) => { +export const WorkspaceStatus = React.memo(({placeholder}: {placeholder: boolean}) => { const {codeLocations} = React.useContext(DeploymentStatusContext); if (!codeLocations) { diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/__tests__/ReloadRepositoryLocationButton.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/__tests__/ReloadRepositoryLocationButton.test.tsx index c70367fbdadc4..b4d66bb9d9d21 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/__tests__/ReloadRepositoryLocationButton.test.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/__tests__/ReloadRepositoryLocationButton.test.tsx @@ -7,7 +7,7 @@ import {ChildProps, ReloadRepositoryLocationButton} from '../ReloadRepositoryLoc import {buildPermissionsQuery} from '../__fixtures__/ReloadRepositoryLocationButton.fixtures'; describe('ReloadRepositoryLocationButton', () => { - const Test: React.FC = (props) => { + const Test = (props: ChildProps) => { const {tryReload, hasReloadPermission} = props; const {loading} = usePermissionsForLocation(props.codeLocation); return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/useCodeLocationsStatus.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/useCodeLocationsStatus.tsx index e3d47c454d028..24639285be7e3 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/useCodeLocationsStatus.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/useCodeLocationsStatus.tsx @@ -264,7 +264,7 @@ export const useCodeLocationsStatus = (skip = false): StatusAndMessage | null => const alreadyViewingCodeLocations = () => document.location.pathname.endsWith('/locations'); -const ViewCodeLocationsButton: React.FC<{onClick: () => void}> = ({onClick}) => { +const ViewCodeLocationsButton = ({onClick}: {onClick: () => void}) => { return ( View diff --git a/js_modules/dagster-ui/packages/ui-core/src/ops/OpCard.tsx b/js_modules/dagster-ui/packages/ui-core/src/ops/OpCard.tsx index 8337f8d98ea7b..5eff936eff84f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ops/OpCard.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ops/OpCard.tsx @@ -12,7 +12,7 @@ interface OpCardProps { definition: OpCardSolidDefinitionFragment; } -export const OpCard: React.FC = (props) => { +export const OpCard = (props: OpCardProps) => { const {name, inputDefinitions, outputDefinitions} = props.definition; const layout = layoutOp( { diff --git a/js_modules/dagster-ui/packages/ui-core/src/ops/OpDetailsRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/ops/OpDetailsRoot.tsx index a9b768d5e1f94..f9595574bc984 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ops/OpDetailsRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ops/OpDetailsRoot.tsx @@ -20,7 +20,7 @@ interface UsedSolidDetailsProps { repoAddress: RepoAddress; } -export const UsedSolidDetails: React.FC = (props) => { +export const UsedSolidDetails = (props: UsedSolidDetailsProps) => { const {name, onClickInvocation, repoAddress} = props; const repositorySelector = repoAddressToSelector(repoAddress); diff --git a/js_modules/dagster-ui/packages/ui-core/src/ops/OpTypeSignature.tsx b/js_modules/dagster-ui/packages/ui-core/src/ops/OpTypeSignature.tsx index 4ec4c806fa66b..7c6e71decca80 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ops/OpTypeSignature.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ops/OpTypeSignature.tsx @@ -14,7 +14,7 @@ interface IOpTypeSignature { definition: OpTypeSignatureFragment; } -export const OpTypeSignature: React.FC = (props) => { +export const OpTypeSignature = (props: IOpTypeSignature) => { const {inputDefinitions, outputDefinitions} = props.definition; const inputSide = inputDefinitions.map((input, i) => ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/ops/OpsRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/ops/OpsRoot.tsx index 0f5984a8cfc7a..533cefed5bc54 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ops/OpsRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ops/OpsRoot.tsx @@ -122,7 +122,7 @@ interface Props { repoAddress: RepoAddress; } -export const OpsRoot: React.FC = (props) => { +export const OpsRoot = (props: Props) => { useTrackPageView(); useDocumentTitle('Ops'); @@ -156,7 +156,12 @@ export const OpsRoot: React.FC = (props) => { ); }; -const OpsRootWithData: React.FC = (props) => { +interface OpsRootWithDataProps extends Props { + name?: string; + usedSolids: Solid[]; +} + +const OpsRootWithData = (props: OpsRootWithDataProps) => { const {name, repoAddress, usedSolids} = props; const history = useHistory(); const location = useLocation(); @@ -268,7 +273,7 @@ interface OpListProps { onClickOp: (name: string) => void; } -const OpList: React.FC = (props) => { +const OpList = (props: OpListProps) => { const {items, selected} = props; const cache = React.useRef(new CellMeasurerCache({defaultHeight: 60, fixedWidth: true})); diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewAssetsRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewAssetsRoot.tsx index ef67b71bdcb84..a1341dae0244c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewAssetsRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewAssetsRoot.tsx @@ -37,8 +37,8 @@ import {buildRepoAddress} from '../workspace/buildRepoAddress'; import {workspacePathFromAddress} from '../workspace/workspacePath'; type Props = { - Header: React.FC<{refreshState: ReturnType}>; - TabButton: React.FC<{selected: 'timeline' | 'assets'}>; + Header: React.ComponentType<{refreshState: ReturnType}>; + TabButton: React.ComponentType<{selected: 'timeline' | 'assets'}>; }; export const OverviewAssetsRoot = ({Header, TabButton}: Props) => { useTrackPageView(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewJobsTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewJobsTable.tsx index d4d3442cb47b5..9f381b59a0252 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewJobsTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewJobsTable.tsx @@ -28,7 +28,7 @@ type RowType = | {type: 'header'; repoAddress: RepoAddress; jobCount: number} | {type: 'job'; repoAddress: RepoAddress; isJob: boolean; name: string}; -export const OverviewJobsTable: React.FC = ({repos}) => { +export const OverviewJobsTable = ({repos}: Props) => { const parentRef = React.useRef(null); const allKeys = React.useMemo( () => repos.map(({repoAddress}) => repoAddressAsHumanString(repoAddress)), diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewResourcesTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewResourcesTable.tsx index 55a9975bcf418..ab6d0950d3706 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewResourcesTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewResourcesTable.tsx @@ -32,7 +32,7 @@ interface Resource extends ResourceEntryFragment { type RowType = {type: 'header'; repoAddress: RepoAddress; resourceCount: number} | Resource; -export const OverviewResourcesTable: React.FC = ({repos}) => { +export const OverviewResourcesTable = ({repos}: Props) => { const parentRef = React.useRef(null); const allKeys = React.useMemo( () => repos.map(({repoAddress}) => repoAddressAsHumanString(repoAddress)), diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSchedulesRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSchedulesRoot.tsx index 7520a8066e75e..2f8bcea5a62c2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSchedulesRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSchedulesRoot.tsx @@ -320,9 +320,7 @@ export const OverviewSchedulesRoot = () => { ); }; -const UnloadableSchedulesAlert: React.FC<{ - count: number; -}> = ({count}) => { +const UnloadableSchedulesAlert = ({count}: {count: number}) => { const [isOpen, setIsOpen] = React.useState(false); if (!count) { @@ -369,7 +367,7 @@ const UnloadableSchedulesAlert: React.FC<{ ); }; -const UnloadableScheduleDialog: React.FC = () => { +const UnloadableScheduleDialog = () => { const {data} = useQuery( UNLOADABLE_SCHEDULES_QUERY, ); diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensorsRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensorsRoot.tsx index 0b3367354a667..f6469fa95ca3b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensorsRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensorsRoot.tsx @@ -319,9 +319,7 @@ export const OverviewSensorsRoot = () => { ); }; -const UnloadableSensorsAlert: React.FC<{ - count: number; -}> = ({count}) => { +const UnloadableSensorsAlert = ({count}: {count: number}) => { const [isOpen, setIsOpen] = React.useState(false); if (!count) { @@ -368,7 +366,7 @@ const UnloadableSensorsAlert: React.FC<{ ); }; -const UnloadableSensorDialog: React.FC = () => { +const UnloadableSensorDialog = () => { const {data} = useQuery( UNLOADABLE_SENSORS_QUERY, ); diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTimelineRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTimelineRoot.tsx index fd08de196a5e4..c6de1d1b9be75 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTimelineRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTimelineRoot.tsx @@ -29,8 +29,8 @@ const hourWindowToOffset = (hourWindow: HourWindow) => { }; type Props = { - Header: React.FC<{refreshState: ReturnType}>; - TabButton: React.FC<{selected: 'timeline' | 'assets'}>; + Header: React.ComponentType<{refreshState: ReturnType}>; + TabButton: React.ComponentType<{selected: 'timeline' | 'assets'}>; }; export const OverviewTimelineRoot = ({Header, TabButton}: Props) => { useTrackPageView(); 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 fba81d6e3ccec..62f10f3f53c8e 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 @@ -24,11 +24,15 @@ import {GRID_FLOATING_CONTAINER_WIDTH} from './RunMatrixUtils'; import {allPartitionsRange} from './SpanRepresentation'; import {usePartitionStepQuery} from './usePartitionStepQuery'; -export const AssetJobPartitionsView: React.FC<{ +export const AssetJobPartitionsView = ({ + partitionSetName, + repoAddress, + pipelineName, +}: { pipelineName: string; partitionSetName: string; repoAddress: RepoAddress; -}> = ({partitionSetName, repoAddress, pipelineName}) => { +}) => { const {viewport, containerProps} = useViewport(); const repositorySelector = repoAddressToSelector(repoAddress); @@ -175,17 +179,7 @@ export const AssetJobPartitionsView: React.FC<{ ); }; -const AssetJobPartitionGraphs: React.FC<{ - repositorySelector: RepositorySelector; - pipelineName: string; - partitionSetName: string; - multidimensional: boolean; - dimensionName: string | null; - dimensionKeys: string[]; - selected: string[]; - pageSize: number; - offset: number; -}> = ({ +const AssetJobPartitionGraphs = ({ repositorySelector, dimensionKeys, dimensionName, @@ -195,6 +189,16 @@ const AssetJobPartitionGraphs: React.FC<{ multidimensional, pipelineName, offset, +}: { + repositorySelector: RepositorySelector; + pipelineName: string; + partitionSetName: string; + multidimensional: boolean; + dimensionName: string | null; + dimensionKeys: string[]; + selected: string[]; + pageSize: number; + offset: number; }) => { const partitions = usePartitionStepQuery({ partitionSetName, diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/BackfillMessaging.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/BackfillMessaging.tsx index db550b134fefb..f02c62d837980 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/BackfillMessaging.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/BackfillMessaging.tsx @@ -107,10 +107,11 @@ export const DAEMON_NOT_RUNNING_ALERT_INSTANCE_FRAGMENT = gql` } `; -export const DaemonNotRunningAlert: React.FC<{ +export const DaemonNotRunningAlert = ({ + instance, +}: { instance: DaemonNotRunningAlertInstanceFragment; -}> = ({instance}) => - !instance.daemonHealth.daemonStatus.healthy ? : null; +}) => (!instance.daemonHealth.daemonStatus.healthy ? : null); export const DaemonNotRunningAlertBody = () => ( = ({instance}) => +}) => instance.runLauncher?.name === DEFAULT_RUN_LAUNCHER_NAME && !instance.runQueuingSupported ? ( void; - onCancel?: () => void; - onSubmit: () => void; - repoAddress: RepoAddress; -}> = ({ +export const BackfillPartitionSelector = ({ partitionSetName, onLaunch, onCancel, @@ -72,6 +63,15 @@ export const BackfillPartitionSelector: React.FC<{ runStatusData, pipelineName, partitionNames, +}: { + partitionSetName: string; + partitionNames: string[]; + runStatusData: {[partitionName: string]: RunStatus}; + pipelineName: string; + onLaunch?: (backfillId: string, stepQuery: string) => void; + onCancel?: () => void; + onSubmit: () => void; + repoAddress: RepoAddress; }) => { const history = useHistory(); const [range, _setRange] = React.useState( @@ -326,17 +326,7 @@ export const BackfillPartitionSelector: React.FC<{ ); }; -const LaunchBackfillButton: React.FC<{ - partitionSetName: string; - partitionNames: string[]; - reexecutionSteps?: string[]; - fromFailure?: boolean; - tags?: PipelineRunTag[]; - onSuccess?: (backfillId: string, isPureAssetBackfill: boolean) => void; - onError: (data: LaunchPartitionBackfillMutation | null | undefined) => void; - onSubmit: () => void; - repoAddress: RepoAddress; -}> = ({ +const LaunchBackfillButton = ({ partitionSetName, partitionNames, reexecutionSteps, @@ -346,6 +336,16 @@ const LaunchBackfillButton: React.FC<{ onError, onSubmit, repoAddress, +}: { + partitionSetName: string; + partitionNames: string[]; + reexecutionSteps?: string[]; + fromFailure?: boolean; + tags?: PipelineRunTag[]; + onSuccess?: (backfillId: string, isPureAssetBackfill: boolean) => void; + onError: (data: LaunchPartitionBackfillMutation | null | undefined) => void; + onSubmit: () => void; + repoAddress: RepoAddress; }) => { const repositorySelector = repoAddressToSelector(repoAddress); const mounted = React.useRef(true); diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/DimensionRangeInput.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/DimensionRangeInput.tsx index e6bbe6eed3870..c83e2bad56213 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/DimensionRangeInput.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/DimensionRangeInput.tsx @@ -7,12 +7,17 @@ import {ClearButton} from '../ui/ClearButton'; import {partitionsToText, spanTextToSelectionsOrError} from './SpanRepresentation'; -export const DimensionRangeInput: React.FC<{ +export const DimensionRangeInput = ({ + value, + onChange, + partitionKeys, + isTimeseries, +}: { value: string[]; onChange: (partitionNames: string[]) => void; partitionKeys: string[]; isTimeseries: boolean; -}> = ({value, onChange, partitionKeys, isTimeseries}) => { +}) => { const [valueString, setValueString] = React.useState(''); const partitionNameJSON = React.useMemo(() => JSON.stringify(partitionKeys), [partitionKeys]); diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/DimensionRangeWizard.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/DimensionRangeWizard.tsx index 9e1541e901c48..979c97b8b369c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/DimensionRangeWizard.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/DimensionRangeWizard.tsx @@ -26,16 +26,7 @@ import {CreatePartitionDialog} from './CreatePartitionDialog'; import {DimensionRangeInput} from './DimensionRangeInput'; import {PartitionStatusHealthSource, PartitionStatus} from './PartitionStatus'; -export const DimensionRangeWizard: React.FC<{ - selected: string[]; - setSelected: (selected: string[]) => void; - partitionKeys: string[]; - health: PartitionStatusHealthSource; - dimensionType: PartitionDefinitionType; - partitionDefinitionName?: string | null; - repoAddress?: RepoAddress; - refetch?: () => Promise; -}> = ({ +export const DimensionRangeWizard = ({ selected, setSelected, partitionKeys, @@ -44,6 +35,15 @@ export const DimensionRangeWizard: React.FC<{ partitionDefinitionName, repoAddress, refetch, +}: { + selected: string[]; + setSelected: (selected: string[]) => void; + partitionKeys: string[]; + health: PartitionStatusHealthSource; + dimensionType: PartitionDefinitionType; + partitionDefinitionName?: string | null; + repoAddress?: RepoAddress; + refetch?: () => Promise; }) => { const isTimeseries = dimensionType === PartitionDefinitionType.TIME_WINDOW; const isDynamic = dimensionType === PartitionDefinitionType.DYNAMIC; @@ -126,20 +126,20 @@ export const DimensionRangeWizard: React.FC<{ ); }; -const OrdinalPartitionSelector: React.FC<{ - allPartitions: string[]; - selectedPartitions: string[]; - setSelectedPartitions: (tags: string[]) => void; - health: PartitionStatusHealthSource; - setShowCreatePartition: (show: boolean) => void; - isDynamic: boolean; -}> = ({ +const OrdinalPartitionSelector = ({ allPartitions, selectedPartitions, setSelectedPartitions, setShowCreatePartition, isDynamic, health, +}: { + allPartitions: string[]; + selectedPartitions: string[]; + setSelectedPartitions: (tags: string[]) => void; + health: PartitionStatusHealthSource; + setShowCreatePartition: (show: boolean) => void; + isDynamic: boolean; }) => { const dotForPartitionKey = React.useCallback( (partitionKey: string) => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/OpJobPartitionsView.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/OpJobPartitionsView.tsx index fc72a1b878360..4683a661d2f33 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/OpJobPartitionsView.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/OpJobPartitionsView.tsx @@ -37,10 +37,13 @@ import {usePartitionStepQuery} from './usePartitionStepQuery'; type PartitionStatus = OpJobPartitionStatusFragment; -export const OpJobPartitionsView: React.FC<{ +export const OpJobPartitionsView = ({ + partitionSetName, + repoAddress, +}: { partitionSetName: string; repoAddress: RepoAddress; -}> = ({partitionSetName, repoAddress}) => { +}) => { const repositorySelector = repoAddressToSelector(repoAddress); const {data, loading} = useQuery( PARTITIONS_STATUS_QUERY, @@ -138,11 +141,15 @@ export function usePartitionDurations(partitions: PartitionRuns[]) { }, [partitions]); } -export const OpJobPartitionsViewContent: React.FC<{ +export const OpJobPartitionsViewContent = ({ + partitionSet, + partitionNames, + repoAddress, +}: { partitionNames: string[]; partitionSet: OpJobPartitionSetFragment; repoAddress: RepoAddress; -}> = ({partitionSet, partitionNames, repoAddress}) => { +}) => { const { permissions: {canLaunchPartitionBackfill}, disabledReasons, @@ -369,10 +376,7 @@ export const OpJobPartitionsViewContent: React.FC<{ ); }; -export const CountBox: React.FC<{ - count: number; - label: string; -}> = ({count, label}) => ( +export const CountBox = ({count, label}: {count: number; label: string}) => (
{count} diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionRunList.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionRunList.tsx index 10cb36cb71d35..502dda8b849a2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionRunList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionRunList.tsx @@ -16,7 +16,7 @@ interface PartitionRunListProps { partitionName: string; } -export const PartitionRunList: React.FC = (props) => { +export const PartitionRunList = (props: PartitionRunListProps) => { const {data, loading} = useQuery( PARTITION_RUN_LIST_QUERY, { diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionRunStatusCheckboxes.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionRunStatusCheckboxes.tsx index e3304554494da..519ec5ace5e7d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionRunStatusCheckboxes.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionRunStatusCheckboxes.tsx @@ -19,13 +19,19 @@ export function countsByState(partitionKeysForCounts: {partitionKey: string; sta return result; } -export const PartitionRunStatusCheckboxes: React.FC<{ +export const PartitionRunStatusCheckboxes = ({ + counts, + value, + onChange, + allowed, + disabled, +}: { counts: {[status: string]: number}; value: RunStatus[]; allowed: RunStatus[]; onChange: (selected: RunStatus[]) => void; disabled?: boolean; -}> = ({counts, value, onChange, allowed, disabled}) => { +}) => { return ( {allowed.map((status) => ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionStatus.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionStatus.tsx index a00fc732c289e..bf4f38cac4645 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionStatus.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionStatus.tsx @@ -50,7 +50,7 @@ interface PartitionStatusProps { selectionWindowSize?: number; } -export const PartitionStatus: React.FC = ({ +export const PartitionStatus = ({ partitionNames, selected, onSelect, @@ -61,7 +61,7 @@ export const PartitionStatus: React.FC = ({ hideStatusTooltip, tooltipMessage, splitPartitions = false, -}) => { +}: PartitionStatusProps) => { const ref = React.useRef(null); const [currentSelectionRange, setCurrentSelectionRange] = React.useState< SelectionRange | undefined diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionStepStatus.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionStepStatus.tsx index 3474fa1365222..b714f1b7042f5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionStepStatus.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/PartitionStepStatus.tsx @@ -90,14 +90,21 @@ const timeboundsOfPartitions = (partitionColumns: {steps: {unix: number}[]}[]) = return [minUnix, maxUnix] as const; }; -export const PartitionPerAssetStatus: React.FC< - Omit & { - assetHealth: PartitionHealthData[]; - assetQueryItems: GraphQueryItem[]; - rangeDimensionIdx: number; - rangeDimension: PartitionHealthDimension; - } -> = ({assetHealth, rangeDimension, rangeDimensionIdx, assetQueryItems, ...rest}) => { +interface PartitionPerAssetStatusProps + extends Omit { + assetHealth: PartitionHealthData[]; + assetQueryItems: GraphQueryItem[]; + rangeDimensionIdx: number; + rangeDimension: PartitionHealthDimension; +} + +export const PartitionPerAssetStatus = ({ + assetHealth, + rangeDimension, + rangeDimensionIdx, + assetQueryItems, + ...rest +}: PartitionPerAssetStatusProps) => { const rangesByAssetKey: {[assetKey: string]: Range[]} = {}; for (const a of assetHealth) { if (a.dimensions[rangeDimensionIdx]?.name !== rangeDimension.name) { @@ -157,12 +164,18 @@ const assetPartitionStatusToSquareColor = (state: AssetPartitionStatus[]): Statu : 'MISSING'; }; -export const PartitionPerOpStatus: React.FC< - PartitionStepStatusBaseProps & { - repoAddress: RepoAddress; - partitions: PartitionRuns[]; - } -> = ({repoAddress, pipelineName, partitions, partitionNames, ...rest}) => { +interface PartitionPerOpStatusProps extends PartitionStepStatusBaseProps { + repoAddress: RepoAddress; + partitions: PartitionRuns[]; +} + +export const PartitionPerOpStatus = ({ + repoAddress, + pipelineName, + partitions, + partitionNames, + ...rest +}: PartitionPerOpStatusProps) => { // Retrieve the pipeline's structure const repositorySelector = repoAddressToSelector(repoAddress); const pipelineSelector = {...repositorySelector, pipelineName}; @@ -198,12 +211,12 @@ export const PartitionPerOpStatus: React.FC< ); }; -const PartitionStepStatus: React.FC< - PartitionStepStatusBaseProps & { - data: MatrixData; - showLatestRun: boolean; - } -> = (props) => { +interface PartitionStepStatusProps extends PartitionStepStatusBaseProps { + data: MatrixData; + showLatestRun: boolean; +} + +const PartitionStepStatus = (props: PartitionStepStatusProps) => { const {viewport, containerProps} = useViewport(); const [hovered, setHovered] = React.useState(null); const [focused, setFocused] = React.useState(null); @@ -419,7 +432,15 @@ const TOOLTIP_STYLE = JSON.stringify({ left: 10, }); -const PartitionSquare: React.FC<{ +const PartitionSquare = ({ + step, + runs, + runsLoaded, + hovered, + setHovered, + setFocused, + partitionName, +}: { step?: MatrixStep; runs: PartitionMatrixStepRunFragment[]; runsLoaded: boolean; @@ -429,7 +450,7 @@ const PartitionSquare: React.FC<{ partitionName: string; setHovered: (hovered: PartitionRunSelection | null) => void; setFocused: (hovered: PartitionRunSelection | null) => void; -}> = ({step, runs, runsLoaded, hovered, setHovered, setFocused, partitionName}) => { +}) => { const [opened, setOpened] = React.useState(false); let squareStatus; diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/PipelinePartitionsRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/PipelinePartitionsRoot.tsx index 8d215b15dd19c..0851e8f541772 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/PipelinePartitionsRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/PipelinePartitionsRoot.tsx @@ -16,7 +16,7 @@ interface Props { repoAddress: RepoAddress; } -export const PipelinePartitionsRoot: React.FC = (props) => { +export const PipelinePartitionsRoot = (props: Props) => { const {repoAddress} = props; const params = useParams<{pipelinePath: string}>(); const {pipelinePath} = params; diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/RunMatrixUtils.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/RunMatrixUtils.tsx index 6c9efdb53b106..5faa1421091f2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/RunMatrixUtils.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/RunMatrixUtils.tsx @@ -188,7 +188,7 @@ export function topLabelHeightForLabels(labels: string[]) { return (maxlength > 10 ? maxlength * 4.9 : 55) + TITLE_MARGIN_BOTTOM; } -export const TopLabelTilted: React.FC<{label: string; $height: number}> = ({label, $height}) => { +export const TopLabelTilted = ({label, $height}: {label: string; $height: number}) => { return (
{label}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/GraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/GraphExplorer.tsx index babf17893e4bc..bff6685ae22ee 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/GraphExplorer.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/GraphExplorer.tsx @@ -51,7 +51,7 @@ interface GraphExplorerProps { isGraph: boolean; } -export const GraphExplorer: React.FC = (props) => { +export const GraphExplorer = (props: GraphExplorerProps) => { const { getInvocations, handles, diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/GraphNotices.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/GraphNotices.tsx index 4ca06eb67240d..d812ce778c73a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/GraphNotices.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/GraphNotices.tsx @@ -32,9 +32,12 @@ export const LargeDAGNotice = ({ ); -export const EmptyDAGNotice: React.FC<{isGraph: boolean; nodeType: 'asset' | 'op'}> = ({ +export const EmptyDAGNotice = ({ isGraph, nodeType, +}: { + isGraph: boolean; + nodeType: 'asset' | 'op'; }) => { return ( @@ -52,7 +55,7 @@ export const EmptyDAGNotice: React.FC<{isGraph: boolean; nodeType: 'asset' | 'op ); }; -export const EntirelyFilteredDAGNotice: React.FC<{nodeType: 'asset' | 'op'}> = ({nodeType}) => { +export const EntirelyFilteredDAGNotice = ({nodeType}: {nodeType: 'asset' | 'op'}) => { return ( = ( ); }; -export const LoadingNotice: React.FC<{async: boolean; nodeType: 'asset' | 'op'}> = (props) => { +export const LoadingNotice = (props: {async: boolean; nodeType: 'asset' | 'op'}) => { const {async} = props; return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/NonIdealPipelineQueryResult.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/NonIdealPipelineQueryResult.tsx index a1d240227beb9..a803783551c48 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/NonIdealPipelineQueryResult.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/NonIdealPipelineQueryResult.tsx @@ -26,7 +26,7 @@ interface Props { }; } -export const NonIdealPipelineQueryResult: React.FC = ({isGraph, repoAddress, result}) => { +export const NonIdealPipelineQueryResult = ({isGraph, repoAddress, result}: Props) => { if (result.__typename === 'PipelineSnapshotNotFoundError') { return ( { ); }; -export const PipelineExplorerContainer: React.FC<{ - explorerPath: ExplorerPath; - onChangeExplorerPath: (path: ExplorerPath, mode: 'replace' | 'push') => void; - onNavigateToSourceAssetNode: (node: AssetLocation) => void; - repoAddress?: RepoAddress; - isGraph?: boolean; -}> = ({ +export const PipelineExplorerContainer = ({ explorerPath, repoAddress, onChangeExplorerPath, onNavigateToSourceAssetNode, isGraph = false, +}: { + explorerPath: ExplorerPath; + onChangeExplorerPath: (path: ExplorerPath, mode: 'replace' | 'push') => void; + onNavigateToSourceAssetNode: (node: AssetLocation) => void; + repoAddress?: RepoAddress; + isGraph?: boolean; }) => { const [options, setOptions] = React.useState({ explodeComposites: explorerPath.explodeComposites ?? false, diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineOrJobDisambiguationRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineOrJobDisambiguationRoot.tsx index c7b150a15e583..6f4e26a9eca58 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineOrJobDisambiguationRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineOrJobDisambiguationRoot.tsx @@ -10,7 +10,7 @@ interface Props { repoAddress: RepoAddress; } -export const PipelineOrJobDisambiguationRoot: React.FC = (props) => { +export const PipelineOrJobDisambiguationRoot = (props: Props) => { const {repoAddress} = props; const location = useLocation(); const {pipelinePath} = useParams<{pipelinePath: string}>(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineOverviewRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineOverviewRoot.tsx index b61055fc6b12c..08a7fe6d9bf65 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineOverviewRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineOverviewRoot.tsx @@ -22,7 +22,7 @@ interface Props { repoAddress: RepoAddress; } -export const PipelineOverviewRoot: React.FC = (props) => { +export const PipelineOverviewRoot = (props: Props) => { useTrackPageView(); const {repoAddress} = props; diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelinePathUtils.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelinePathUtils.tsx index e3ac08a0d5594..303b0431bf4d5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelinePathUtils.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelinePathUtils.tsx @@ -74,11 +74,11 @@ export function getPipelineSnapshotLink(pipelineName: string, snapshotId: string })}`; } -export const PipelineSnapshotLink: React.FC<{ +export const PipelineSnapshotLink = (props: { pipelineName: string; snapshotId: string; size: 'small' | 'normal'; -}> = (props) => { +}) => { const snapshotLink = getPipelineSnapshotLink(props.pipelineName, props.snapshotId); return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineReference.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineReference.tsx index a7845e1e8468f..4ee0505e895c9 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineReference.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineReference.tsx @@ -20,7 +20,7 @@ export interface Props { const DEFAULT_TRUNCATION_THRESHOLD = 40; const TRUNCATION_BUFFER = 5; -export const PipelineReference: React.FC = ({ +export const PipelineReference = ({ pipelineName, pipelineHrefContext, isJob, @@ -28,7 +28,7 @@ export const PipelineReference: React.FC = ({ showIcon, truncationThreshold = DEFAULT_TRUNCATION_THRESHOLD, size = 'normal', -}) => { +}: Props) => { const truncatedName = truncationThreshold > 0 && pipelineName.length > truncationThreshold ? `${pipelineName.slice(0, truncationThreshold - TRUNCATION_BUFFER)}…` diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineRoot.tsx index 9adc1cfe7a0cf..7cdc8e84785bf 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineRoot.tsx @@ -16,7 +16,7 @@ interface Props { repoAddress: RepoAddress; } -export const PipelineRoot: React.FC = (props) => { +export const PipelineRoot = (props: Props) => { const {repoAddress} = props; const {FallthroughRoute} = React.useContext(JobFeatureContext); diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineRunsRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineRunsRoot.tsx index d74bfd5336a88..775172f74fc7f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineRunsRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineRunsRoot.tsx @@ -58,7 +58,7 @@ interface Props { repoAddress?: RepoAddress; } -export const PipelineRunsRoot: React.FC = (props) => { +export const PipelineRunsRoot = (props: Props) => { useTrackPageView(); const {pipelinePath} = useParams<{pipelinePath: string}>(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarComponents.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarComponents.tsx index 6ebf40760e278..226789b8d1710 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarComponents.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarComponents.tsx @@ -12,7 +12,7 @@ interface ISidebarSectionProps { collapsedByDefault?: boolean; } -export const SidebarSection: React.FC = (props) => { +export const SidebarSection = (props: ISidebarSectionProps) => { const {title, collapsedByDefault, children} = props; const [open, setOpen] = useStateWithStorage(`sidebar-${title}`, (storedValue) => storedValue === true || storedValue === false ? storedValue : !collapsedByDefault, diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarContainerOverview.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarContainerOverview.tsx index 0dfe9c61c6384..16aa542eb9d69 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarContainerOverview.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarContainerOverview.tsx @@ -16,10 +16,13 @@ import { } from './SidebarResourcesSection'; import {SidebarRootContainerFragment} from './types/SidebarContainerOverview.types'; -export const SidebarContainerOverview: React.FC<{ +export const SidebarContainerOverview = ({ + container, + repoAddress, +}: { container: SidebarRootContainerFragment; repoAddress?: RepoAddress; -}> = ({container, repoAddress}) => { +}) => { const {options} = useRepositoryOptions(); // Determine if the pipeline or job snapshot is tied to a legacy pipeline. This is annoying diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOp.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOp.tsx index 691ef0c49e9cd..0cd6cdf6e947b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOp.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOp.tsx @@ -87,7 +87,7 @@ const useSidebarOpQuery = ( }; }; -export const SidebarOp: React.FC = ({ +export const SidebarOp = ({ handleID, explorerPath, getInvocations, @@ -96,7 +96,7 @@ export const SidebarOp: React.FC = ({ onClickOp, repoAddress, isGraph, -}) => { +}: SidebarOpProps) => { const {error, solidContainer, isLoading} = useSidebarOpQuery( explorerPath.pipelineName, handleID, diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpDefinition.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpDefinition.tsx index a6820486885dd..1a8b3605efa88 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpDefinition.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpDefinition.tsx @@ -44,7 +44,7 @@ interface SidebarOpDefinitionProps { const DEFAULT_INVOCATIONS_SHOWN = 20; -export const SidebarOpDefinition: React.FC = (props) => { +export const SidebarOpDefinition = (props: SidebarOpDefinitionProps) => { const {definition, getInvocations, showingSubgraph, onClickInvocation, repoAddress} = props; const Plugin = pluginForMetadata(definition.metadata); @@ -265,10 +265,13 @@ export const SIDEBAR_OP_DEFINITION_FRAGMENT = gql` ${OP_TYPE_SIGNATURE_FRAGMENT} `; -const InvocationList: React.FC<{ +const InvocationList = ({ + invocations, + onClickInvocation, +}: { invocations: SidebarOpInvocationInfo[]; onClickInvocation: (arg: SidebarOpInvocationInfo) => void; -}> = ({invocations, onClickInvocation}) => { +}) => { const [showAll, setShowAll] = React.useState(false); const visible = invocations.filter((i) => !isHiddenAssetGroupJob(i.pipelineName || '')); const clipped = showAll ? visible : visible.slice(0, DEFAULT_INVOCATIONS_SHOWN); diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpExecutionGraphs.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpExecutionGraphs.tsx index 2a4820c5b1215..92e8bd0a292ac 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpExecutionGraphs.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpExecutionGraphs.tsx @@ -21,12 +21,17 @@ const StateColors = { IN_PROGRESS: Colors.Gray200, }; -export const SidebarOpExecutionGraphs: React.FC<{ +export const SidebarOpExecutionGraphs = ({ + repoAddress, + handleID, + pipelineName, + solidName, +}: { handleID: string; solidName: string; pipelineName: string; repoAddress: RepoAddress; -}> = ({repoAddress, handleID, pipelineName, solidName}) => { +}) => { const [highlightedStartTime, setHighlightedStartTime] = React.useState(null); const result = useQuery( SIDEBAR_OP_GRAPHS_QUERY, diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpHelpers.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpHelpers.tsx index 43330694d55ed..debfda31f4075 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpHelpers.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpHelpers.tsx @@ -92,7 +92,7 @@ interface DependencyHeaderRowProps { style?: React.CSSProperties; } -export const DependencyHeaderRow: React.FC = ({label, ...rest}) => ( +export const DependencyHeaderRow = ({label, ...rest}: DependencyHeaderRowProps) => (
{label} diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpInvocation.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpInvocation.tsx index c7a0834e1cfdb..f1bb0ecb35d41 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpInvocation.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarOpInvocation.tsx @@ -15,7 +15,7 @@ interface ISidebarOpInvocationProps { onEnterSubgraph?: (arg: OpNameOrPath) => void; } -export const SidebarOpInvocation: React.FC = (props) => { +export const SidebarOpInvocation = (props: ISidebarOpInvocationProps) => { const {solid, onEnterSubgraph} = props; const showInputs = solid.inputs.some((o) => o.dependsOn.length); const showOutputs = solid.outputs.some((o) => o.dependedBy.length); diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarResourcesSection.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarResourcesSection.tsx index ba2024573cc01..bb0cdc8486e78 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarResourcesSection.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarResourcesSection.tsx @@ -11,10 +11,13 @@ import {SidebarResourcesSectionFragment} from './types/SidebarResourcesSection.t const NO_DESCRIPTION = ''; -export const SidebarResourcesSection: React.FC<{ +export const SidebarResourcesSection = ({ + mode, + showModeName, +}: { mode: SidebarResourcesSectionFragment; showModeName?: boolean; -}> = ({mode, showModeName}) => { +}) => { return ( {showModeName && ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarRoot.tsx index 707a06da97b16..4795a69e7f93d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarRoot.tsx @@ -34,7 +34,7 @@ interface SidebarRootProps { repoAddress?: RepoAddress; } -export const SidebarRoot: React.FC = (props) => { +export const SidebarRoot = (props: SidebarRootProps) => { const { tab, typeName, diff --git a/js_modules/dagster-ui/packages/ui-core/src/plugins/generic.tsx b/js_modules/dagster-ui/packages/ui-core/src/plugins/generic.tsx index 8f6741f4e7db1..1d86a78bd48f3 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/plugins/generic.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/plugins/generic.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import {IPluginSidebarProps} from '../plugins'; -export const SidebarComponent: React.FC = (props) => { +export const SidebarComponent = (props: IPluginSidebarProps) => { const [open, setOpen] = React.useState(false); React.useEffect(() => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/plugins/index.ts b/js_modules/dagster-ui/packages/ui-core/src/plugins/index.ts index 3d854fd7086d8..86611052bb24c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/plugins/index.ts +++ b/js_modules/dagster-ui/packages/ui-core/src/plugins/index.ts @@ -22,7 +22,7 @@ export interface IPluginSidebarProps { } interface IPluginInterface { - SidebarComponent: React.ComponentClass | React.FC; + SidebarComponent: React.ComponentType; } export function pluginForMetadata( diff --git a/js_modules/dagster-ui/packages/ui-core/src/plugins/ipynb.tsx b/js_modules/dagster-ui/packages/ui-core/src/plugins/ipynb.tsx index 7aaada542698d..66468dfec2e1f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/plugins/ipynb.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/plugins/ipynb.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import {IPluginSidebarProps} from '../plugins'; import {NotebookButton} from '../ui/NotebookButton'; -export const SidebarComponent: React.FC = (props) => { +export const SidebarComponent = (props: IPluginSidebarProps) => { const metadata = props.definition.metadata; const notebookPath = metadata.find((m) => m.key === 'notebook_path'); const repoLocName = props.repoAddress?.location; diff --git a/js_modules/dagster-ui/packages/ui-core/src/plugins/sql.tsx b/js_modules/dagster-ui/packages/ui-core/src/plugins/sql.tsx index 394687035e1c7..c8d3414f443fb 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/plugins/sql.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/plugins/sql.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import {IPluginSidebarProps} from '../plugins'; -export const SidebarComponent: React.FC = (props) => { +export const SidebarComponent = (props: IPluginSidebarProps) => { const [open, setOpen] = React.useState(false); React.useEffect(() => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/resources/ResourceRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/resources/ResourceRoot.tsx index cd16689485c72..689e856eed06d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/resources/ResourceRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/resources/ResourceRoot.tsx @@ -80,7 +80,7 @@ const SectionHeader = (props: {children: React.ReactNode}) => { ); }; -export const ResourceRoot: React.FC = (props) => { +export const ResourceRoot = (props: Props) => { useTrackPageView(); const {repoAddress} = props; @@ -222,10 +222,10 @@ export const ResourceRoot: React.FC = (props) => { ); }; -const ResourceConfig: React.FC<{ +const ResourceConfig = (props: { resourceDetails: ResourceDetailsFragment; repoAddress: RepoAddress; -}> = (props) => { +}) => { const {resourceDetails, repoAddress} = props; const configuredValues = Object.fromEntries( @@ -342,11 +342,11 @@ const ResourceConfig: React.FC<{ ); }; -const ResourceUses: React.FC<{ +const ResourceUses = (props: { resourceDetails: ResourceDetailsFragment; repoAddress: RepoAddress; numUses: number; -}> = (props) => { +}) => { const {resourceDetails, repoAddress, numUses} = props; if (numUses === 0) { @@ -558,11 +558,7 @@ const ResourceUses: React.FC<{ ); }; -const ResourceEntry: React.FC<{ - name: string; - url?: string; - description?: string; -}> = (props) => { +const ResourceEntry = (props: {name: string; url?: string; description?: string}) => { const {url, name, description} = props; return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/resources/ResourceTabs.tsx b/js_modules/dagster-ui/packages/ui-core/src/resources/ResourceTabs.tsx index bb5b90d3ad4d8..297f8645dc3b2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/resources/ResourceTabs.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/resources/ResourceTabs.tsx @@ -11,11 +11,11 @@ const titles: {[key: string]: string} = { uses: 'Uses', }; -export const ResourceTabs: React.FC<{ +export const ResourceTabs = (props: { repoAddress: RepoAddress; resourceName: string; numUses: number; -}> = (props) => { +}) => { const {repoAddress, resourceName, numUses} = props; const match = useRouteMatch<{tab?: string; selector: string}>([ diff --git a/js_modules/dagster-ui/packages/ui-core/src/resources/VirtualizedResourceTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/resources/VirtualizedResourceTable.tsx index 45dcbbb5ccab4..e592168f1fbde 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/resources/VirtualizedResourceTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/resources/VirtualizedResourceTable.tsx @@ -12,7 +12,7 @@ interface Props { resources: ResourceEntryFragment[]; } -export const VirtualizedResourceTable: React.FC = ({repoAddress, resources}) => { +export const VirtualizedResourceTable = ({repoAddress, resources}: Props) => { const parentRef = React.useRef(null); const rowVirtualizer = useVirtualizer({ diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/AssetTagCollections.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/AssetTagCollections.tsx index b1afbaf3f1d5f..d73a98b744974 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/AssetTagCollections.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/AssetTagCollections.tsx @@ -67,11 +67,14 @@ function useShowMoreDialog( return {dialog, showMore, setShowMore}; } -export const AssetKeyTagCollection: React.FC<{ +interface AssetKeyTagCollectionProps { assetKeys: AssetKey[] | null; dialogTitle?: string; useTags?: boolean; -}> = React.memo(({assetKeys, useTags, dialogTitle = 'Assets in run'}) => { +} + +export const AssetKeyTagCollection = React.memo((props: AssetKeyTagCollectionProps) => { + const {assetKeys, useTags, dialogTitle = 'Assets in run'} = props; const {setShowMore, dialog} = useShowMoreDialog(dialogTitle, assetKeys, renderItemAssetKey); if (!assetKeys || !assetKeys.length) { @@ -154,11 +157,14 @@ export const AssetKeyTagCollection: React.FC<{ type Check = {name: string; assetKey: AssetKey}; -export const AssetCheckTagCollection: React.FC<{ +interface AssetCheckTagCollectionProps { assetChecks: Check[] | null; dialogTitle?: string; useTags?: boolean; -}> = React.memo(({assetChecks, useTags, dialogTitle = 'Asset checks in run'}) => { +} + +export const AssetCheckTagCollection = React.memo((props: AssetCheckTagCollectionProps) => { + const {assetChecks, useTags, dialogTitle = 'Asset checks in run'} = props; const {setShowMore, dialog} = useShowMoreDialog(dialogTitle, assetChecks, renderItemAssetCheck); if (!assetChecks || !assetChecks.length) { diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/CapturedLogPanel.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/CapturedLogPanel.tsx index 062b29632388a..1bce7c38b1707 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/CapturedLogPanel.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/CapturedLogPanel.tsx @@ -27,8 +27,8 @@ interface CapturedOrExternalLogPanelProps extends CapturedLogProps { logCaptureInfo?: ILogCaptureInfo; } -export const CapturedOrExternalLogPanel: React.FC = React.memo( - ({logCaptureInfo, ...props}) => { +export const CapturedOrExternalLogPanel = React.memo( + ({logCaptureInfo, ...props}: CapturedOrExternalLogPanelProps) => { const externalUrl = logCaptureInfo && (props.visibleIOType === 'stdout' @@ -125,10 +125,13 @@ const initialState: State = { isLoading: true, }; -const CapturedLogSubscription: React.FC<{ +interface CapturedLogSubscriptionProps { logKey: string[]; onLogData: (logData: CapturedLogFragment) => void; -}> = React.memo(({logKey, onLogData}) => { +} + +const CapturedLogSubscription = React.memo((props: CapturedLogSubscriptionProps) => { + const {logKey, onLogData} = props; useSubscription( CAPTURED_LOGS_SUBSCRIPTION, { @@ -238,8 +241,8 @@ const CAPTURED_LOGS_QUERY = gql` } `; -const CapturedLogPanel: React.FC = React.memo( - ({logKey, visibleIOType, onSetDownloadUrl}) => { +const CapturedLogPanel = React.memo( + ({logKey, visibleIOType, onSetDownloadUrl}: CapturedLogProps) => { const {rootServerURI} = React.useContext(AppContext); const {availability, disabled} = React.useContext(WebSocketContext); const queryResult = useQuery( diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/ComputeLogPanel.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/ComputeLogPanel.tsx index d0fe7924d449a..aa23cc886f7ad 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/ComputeLogPanel.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/ComputeLogPanel.tsx @@ -16,7 +16,7 @@ interface ComputeLogPanelMaybeKeyProps extends ComputeLogPanelProps { computeLogFileKey?: string; } -export const ComputeLogPanel: React.FC = (props) => { +export const ComputeLogPanel = (props: ComputeLogPanelMaybeKeyProps) => { const {runId, computeLogFileKey, ioType, setComputeLogUrl} = props; if (!computeLogFileKey) { @@ -52,7 +52,7 @@ const resolveDownloadUrl = (rootServerURI: string, downloadUrl: string | null) = return isRelativeUrl(downloadUrl) ? rootServerURI + downloadUrl : downloadUrl; }; -const ComputeLogsPanelWithKey: React.FC = React.memo((props) => { +const ComputeLogsPanelWithKey = React.memo((props: ComputeLogPanelWithKeyProps) => { const {runId, computeLogFileKey, ioType, setComputeLogUrl} = props; const {rootServerURI} = React.useContext(AppContext); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/LogFilterSelect.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/LogFilterSelect.tsx index 8fbae0c3af4af..d122e06e9d0ef 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/LogFilterSelect.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/LogFilterSelect.tsx @@ -25,7 +25,7 @@ interface Props { onSetFilter: (level: LogLevel, enabled: boolean) => void; } -export const LogFilterSelect: React.FC = ({options, onSetFilter}) => { +export const LogFilterSelect = ({options, onSetFilter}: Props) => { const [showMenu, setShowMenu] = React.useState(false); const levels = Object.keys(options); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsFilterInput.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsFilterInput.tsx index 66d5f05ade989..14035b1d5e467 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsFilterInput.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsFilterInput.tsx @@ -56,7 +56,7 @@ const fuseOptions = { threshold: 0.3, }; -export const LogsFilterInput: React.FC = (props) => { +export const LogsFilterInput = (props: Props) => { const {value, onChange, suggestionProviders} = props; const [state, dispatch] = React.useReducer(reducer, initialState); @@ -197,11 +197,11 @@ export const LogsFilterInput: React.FC = (props) => { ); }; -const ResultItem: React.FC<{ +const ResultItem = (props: { suggestion: string; isHighlight: boolean; onSelect: (suggestion: string) => void; -}> = (props) => { +}) => { const {suggestion, isHighlight, onSelect} = props; const element = React.useRef(null); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsProvider.tsx index 60ea4858cdc26..ab3e4c57f1d58 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsProvider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsProvider.tsx @@ -265,7 +265,7 @@ interface LogsProviderProps { children: (result: LogsProviderLogs) => React.ReactChild; } -const LogsProviderWithSubscription: React.FC = (props) => { +const LogsProviderWithSubscription = (props: LogsProviderProps) => { const state = useLogsProviderWithSubscription(props.runId); return ( <> @@ -335,7 +335,7 @@ const LogsProviderWithQuery = (props: LogsProviderWithQueryProps) => { ); }; -export const LogsProvider: React.FC = (props) => { +export const LogsProvider = (props: LogsProviderProps) => { const {children, runId} = props; const {availability, disabled} = React.useContext(WebSocketContext); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRow.tsx index 00ab72fb5f1ef..7876c7269bb52 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRow.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRow.tsx @@ -210,11 +210,14 @@ export const LOGS_ROW_STRUCTURED_FRAGMENT = gql` ${PYTHON_ERROR_FRAGMENT} `; -const StructuredMemoizedContent: React.FC<{ +interface StructuredMemoizedContentProps { node: LogsRowStructuredFragment; metadata: IRunMetadataDict; highlighted: boolean; -}> = React.memo(({node, metadata, highlighted}) => { +} + +const StructuredMemoizedContent = React.memo((props: StructuredMemoizedContentProps) => { + const {node, metadata, highlighted} = props; const stepKey = node.stepKey; const step = stepKey ? metadata.steps[stepKey] : null; const stepStartTime = step?.start; @@ -295,11 +298,14 @@ export const LOGS_ROW_UNSTRUCTURED_FRAGMENT = gql` } `; -const UnstructuredMemoizedContent: React.FC<{ +interface UnstructuredMemoizedContentProps { node: LogsRowUnstructuredFragment; metadata: IRunMetadataDict; highlighted: boolean; -}> = React.memo(({node, highlighted, metadata}) => { +} + +const UnstructuredMemoizedContent = React.memo((props: UnstructuredMemoizedContentProps) => { + const {node, highlighted, metadata} = props; const stepKey = node.stepKey; const step = stepKey ? metadata.steps[stepKey] : null; const stepStartTime = step?.start; diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowComponents.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowComponents.tsx index 53169361781d7..81543a407e26e 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowComponents.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowComponents.tsx @@ -133,11 +133,13 @@ const fractionalSecondFormat = memoize((locale: string) => { // Timestamp Column -export const TimestampColumn: React.FC<{ +interface TimestampColumnProps { time: string | null; runStartTime?: number; stepStartTime?: number; -}> = React.memo((props) => { +} + +export const TimestampColumn = React.memo((props: TimestampColumnProps) => { const {time, runStartTime, stepStartTime} = props; const location = useLocation(); const widths = React.useContext(ColumnWidthsContext); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowStructuredContent.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowStructuredContent.tsx index 04e5004ec1c45..d64a2ab4c396f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowStructuredContent.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowStructuredContent.tsx @@ -34,7 +34,7 @@ interface IStructuredContentProps { metadata: IRunMetadataDict; } -export const LogsRowStructuredContent: React.FC = ({node, metadata}) => { +export const LogsRowStructuredContent = ({node, metadata}: IStructuredContentProps) => { const location = useLocation(); const eventType = node.eventType as string; switch (node.__typename) { @@ -263,14 +263,20 @@ export const LogsRowStructuredContent: React.FC = ({nod // Structured Content Renderers -const DefaultContent: React.FC<{ +const DefaultContent = ({ + message, + eventType, + eventColor, + eventIntent, + children, +}: { message: string; eventType?: string; eventColor?: string; eventIntent?: Intent; metadataEntries?: MetadataEntryFragment[]; children?: React.ReactElement; -}> = ({message, eventType, eventColor, eventIntent, children}) => { +}) => { return ( <> @@ -301,13 +307,19 @@ const DefaultContent: React.FC<{ ); }; -const FailureContent: React.FC<{ +const FailureContent = ({ + message, + error, + errorSource, + eventType, + metadataEntries, +}: { message?: string; eventType: string; error?: PythonErrorFragment | null; errorSource?: ErrorSource | null; metadataEntries?: MetadataEntryFragment[]; -}> = ({message, error, errorSource, eventType, metadataEntries}) => { +}) => { let contextMessage = null; let errorMessage = null; let errorStack = null; @@ -367,10 +379,13 @@ const FailureContent: React.FC<{ ); }; -const StepUpForRetryContent: React.FC<{ +const StepUpForRetryContent = ({ + message, + error, +}: { message?: string; error?: PythonErrorFragment | null; -}> = ({message, error}) => { +}) => { let contextMessage = null; let errorCause = null; let errorMessage = null; @@ -427,10 +442,13 @@ const StepUpForRetryContent: React.FC<{ ); }; -const AssetCheckEvaluationContent: React.FC<{ +const AssetCheckEvaluationContent = ({ + node, + eventType, +}: { node: LogsRowStructuredFragment_AssetCheckEvaluationEvent_; eventType: string; -}> = ({node, eventType}) => { +}) => { const {checkName, success, metadataEntries, targetMaterialization, assetKey} = node.evaluation; const checkLink = assetDetailsPathForAssetCheck({assetKey, name: checkName}); @@ -457,13 +475,19 @@ const AssetCheckEvaluationContent: React.FC<{ ); }; -const AssetMetadataContent: React.FC<{ +const AssetMetadataContent = ({ + message, + assetKey, + metadataEntries, + eventType, + timestamp, +}: { message: string; assetKey: AssetKey | null; metadataEntries: MetadataEntryFragment[]; eventType: string; timestamp: string; -}> = ({message, assetKey, metadataEntries, eventType, timestamp}) => { +}) => { if (!assetKey) { return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsScrollingTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsScrollingTable.tsx index a0f7daec5ec66..eaff7cb502604 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsScrollingTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsScrollingTable.tsx @@ -104,7 +104,7 @@ function filterLogs(logs: LogsProviderLogs, filter: LogFilter, filterStepKeys: s }; } -export const LogsScrollingTable: React.FC = (props) => { +export const LogsScrollingTable = (props: ILogsScrollingTableProps) => { const {filterKey, filterStepKeys, metadata, filter, logs} = props; const table = React.useRef(null); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsToolbar.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsToolbar.tsx index 00bef96c81690..a39042fce02ec 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsToolbar.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsToolbar.tsx @@ -54,7 +54,7 @@ interface WithExpandCollapseProps extends ILogsToolbarProps { const logQueryToString = (logQuery: LogFilterValue[]) => logQuery.map(({token, value}) => (token ? `${token}:${value}` : value)).join(' '); -export const LogsToolbar: React.FC = (props) => { +export const LogsToolbar = (props: ILogsToolbarProps | WithExpandCollapseProps) => { const { steps, metadata, diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/QueuedRunsBanners.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/QueuedRunsBanners.tsx index 4f9480e32c9a0..09b6813afe99e 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/QueuedRunsBanners.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/QueuedRunsBanners.tsx @@ -11,7 +11,7 @@ import { QueueDaemonStatusQueryVariables, } from './types/QueuedRunsBanners.types'; -export const QueuedRunsBanners: React.FC = () => { +export const QueuedRunsBanners = () => { const canSeeConfig = useCanSeeConfig(); return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RawLogContent.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RawLogContent.tsx index f0110331e79c5..9408e50d04573 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RawLogContent.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RawLogContent.tsx @@ -7,13 +7,16 @@ const MAX_STREAMING_LOG_BYTES = 5242880; // 5 MB const TRUNCATE_PREFIX = '\u001b[33m...logs truncated...\u001b[39m\n'; const SCROLLER_LINK_TIMEOUT_MS = 3000; -export const RawLogContent: React.FC<{ +interface Props { logData: string | null; isLoading: boolean; isVisible: boolean; downloadUrl?: string | null; location?: string; -}> = React.memo(({logData, location, isLoading, isVisible, downloadUrl}) => { +} + +export const RawLogContent = React.memo((props: Props) => { + const {logData, location, isLoading, isVisible, downloadUrl} = props; const contentContainer = React.useRef(null); const timer = React.useRef(); const [showScrollToTop, setShowScrollToTop] = React.useState(false); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/Run.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/Run.tsx index 4d7ff349122b7..63ba6d8324e4b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/Run.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/Run.tsx @@ -57,7 +57,7 @@ const runStatusFavicon = (status: RunStatus) => { } }; -export const Run: React.FC = (props) => { +export const Run = (props: RunProps) => { const {run, runId} = props; const [logsFilter, setLogsFilter] = useQueryPersistedLogFilter(); const [selectionQuery, setSelectionQuery] = useQueryPersistedState({ @@ -156,7 +156,7 @@ const logTypeFromQuery = (queryLogType: string) => { * We could revisit this in the future but I believe we iterated quite a bit to get to this * solution and we should avoid locking the two filter inputs together completely. */ -const RunWithData: React.FC = ({ +const RunWithData = ({ run, runId, logs, @@ -165,7 +165,7 @@ const RunWithData: React.FC = ({ selectionQuery, onSetLogsFilter, onSetSelectionQuery, -}) => { +}: RunWithDataProps) => { const [queryLogType, setQueryLogType] = useQueryPersistedState({ queryKey: 'logType', defaults: {logType: LogType.structured}, diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionButtons.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionButtons.tsx index dd14defbcc22b..c4f7f6c07c059 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionButtons.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionButtons.tsx @@ -25,7 +25,7 @@ interface RunActionButtonsProps { metadata: IRunMetadataDict; } -export const CancelRunButton: React.FC<{run: RunFragment}> = ({run}) => { +export const CancelRunButton = ({run}: {run: RunFragment}) => { const {id: runId, canTerminate} = run; const [showDialog, setShowDialog] = React.useState(false); const closeDialog = React.useCallback(() => setShowDialog(false), []); @@ -103,7 +103,7 @@ export const canRunAllSteps = (run: RunFragment) => doneStatuses.has(run.status) export const canRunFromFailure = (run: RunFragment) => run.executionPlan && failedStatuses.has(run.status); -export const RunActionButtons: React.FC = (props) => { +export const RunActionButtons = (props: RunActionButtonsProps) => { const {metadata, graph, run} = props; const repoMatch = useRepositoryForRunWithParentSnapshot(run); @@ -260,7 +260,7 @@ export const RunActionButtons: React.FC = (props) => { ); }; -const StepSelectionDescription: React.FC<{selection: StepSelection | null}> = ({selection}) => ( +const StepSelectionDescription = ({selection}: {selection: StepSelection | null}) => (
{(selection?.keys || []).map((step) => ( {`* ${step}`} diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionsMenu.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionsMenu.tsx index 6d11a086c2a72..f197d4ba9d724 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionsMenu.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunActionsMenu.tsx @@ -306,10 +306,13 @@ export const RunActionsMenu = React.memo(({run, onAddTag, additionalActionsForRu ); }); -export const RunBulkActionsMenu: React.FC<{ +interface RunBulkActionsMenuProps { selected: RunTableRunFragment[]; clearSelection: () => void; -}> = React.memo(({selected, clearSelection}) => { +} + +export const RunBulkActionsMenu = React.memo((props: RunBulkActionsMenuProps) => { + const {selected, clearSelection} = props; const {refetch} = React.useContext(RunsQueryRefetchContext); const [visibleDialog, setVisibleDialog] = React.useState< 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 8a88dc2abf553..2ed023b0b9ed2 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 @@ -39,7 +39,7 @@ import {RunFragment} from './types/RunFragments.types'; type VisibleDialog = 'config' | 'delete' | 'terminate' | 'free_slots' | null; -export const RunConfigDialog: React.FC<{run: RunFragment; isJob: boolean}> = ({run, isJob}) => { +export const RunConfigDialog = ({run, isJob}: {run: RunFragment; isJob: boolean}) => { const {runConfigYaml} = run; const {flagInstanceConcurrencyLimits} = useFeatureFlags(); const [visibleDialog, setVisibleDialog] = React.useState(null); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunMetadataProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunMetadataProvider.tsx index ccdf38612351f..1b66258d52c20 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunMetadataProvider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunMetadataProvider.tsx @@ -368,7 +368,7 @@ interface IRunMetadataProviderProps { children: (metadata: IRunMetadataDict) => React.ReactElement; } -export const RunMetadataProvider: React.FC = ({logs, children}) => { +export const RunMetadataProvider = ({logs, children}: IRunMetadataProviderProps) => { const run = React.useContext(RunContext); const runMetadata = React.useMemo(() => extractMetadataFromRun(run), [run]); const metadata = React.useMemo( diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunRoot.tsx index d5d198029a092..2594a601fbc75 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunRoot.tsx @@ -121,7 +121,7 @@ export const RunRoot = () => { // eslint-disable-next-line import/no-default-export export default RunRoot; -const RunById: React.FC<{data: RunRootQuery | undefined; runId: string}> = (props) => { +const RunById = (props: {data: RunRootQuery | undefined; runId: string}) => { const {data, runId} = props; if (!data || !data.pipelineRunOrError) { diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusDots.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusDots.tsx index b22882cd8b590..3a09f8060a0e4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusDots.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusDots.tsx @@ -8,8 +8,13 @@ import {RunStats} from './RunStats'; import {RUN_STATUS_COLORS} from './RunStatusTag'; import {inProgressStatuses, queuedStatuses} from './RunStatuses'; -export const RunStatusWithStats: React.FC = React.memo( - ({runId, ...rest}) => ( +export const RunStatusWithStats = React.memo( + ({ + runId, + ...rest + }: RunStatusProps & { + runId: string; + }) => ( = React.memo(({status, size}) => { +export const RunStatusIndicator = React.memo(({status, size}: RunStatusProps) => { if (status === 'STARTED' || status === 'CANCELING') { return ; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTable.tsx index 65e3060e6fe8e..79cd9d0e69635 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTable.tsx @@ -249,17 +249,7 @@ export const RUN_TABLE_RUN_FRAGMENT = gql` ${RUN_TAGS_FRAGMENT} `; -const RunRow: React.FC<{ - run: RunTableRunFragment; - canTerminateOrDelete: boolean; - onAddTag?: (token: RunFilterToken) => void; - checked?: boolean; - onToggleChecked?: (values: {checked: boolean; shiftKey: boolean}) => void; - additionalColumns?: React.ReactNode[]; - additionalActionsForRun?: (run: RunTableRunFragment) => React.ReactNode[]; - isHighlighted?: boolean; - hideCreatedBy?: boolean; -}> = ({ +const RunRow = ({ run, canTerminateOrDelete, onAddTag, @@ -269,6 +259,16 @@ const RunRow: React.FC<{ additionalActionsForRun, isHighlighted, hideCreatedBy, +}: { + run: RunTableRunFragment; + canTerminateOrDelete: boolean; + onAddTag?: (token: RunFilterToken) => void; + checked?: boolean; + onToggleChecked?: (values: {checked: boolean; shiftKey: boolean}) => void; + additionalColumns?: React.ReactNode[]; + additionalActionsForRun?: (run: RunTableRunFragment) => React.ReactNode[]; + isHighlighted?: boolean; + hideCreatedBy?: boolean; }) => { const {pipelineName} = run; const repo = useRepositoryForRunWithoutSnapshot(run); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTags.tsx index 6640c0a932927..3b41409083426 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTags.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTags.tsx @@ -21,12 +21,15 @@ const canAddTagToFilter = (key: string) => { return key !== DagsterTag.SolidSelection && key !== DagsterTag.OpSelection && key !== 'mode'; }; -export const RunTags: React.FC<{ +interface Props { tags: TagType[]; mode?: string | null; onAddTag?: (token: RunFilterToken) => void; onToggleTagPin?: (key: string) => void; -}> = React.memo(({tags, onAddTag, onToggleTagPin, mode}) => { +} + +export const RunTags = React.memo((props: Props) => { + const {tags, onAddTag, onToggleTagPin, mode} = props; const copy = useCopyToClipboard(); const copyAction = React.useMemo( diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimingDetails.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimingDetails.tsx index bc4ce5748df1a..7b16fd61c2be9 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimingDetails.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimingDetails.tsx @@ -31,18 +31,23 @@ export const timingStringForStatus = (status?: RunStatus) => { } }; -const LoadingOrValue: React.FC<{ +const LoadingOrValue = ({ + loading, + children, +}: { loading: boolean; children: () => React.ReactNode; -}> = ({loading, children}) => - loading ?
Loading…
:
{children()}
; +}) => (loading ?
Loading…
:
{children()}
); const TIME_FORMAT = {showSeconds: true, showTimezone: false}; -export const RunTimingDetails: React.FC<{ +export const RunTimingDetails = ({ + loading, + run, +}: { loading: boolean; run: RunTimingFragment | undefined; -}> = ({loading, run}) => { +}) => { return ( = React.memo(({run}) => { +export const RunTime = React.memo(({run}: RunTimeProps) => { const {startTime, updateTime} = run; return ( @@ -304,7 +304,7 @@ export const RunTime: React.FC = React.memo(({run}) => { ); }); -export const RunStateSummary: React.FC = React.memo(({run}) => { +export const RunStateSummary = React.memo(({run}: RunTimeProps) => { // kind of a hack, but we manually set the start time to the end time in the graphql resolver // for this case, so check for start/end time equality for the failed to start condition const failedToStart = diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/StepLogsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/StepLogsDialog.tsx index 5bac1f381c2f5..21a1fdaeee2a6 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/StepLogsDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/StepLogsDialog.tsx @@ -55,11 +55,15 @@ export function useStepLogs({runId, stepKeys}: {runId?: string; stepKeys?: strin }; } -export const StepLogsDialog: React.FC<{ +export const StepLogsDialog = ({ + runId, + stepKeys, + onClose, +}: { runId?: string; stepKeys: string[]; onClose: () => void; -}> = ({runId, stepKeys, onClose}) => { +}) => { return ( = ({runId, stepKeys, metadata, logs}) => { +}) => { const supportsCapturedLogs = useSupportsCapturedLogs(); const [logType, setComputeLogType] = useState(LogType.structured); const [computeLogUrl, setComputeLogUrl] = React.useState(null); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/TerminateAllRunsButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/TerminateAllRunsButton.tsx index 10aae012034b5..df726248cb196 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/TerminateAllRunsButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/TerminateAllRunsButton.tsx @@ -12,11 +12,15 @@ import { TerminateRunIdsQueryVariables, } from './types/TerminateAllRunsButton.types'; -export const TerminateAllRunsButton: React.FC<{ +export const TerminateAllRunsButton = ({ + refetch, + filter, + disabled, +}: { refetch: () => void; filter: RunsFilter; disabled: boolean; -}> = ({refetch, filter, disabled}) => { +}) => { const [terminating, setTerminating] = React.useState<{[runId: string]: boolean} | null>(null); const client = useApolloClient(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/__tests__/TerminationDialog.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/__tests__/TerminationDialog.test.tsx index ab11771dbff69..12fb40387bbe9 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/__tests__/TerminationDialog.test.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/__tests__/TerminationDialog.test.tsx @@ -59,10 +59,13 @@ function buildMockTerminateMutation( } describe('TerminationDialog', () => { - const Test: React.FC<{ + const Test = ({ + mocks, + propOverrides, + }: { mocks?: any; propOverrides?: Partial; - }> = ({mocks, propOverrides}) => { + }) => { const props = { isOpen: true, onClose: () => {}, diff --git a/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleDetails.tsx b/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleDetails.tsx index ab697630e176c..d349714a5f8f8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleDetails.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleDetails.tsx @@ -32,11 +32,11 @@ import {ScheduleFragment} from './types/ScheduleUtils.types'; const TIME_FORMAT = {showSeconds: false, showTimezone: true}; -export const ScheduleDetails: React.FC<{ +export const ScheduleDetails = (props: { schedule: ScheduleFragment; repoAddress: RepoAddress; refreshState: QueryRefreshState; -}> = (props) => { +}) => { const {repoAddress, schedule, refreshState} = props; const {cronSchedule, executionTimezone, futureTicks, name, partitionSet, pipelineName} = schedule; const copyToClipboard = useCopyToClipboard(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulePartitionStatus.tsx b/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulePartitionStatus.tsx index a5fa0515d5a32..f5aba0ac71a60 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulePartitionStatus.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulePartitionStatus.tsx @@ -42,10 +42,13 @@ const calculateDisplayStatus = (partition: SchedulePartitionStatusResultFragment } }; -export const SchedulePartitionStatus: React.FC<{ +interface Props { repoAddress: RepoAddress; schedule: ScheduleFragment; -}> = React.memo(({repoAddress, schedule}) => { +} + +export const SchedulePartitionStatus = React.memo((props: Props) => { + const {repoAddress, schedule} = props; const repo = useRepository(repoAddress); const {name: scheduleName, partitionSet, pipelineName} = schedule; @@ -115,10 +118,13 @@ export const SchedulePartitionStatus: React.FC<{ ); }); -const RetrievedSchedulePartitionStatus: React.FC<{ +const RetrievedSchedulePartitionStatus = ({ + schedule, + partitionURL, +}: { schedule: SchedulePartitionStatusFragment; partitionURL: string; -}> = ({schedule, partitionURL}) => { +}) => { const {partitionSet} = schedule; if (!partitionSet || partitionSet.partitionStatusesOrError.__typename !== 'PartitionStatuses') { diff --git a/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleRoot.tsx index 28e90c4d160b2..b17a764d5dc6b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleRoot.tsx @@ -30,7 +30,7 @@ interface Props { repoAddress: RepoAddress; } -export const ScheduleRoot: React.FC = (props) => { +export const ScheduleRoot = (props: Props) => { useTrackPageView(); const {repoAddress} = props; @@ -99,12 +99,16 @@ export const ScheduleRoot: React.FC = (props) => { ); }; -const SchedulePreviousRuns: React.FC<{ +const SchedulePreviousRuns = ({ + schedule, + highlightedIds, + tabs, +}: { repoAddress: RepoAddress; schedule: ScheduleFragment; tabs?: React.ReactElement; highlightedIds?: string[]; -}> = ({schedule, highlightedIds, tabs}) => { +}) => { const queryResult = useQuery( PREVIOUS_RUNS_FOR_SCHEDULE_QUERY, { diff --git a/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleSwitch.tsx b/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleSwitch.tsx index 336ea8c3b35f5..1f20549e49965 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleSwitch.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleSwitch.tsx @@ -26,7 +26,7 @@ interface Props { size?: 'small' | 'large'; } -export const ScheduleSwitch: React.FC = (props) => { +export const ScheduleSwitch = (props: Props) => { const {repoAddress, schedule, size = 'large'} = props; const {name, scheduleState} = schedule; const {status, id, selectorId} = scheduleState; diff --git a/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulerInfo.tsx b/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulerInfo.tsx index 2bf507813750b..d3d02ed578b7a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulerInfo.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulerInfo.tsx @@ -7,7 +7,7 @@ type Props = React.ComponentPropsWithRef & { daemonHealth: DaemonHealthFragment | undefined; }; -export const SchedulerInfo: React.FC = ({daemonHealth, ...boxProps}) => { +export const SchedulerInfo = ({daemonHealth, ...boxProps}: Props) => { let healthy = undefined; if (daemonHealth) { 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 acf08fc14e76c..e58e7f4022f4b 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 @@ -58,9 +58,11 @@ interface ScheduleTick { repoAddress: RepoAddress; } -export const SchedulesNextTicks: React.FC<{ +interface Props { repos: RepositoryForNextTicksFragment[]; -}> = React.memo(({repos}) => { +} + +export const SchedulesNextTicks = React.memo(({repos}: Props) => { const nextTicks: ScheduleTick[] = []; let anyPipelines = false; let anySchedules = false; @@ -187,11 +189,13 @@ export const SchedulesNextTicks: React.FC<{ ); }); -const NextTickMenu: React.FC<{ +interface NextTickMenuProps { repoAddress: RepoAddress; schedule: ScheduleNextFiveTicksFragment; tickTimestamp: number; -}> = React.memo(({repoAddress, schedule, tickTimestamp}) => { +} + +const NextTickMenu = React.memo(({repoAddress, schedule, tickTimestamp}: NextTickMenuProps) => { const scheduleSelector = { ...repoAddressToSelector(repoAddress), scheduleName: schedule.name, @@ -249,13 +253,19 @@ const NextTickMenu: React.FC<{ ); }); -const NextTickMenuItems: React.FC<{ +const NextTickMenuItems = ({ + repoAddress, + schedule, + evaluationResult, + loading, + onItemOpen, +}: { repoAddress: RepoAddress; evaluationResult: ScheduleFutureTickEvaluationResultFragment | null; schedule: ScheduleNextFiveTicksFragment; loading: boolean; onItemOpen: (value: boolean) => void; -}> = ({repoAddress, schedule, evaluationResult, loading, onItemOpen}) => { +}) => { if (!evaluationResult) { return ; } @@ -309,14 +319,21 @@ const NextTickMenuItems: React.FC<{ ); }; -const NextTickDialog: React.FC<{ +const NextTickDialog = ({ + repoAddress, + evaluationResult, + schedule, + tickTimestamp, + setOpen, + isOpen, +}: { repoAddress: RepoAddress; isOpen: boolean; setOpen: (value: boolean) => void; evaluationResult: ScheduleFutureTickEvaluationResultFragment | null; schedule: ScheduleNextFiveTicksFragment; tickTimestamp: number; -}> = ({repoAddress, evaluationResult, schedule, tickTimestamp, setOpen, isOpen}) => { +}) => { const [selectedRunRequest, setSelectedRunRequest] = React.useState( evaluationResult && evaluationResult.runRequests && evaluationResult.runRequests.length === 1 diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx index 33e9d1d58297c..37d1d36c96941 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx @@ -71,7 +71,7 @@ const initialState: State = { const DEBOUNCE_MSEC = 100; -export const SearchDialog: React.FC<{searchPlaceholder: string}> = ({searchPlaceholder}) => { +export const SearchDialog = ({searchPlaceholder}: {searchPlaceholder: string}) => { const location = useLocation(); const history = useHistory(); const {initialize, loading, searchPrimary, searchSecondary} = useGlobalSearch(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx index afff55a7e68d2..15df07ef86b8a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx @@ -38,7 +38,7 @@ interface ItemProps { result: Fuse.FuseResult; } -const SearchResultItem: React.FC = React.memo(({isHighlight, onClickResult, result}) => { +const SearchResultItem = React.memo(({isHighlight, onClickResult, result}: ItemProps) => { const {item} = result; const element = React.useRef(null); diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/EditCursorDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/EditCursorDialog.tsx index 8463bfd07c764..e071b1b267ca6 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/EditCursorDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/EditCursorDialog.tsx @@ -24,12 +24,17 @@ import { SetSensorCursorMutationVariables, } from './types/EditCursorDialog.types'; -export const EditCursorDialog: React.FC<{ +export const EditCursorDialog = ({ + isOpen, + sensorSelector, + cursor, + onClose, +}: { isOpen: boolean; cursor: string; sensorSelector: SensorSelector; onClose: () => void; -}> = ({isOpen, sensorSelector, cursor, onClose}) => { +}) => { const [cursorValue, setCursorValue] = React.useState(cursor); const [isSaving, setIsSaving] = React.useState(false); const [requestSet] = useMutation( diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorDetails.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorDetails.tsx index 9958be9e2630a..d362559771221 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorDetails.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorDetails.tsx @@ -47,12 +47,17 @@ export const humanizeSensorInterval = (minIntervalSeconds?: number) => { return `~${minIntervalSeconds / 86400} days`; }; -export const SensorDetails: React.FC<{ +export const SensorDetails = ({ + sensor, + repoAddress, + daemonHealth, + refreshState, +}: { sensor: SensorFragment; repoAddress: RepoAddress; daemonHealth: boolean | null; refreshState: QueryRefreshState; -}> = ({sensor, repoAddress, daemonHealth, refreshState}) => { +}) => { const { name, sensorState: {status, ticks}, diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorInfo.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorInfo.tsx index 9cfe65f97d61e..4a1520d56d07f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorInfo.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorInfo.tsx @@ -7,7 +7,7 @@ type Props = React.ComponentPropsWithRef & { daemonHealth: DaemonHealthFragment | undefined; }; -export const SensorInfo: React.FC = ({daemonHealth, ...boxProps}) => { +export const SensorInfo = ({daemonHealth, ...boxProps}: Props) => { let healthy = undefined; if (daemonHealth) { diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorMonitoredAssets.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorMonitoredAssets.tsx index 09b94116aaf0c..465db78f0e510 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorMonitoredAssets.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorMonitoredAssets.tsx @@ -4,9 +4,7 @@ import * as React from 'react'; import {AssetLink} from '../assets/AssetLink'; import {SensorMetadata} from '../graphql/types'; -export const SensorMonitoredAssets: React.FC<{ - metadata: SensorMetadata | undefined; -}> = ({metadata}) => { +export const SensorMonitoredAssets = ({metadata}: {metadata: SensorMetadata | undefined}) => { if (!metadata?.assetKeys?.length) { return ; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPreviousRuns.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPreviousRuns.tsx index 993f4dead06a5..e62a4896ccd0f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPreviousRuns.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPreviousRuns.tsx @@ -16,12 +16,16 @@ import { const RUNS_LIMIT = 20; -export const SensorPreviousRuns: React.FC<{ +export const SensorPreviousRuns = ({ + sensor, + highlightedIds, + tabs, +}: { sensor: SensorFragment; repoAddress: RepoAddress; tabs?: React.ReactElement; highlightedIds?: string[]; -}> = ({sensor, highlightedIds, tabs}) => { +}) => { const {queryResult, paginationProps} = useCursorPaginatedQuery< PreviousRunsForSensorQuery, PreviousRunsForSensorQueryVariables diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorRoot.tsx index 5108c5146eac1..83314070a98cf 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorRoot.tsx @@ -22,7 +22,7 @@ import {SensorInfo} from './SensorInfo'; import {SensorPreviousRuns} from './SensorPreviousRuns'; import {SensorRootQuery, SensorRootQueryVariables} from './types/SensorRoot.types'; -export const SensorRoot: React.FC<{repoAddress: RepoAddress}> = ({repoAddress}) => { +export const SensorRoot = ({repoAddress}: {repoAddress: RepoAddress}) => { useTrackPageView(); const {sensorName} = useParams<{sensorName: string}>(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorSwitch.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorSwitch.tsx index 1e92112a33c39..6492cfc0203c8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorSwitch.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorSwitch.tsx @@ -26,7 +26,7 @@ interface Props { size?: 'small' | 'large'; } -export const SensorSwitch: React.FC = (props) => { +export const SensorSwitch = (props: Props) => { const {repoAddress, sensor, size = 'large'} = props; const { permissions: {canStartSensor, canStopSensor}, diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorTargetList.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorTargetList.tsx index afb5465b1fe8f..291eb9d7712f6 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorTargetList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorTargetList.tsx @@ -6,10 +6,13 @@ import {PipelineReference} from '../pipelines/PipelineReference'; import {isThisThingAJob, useRepository} from '../workspace/WorkspaceContext'; import {RepoAddress} from '../workspace/types'; -export const SensorTargetList: React.FC<{ +export const SensorTargetList = ({ + targets, + repoAddress, +}: { targets: {pipelineName: string}[] | null | undefined; repoAddress: RepoAddress; -}> = ({targets, repoAddress}) => { +}) => { const repo = useRepository(repoAddress); if (!targets) { return ; diff --git a/js_modules/dagster-ui/packages/ui-core/src/testing/ApolloTestProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/testing/ApolloTestProvider.tsx index ca809c8382562..bf3c7b377f13a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/testing/ApolloTestProvider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/testing/ApolloTestProvider.tsx @@ -31,7 +31,7 @@ interface Props extends ApolloTestProps { typeDefs: DocumentNode; } -export const ApolloTestProvider: React.FC = (props) => { +export const ApolloTestProvider = (props: Props) => { const {children, mocks = [], typeDefs, resolvers = []} = props; const client = React.useMemo(() => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/testing/StorybookProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/testing/StorybookProvider.tsx index b204eda9bc4be..25db7830168e1 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/testing/StorybookProvider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/testing/StorybookProvider.tsx @@ -15,7 +15,7 @@ interface Props { apolloProps?: ApolloTestProps; } -export const StorybookProvider: React.FC = (props) => { +export const StorybookProvider = (props: Props) => { const {apolloProps, routerProps} = props; return ( 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 index dbc2c62360997..ad9ed95df21fa 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ticks/DryRunRequestTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/DryRunRequestTable.tsx @@ -20,13 +20,7 @@ type Props = { mode?: string; }; -export const RunRequestTable: React.FC = ({ - runRequests, - isJob, - repoAddress, - mode, - jobName, -}) => { +export const RunRequestTable = ({runRequests, isJob, repoAddress, mode, jobName}: Props) => { const repo = useRepository(repoAddress); const body = ( 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 67a0adbc89453..df5491716f8d2 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 @@ -47,7 +47,7 @@ type Props = { jobName: string; }; -export const EvaluateScheduleDialog: React.FC = (props) => { +export const EvaluateScheduleDialog = (props: Props) => { return ( = (props) => { ); }; -const EvaluateSchedule: React.FC = ({repoAddress, name, onClose, jobName}) => { +const EvaluateSchedule = ({repoAddress, name, onClose, jobName}: Props) => { const [_selectedTimestamp, setSelectedTimestamp] = React.useState<{ts: number; label: string}>(); const {data} = useQuery(GET_SCHEDULE_QUERY, { variables: { @@ -222,12 +222,17 @@ export const GET_SCHEDULE_QUERY = gql` } `; -const EvaluateScheduleContent: React.FC<{ +const EvaluateScheduleContent = ({ + repoAddress, + name, + timestamp, + jobName, +}: { repoAddress: RepoAddress; name: string; timestamp: number; jobName: string; -}> = ({repoAddress, name, timestamp, jobName}) => { +}) => { const { timezone: [userTimezone], } = React.useContext(TimeContext); 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 fd2772ae252ca..b6d4e5518c1b3 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 @@ -54,7 +54,7 @@ type Props = { jobName: string; }; -export const SensorDryRunDialog: React.FC = (props) => { +export const SensorDryRunDialog = (props: Props) => { const {isOpen, onClose, name} = props; return ( = (props) => { ); }; -const SensorDryRun: React.FC = ({repoAddress, name, currentCursor, onClose, jobName}) => { +const SensorDryRun = ({repoAddress, name, currentCursor, onClose, jobName}: Props) => { const [sensorDryRun] = useMutation( EVALUATE_SENSOR_MUTATION, ); diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/TickLogDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/TickLogDialog.tsx index 2539a2bc19daa..84decc8814865 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ticks/TickLogDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/TickLogDialog.tsx @@ -20,11 +20,15 @@ import { TickLogEventFragment, } from './types/TickLogDialog.types'; -export const TickLogDialog: React.FC<{ +export const TickLogDialog = ({ + tick, + instigationSelector, + onClose, +}: { tick: HistoryTickFragment; instigationSelector: InstigationSelector; onClose: () => void; -}> = ({tick, instigationSelector, onClose}) => { +}) => { const {data} = useQuery(TICK_LOG_EVENTS_QUERY, { variables: {instigationSelector, timestamp: tick.timestamp}, notifyOnNetworkStatusChange: true, @@ -64,7 +68,7 @@ export const TickLogDialog: React.FC<{ ); }; -const TickLogsTable: React.FC<{events: TickLogEventFragment[]}> = ({events}) => { +const TickLogsTable = ({events}: {events: TickLogEventFragment[]}) => { return (
{}}> @@ -99,7 +103,7 @@ const Headers = () => { ); }; -const TickLogRow: React.FC<{event: TickLogEventFragment}> = ({event}) => { +const TickLogRow = ({event}: {event: TickLogEventFragment}) => { return ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeExplorer.tsx index 6a64efc1beaf1..26fde214b78ee 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeExplorer.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeExplorer.tsx @@ -18,7 +18,7 @@ interface ITypeExplorerProps { type: TypeExplorerFragment; } -export const TypeExplorer: React.FC = (props) => { +export const TypeExplorer = (props: ITypeExplorerProps) => { const {name, metadataEntries, inputSchemaType, outputSchemaType, description} = props.type; const typeKind = dagsterTypeKind(props.type); const displayName = typeKind === 'standard' ? name : `${name} (${typeKind})`; diff --git a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeExplorerContainer.tsx b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeExplorerContainer.tsx index 5b925d99320da..2c7494ef7e2b5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeExplorerContainer.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeExplorerContainer.tsx @@ -18,11 +18,11 @@ interface ITypeExplorerContainerProps { repoAddress?: RepoAddress; } -export const TypeExplorerContainer: React.FC = ({ +export const TypeExplorerContainer = ({ explorerPath, typeName, repoAddress, -}) => { +}: ITypeExplorerContainerProps) => { const pipelineSelector = buildPipelineSelector(repoAddress || null, explorerPath.pipelineName); const queryResult = useQuery( TYPE_EXPLORER_CONTAINER_QUERY, diff --git a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeList.tsx b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeList.tsx index 4400a859ee45d..34366b134f2fe 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeList.tsx @@ -28,7 +28,7 @@ function groupTypes(types: TypeListFragment[]): {[key: string]: TypeListFragment return groups; } -export const TypeList: React.FC = (props) => { +export const TypeList = (props: ITypeListProps) => { const groups = groupTypes(props.types); return ( <> diff --git a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeListContainer.tsx b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeListContainer.tsx index b5adf28f1a641..4559ce45f7fbf 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeListContainer.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeListContainer.tsx @@ -23,10 +23,7 @@ interface ITypeListContainerProps { repoAddress?: RepoAddress; } -export const TypeListContainer: React.FC = ({ - explorerPath, - repoAddress, -}) => { +export const TypeListContainer = ({explorerPath, repoAddress}: ITypeListContainerProps) => { const {pipelineName, snapshotId} = explorerPath; const {options} = useRepositoryOptions(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/__stories__/useFilters.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/__stories__/useFilters.stories.tsx index 495011f080e9c..ea96d8c56e434 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/__stories__/useFilters.stories.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/__stories__/useFilters.stories.tsx @@ -14,7 +14,7 @@ export default { component: FilterDropdown, } as Meta; -const TestComponent: React.FC = () => { +const TestComponent = () => { const userFilter = useStaticSetFilter({ name: 'User', icon: 'account_circle', diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/Loading.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/Loading.tsx index f612c2df4841d..a8982b5a874c8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/Loading.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/Loading.tsx @@ -74,7 +74,7 @@ export const Loading = >(props: ILoadingProps< return <>{children(data as TData)}; }; -export const LoadingSpinner: React.FC<{purpose: 'page' | 'section'}> = ({purpose}) => { +export const LoadingSpinner = ({purpose}: {purpose: 'page' | 'section'}) => { const isPage = purpose === 'page'; return ( = (props) => { +export const Markdown = (props: Props) => { return ( = (props) => { +export const MenuLink = (props: MenuLinkProps) => { const {icon, intent, text, disabled, ...rest} = props; if (disabled) { diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/NotebookButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/NotebookButton.tsx index b3a55b2346a60..a53d838db16bd 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/NotebookButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/NotebookButton.tsx @@ -10,11 +10,15 @@ import * as React from 'react'; import {AppContext} from '../app/AppContext'; -export const NotebookButton: React.FC<{ +export const NotebookButton = ({ + path, + repoLocation, + label, +}: { path?: string; repoLocation: string; label?: string; -}> = ({path, repoLocation, label}) => { +}) => { const {rootServerURI} = React.useContext(AppContext); const [open, setOpen] = React.useState(false); diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/TimeFromNow.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/TimeFromNow.tsx index 4c3fae73eca2d..8edaaf9e489cd 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/TimeFromNow.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/TimeFromNow.tsx @@ -8,7 +8,7 @@ import {Timestamp} from '../app/time/Timestamp'; dayjs.extend(relativeTime); const TIME_FORMAT = {showSeconds: true, showTimezone: true}; -export const TimeFromNow: React.FC<{unixTimestamp: number}> = React.memo(({unixTimestamp}) => { +export const TimeFromNow = React.memo(({unixTimestamp}: {unixTimestamp: number}) => { return ( > = (props) => { +export const MarkdownMock = (props: React.ComponentProps) => { return <>{props.children}; }; diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/__tests__/useFormatDateTime.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/__tests__/useFormatDateTime.test.tsx index e83781445e2d8..f6ef710414c6b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/__tests__/useFormatDateTime.test.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/__tests__/useFormatDateTime.test.tsx @@ -17,7 +17,7 @@ describe('useFormatDateTime', () => { language?: string; } - const Test: React.FC = ({date, options, language}) => { + const Test = ({date, options, language}: Props) => { const formatDateTime = useFormatDateTime(); return
{formatDateTime(date, options, language)}
; }; diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationMenu.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationMenu.tsx index 76a9ceeae2685..9b982818fc0d0 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationMenu.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationMenu.tsx @@ -14,8 +14,10 @@ import * as yaml from 'yaml'; import {WorkspaceRepositoryLocationNode} from './WorkspaceContext'; -export const CodeLocationMenu: React.FC<{locationNode: WorkspaceRepositoryLocationNode}> = ({ +export const CodeLocationMenu = ({ locationNode, +}: { + locationNode: WorkspaceRepositoryLocationNode; }) => { const [configIsOpen, setConfigIsOpen] = React.useState(false); const [libsIsOpen, setLibsIsOpen] = React.useState(false); @@ -61,11 +63,15 @@ export const CodeLocationMenu: React.FC<{locationNode: WorkspaceRepositoryLocati ); }; -export const CodeLocationConfigDialog: React.FC<{ +export const CodeLocationConfigDialog = ({ + isOpen, + setIsOpen, + metadata, +}: { isOpen: boolean; setIsOpen: (next: boolean) => void; metadata: WorkspaceRepositoryLocationNode['displayMetadata']; -}> = ({isOpen, setIsOpen, metadata}) => { +}) => { return ( void; libraries: {name: string; version: string}[]; -}> = ({isOpen, setIsOpen, libraries}) => { +}) => { return ( = ({displayMetadata}) => { +}) => { const yamlString = React.useMemo(() => { const kvPairs = displayMetadata.reduce((accum, item) => { return {...accum, [item.key]: item.value}; diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationRowSet.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationRowSet.tsx index fe6047b182745..bda9cddf42383 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationRowSet.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationRowSet.tsx @@ -38,7 +38,7 @@ interface Props { locationNode: WorkspaceRepositoryLocationNode; } -export const CodeLocationRowSet: React.FC = ({locationNode}) => { +export const CodeLocationRowSet = ({locationNode}: Props) => { const {name, locationOrLoadError} = locationNode; if (!locationOrLoadError || locationOrLoadError?.__typename === 'PythonError') { @@ -108,7 +108,7 @@ export const CodeLocationRowSet: React.FC = ({locationNode}) => { ); }; -export const ImageName: React.FC<{metadata: WorkspaceDisplayMetadataFragment[]}> = ({metadata}) => { +export const ImageName = ({metadata}: {metadata: WorkspaceDisplayMetadataFragment[]}) => { const copy = useCopyToClipboard(); const imageKV = metadata.find(({key}) => key === 'image'); const value = imageKV?.value || ''; @@ -163,8 +163,10 @@ const ImageNameBox = styled(Box)` } `; -export const ModuleOrPackageOrFile: React.FC<{metadata: WorkspaceDisplayMetadataFragment[]}> = ({ +export const ModuleOrPackageOrFile = ({ metadata, +}: { + metadata: WorkspaceDisplayMetadataFragment[]; }) => { const imageKV = metadata.find( ({key}) => key === 'module_name' || key === 'package_name' || key === 'python_file', @@ -183,10 +185,10 @@ export const ModuleOrPackageOrFile: React.FC<{metadata: WorkspaceDisplayMetadata return null; }; -export const LocationStatus: React.FC<{ +export const LocationStatus = (props: { location: string; locationOrError: WorkspaceRepositoryLocationNode; -}> = (props) => { +}) => { const {location, locationOrError} = props; const [showDialog, setShowDialog] = React.useState(false); @@ -242,7 +244,7 @@ export const LocationStatus: React.FC<{ ); }; -export const ReloadButton: React.FC<{location: string}> = ({location}) => { +export const ReloadButton = ({location}: {location: string}) => { return ( = ({metadata}) => { +export const CodeLocationSource = ({metadata}: {metadata: Metadata[]}) => { const metadataWithURL = metadata.find(({key}) => key === 'url'); if (!metadataWithURL) { return
{'\u2013'}
; diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/GraphRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/GraphRoot.tsx index 7e729ec58feac..254f45db425fa 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/GraphRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/GraphRoot.tsx @@ -25,7 +25,7 @@ interface Props { repoAddress: RepoAddress; } -export const GraphRoot: React.FC = (props) => { +export const GraphRoot = (props: Props) => { useTrackPageView(); const {repoAddress} = props; @@ -55,7 +55,7 @@ export const GraphRoot: React.FC = (props) => { ); }; -const GraphExplorerRoot: React.FC = (props) => { +const GraphExplorerRoot = (props: Props) => { const {repoAddress} = props; const params = useParams(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/ReloadAllButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/ReloadAllButton.tsx index 39bbc7fde1248..d0939528e52bd 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/ReloadAllButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/ReloadAllButton.tsx @@ -10,7 +10,7 @@ import { import {RepositoryLocationErrorDialog} from './RepositoryLocationErrorDialog'; -export const ReloadAllButton: React.FC<{label?: string}> = ({label = 'Reload all'}) => { +export const ReloadAllButton = ({label = 'Reload all'}: {label?: string}) => { const { permissions: {canReloadWorkspace}, disabledReasons, diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryCountTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryCountTags.tsx index 3bf9a16053b20..b6af28f6e3ac7 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryCountTags.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryCountTags.tsx @@ -9,10 +9,13 @@ import {DagsterRepoOption} from './WorkspaceContext'; import {RepoAddress} from './types'; import {workspacePathFromAddress} from './workspacePath'; -export const RepositoryCountTags: React.FC<{ +export const RepositoryCountTags = ({ + repo, + repoAddress, +}: { repo: DagsterRepoOption['repository']; repoAddress: RepoAddress; -}> = ({repo, repoAddress}) => { +}) => { const assetGroupCount = repo.assetGroups.length; const jobCount = repo.pipelines.filter(({name}) => !isHiddenAssetGroupJob(name)).length; const scheduleCount = repo.schedules.length; diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryInformation.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryInformation.tsx index 436cf8c9a3bed..50cc2a67a826b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryInformation.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryInformation.tsx @@ -18,9 +18,11 @@ export const REPOSITORY_INFO_FRAGMENT = gql` } `; -export const InstigatorSelectorInformation: React.FC<{ +export const InstigatorSelectorInformation = ({ + instigatorState, +}: { instigatorState: InstigationStateFragment; -}> = ({instigatorState}) => { +}) => { return ( <>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryLocationErrorDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryLocationErrorDialog.tsx index 2853a5fe04d23..2d398af4d9bc4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryLocationErrorDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryLocationErrorDialog.tsx @@ -13,7 +13,7 @@ interface Props { onTryReload: () => void; } -export const RepositoryLocationErrorDialog: React.FC = (props) => { +export const RepositoryLocationErrorDialog = (props: Props) => { const {isOpen, error, location, reloading, onTryReload, onDismiss} = props; return ( = (props) => { ); }; -export const RepositoryLocationNonBlockingErrorDialog: React.FC = (props) => { +export const RepositoryLocationNonBlockingErrorDialog = (props: Props) => { const {isOpen, error, location, reloading, onTryReload, onDismiss} = props; return ( = (props) ); }; -const ErrorContents: React.FC<{ +const ErrorContents = ({ + location, + error, +}: { location: string; error: PythonErrorFragment | {message: string} | null; -}> = ({location, error}) => ( +}) => ( <> Error loading {location}. Try reloading the code location after resolving the diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx index ceaad0fdccbb9..94c0daf89aeef 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx @@ -205,10 +205,13 @@ export const VirtualizedAssetRow = (props: AssetRowProps) => { ); }; -export const VirtualizedAssetCatalogHeader: React.FC<{ +export const VirtualizedAssetCatalogHeader = ({ + headerCheckbox, + view, +}: { headerCheckbox: React.ReactNode; view: AssetViewType; -}> = ({headerCheckbox, view}) => { +}) => { return ( = ({nameLabel}) => { +export const VirtualizedAssetHeader = ({nameLabel}: {nameLabel: React.ReactNode}) => { return ( = (props) => { +export const VirtualizedAssetTable = (props: Props) => { const { headerCheckbox, prefixPath, diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedGraphTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedGraphTable.tsx index 9f11b64b9bb93..629e8f39fefc4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedGraphTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedGraphTable.tsx @@ -19,7 +19,7 @@ interface Props { repoAddress: RepoAddress; } -export const VirtualizedGraphTable: React.FC = ({repoAddress, graphs}) => { +export const VirtualizedGraphTable = ({repoAddress, graphs}: Props) => { const parentRef = React.useRef(null); const rowVirtualizer = useVirtualizer({ diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedJobTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedJobTable.tsx index 16d1b54bf246f..781522599ee47 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedJobTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedJobTable.tsx @@ -13,7 +13,7 @@ interface Props { jobs: Job[]; } -export const VirtualizedJobTable: React.FC = ({repoAddress, jobs}) => { +export const VirtualizedJobTable = ({repoAddress, jobs}: Props) => { const parentRef = React.useRef(null); const rowVirtualizer = useVirtualizer({ diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedRepoAssetTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedRepoAssetTable.tsx index 728c0bd628609..f210fa3b45452 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedRepoAssetTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedRepoAssetTable.tsx @@ -30,7 +30,7 @@ type RowType = const UNGROUPED_NAME = 'UNGROUPED'; const ASSET_GROUPS_EXPANSION_STATE_STORAGE_KEY = 'assets-virtualized-expansion-state'; -export const VirtualizedRepoAssetTable: React.FC = ({repoAddress, assets}) => { +export const VirtualizedRepoAssetTable = ({repoAddress, assets}: Props) => { const parentRef = React.useRef(null); const repoKey = repoAddressAsHumanString(repoAddress); const {expandedKeys, onToggle} = useAssetGroupExpansionState( @@ -117,7 +117,15 @@ export const VirtualizedRepoAssetTable: React.FC = ({repoAddress, assets} ); }; -const GroupNameRow: React.FC<{ +const GroupNameRow = ({ + repoAddress, + groupName, + assetCount, + expanded, + height, + start, + onToggle, +}: { repoAddress: RepoAddress; groupName: string; assetCount: number; @@ -125,7 +133,7 @@ const GroupNameRow: React.FC<{ height: number; start: number; onToggle: (groupName: string) => void; -}> = ({repoAddress, groupName, assetCount, expanded, height, start, onToggle}) => { +}) => { return ( void; - onToggleAll: (expanded: boolean) => void; -}> = ({ +export const RepoRow = ({ repoAddress, height, start, @@ -26,6 +17,15 @@ export const RepoRow: React.FC<{ onToggleAll, showLocation, rightElement, +}: { + repoAddress: RepoAddress; + height: number; + start: number; + showLocation: boolean; + rightElement: React.ReactNode; + expanded: boolean; + onToggle: (repoAddress: RepoAddress) => void; + onToggleAll: (expanded: boolean) => void; }) => { return ( @@ -43,10 +43,13 @@ export const RepoRow: React.FC<{ ); }; -export const LoadingOrNone: React.FC<{ +export const LoadingOrNone = ({ + queryResult, + noneString = 'None', +}: { queryResult: QueryResult; noneString?: React.ReactNode; -}> = ({queryResult, noneString = 'None'}) => { +}) => { const {called, loading, data} = queryResult; return (
No metadata entries{` ${reason}`}