[ui] Tweak dialog padding, conditionally pluralize “report events” in…

… Materialize dropdown (#17217) ## Summary & Motivation - Conditionally pluralize “report events” in Materialize dropdown - Update some Materialize / Report Event dialog elements that were using 24px horizontal padding -- the dialog header / footer / body only use 20px padding. Before (some elements are inset from the guide lines): <img width="786" alt="Screen Shot 2023-10-14 at 4 34 39 PM" src="https://github.com/dagster-io/dagster/assets/1037212/2e7b6186-7c72-44e2-8ea0-4986b2370f1e"> After: <img width="793" alt="Screen Shot 2023-10-14 at 4 31 22 PM" src="https://github.com/dagster-io/dagster/assets/1037212/687ac1f1-7185-4a4b-af3d-129571aa95aa"> ## How I Tested These Changes Checked partitioned / unpartitioned assets Co-authored-by: bengotow <[email protected]>
dagster-io · Oct 16, 2023 · 82d5184 · 82d5184 · github-actions · Oct 16, 2023
1 parent 134ab86
commit 82d5184
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
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
@@ -455,7 +455,7 @@ const LaunchAssetChoosePartitionsDialogBody: React.FC<Props> = ({
             }
           >
             <Box
-              padding={{vertical: 12, horizontal: 24}}
+              padding={{vertical: 12, horizontal: 20}}
               data-testid={testId('pure-all-partitions-only')}
             >
               <Alert
@@ -482,7 +482,7 @@ const LaunchAssetChoosePartitionsDialogBody: React.FC<Props> = ({
             {target.type === 'pureWithAnchorAsset' && (
               <Box
                 flex={{alignItems: 'center', gap: 8}}
-                padding={{top: 12, horizontal: 24}}
+                padding={{top: 12, horizontal: 20}}
                 data-testid={testId('anchor-asset-label')}
               >
                 <Icon name="asset" />
@@ -493,7 +493,7 @@ const LaunchAssetChoosePartitionsDialogBody: React.FC<Props> = ({
               <Box
                 key={range.dimension.name}
                 border="bottom"
-                padding={{vertical: 12, horizontal: 24}}
+                padding={{vertical: 12, horizontal: 20}}
               >
                 <Box as={Subheading} flex={{alignItems: 'center', gap: 8}}>
                   <Icon name="partition" />
@@ -552,7 +552,7 @@ const LaunchAssetChoosePartitionsDialogBody: React.FC<Props> = ({
           }
           isInitiallyOpen={false}
         >
-          <Box padding={{vertical: 16, horizontal: 24}} flex={{direction: 'column', gap: 12}}>
+          <Box padding={{vertical: 16, horizontal: 20}} flex={{direction: 'column', gap: 12}}>
             <TagEditor
               tagsFromSession={tags}
               onChange={setTags}
@@ -586,7 +586,7 @@ const LaunchAssetChoosePartitionsDialogBody: React.FC<Props> = ({
           isInitiallyOpen={true}
         >
           {target.type === 'job' && (
-            <Box padding={{vertical: 16, horizontal: 24}} flex={{direction: 'column', gap: 12}}>
+            <Box padding={{vertical: 16, horizontal: 20}} flex={{direction: 'column', gap: 12}}>
               <Checkbox
                 data-testid={testId('missing-only-checkbox')}
                 label="Backfill only failed and missing partitions within selection"
@@ -634,7 +634,7 @@ const LaunchAssetChoosePartitionsDialogBody: React.FC<Props> = ({
           )}
         </ToggleableSection>
 
-        <Box padding={{horizontal: 24}}>
+        <Box padding={{horizontal: 20}}>
           {previewCount > 0 && (
             <Box
               margin={{top: 16}}
@@ -864,7 +864,7 @@ const Warnings: React.FC<{
         </Box>
       }
     >
-      <Box flex={{direction: 'column', gap: 16}} padding={{vertical: 12, horizontal: 24}}>
+      <Box flex={{direction: 'column', gap: 16}} padding={{vertical: 12, horizontal: 20}}>
         {alerts}
       </Box>
     </ToggleableSection>

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
@@ -49,12 +49,14 @@ export function useReportEventsModal(asset: Asset | null, onEventReported: () =>
   const dropdownOptions = React.useMemo(
     () => [
       {
-        label: 'Report materialization event',
+        label: asset?.isPartitioned
+          ? 'Report materialization events'
+          : 'Report materialization event',
         icon: <Icon name="asset_non_sda" />,
         onClick: () => setIsOpen(true),
       },
     ],
-    [],
+    [asset?.isPartitioned],
   );
 
   const element = asset ? (
@@ -196,7 +198,7 @@ const ReportEventDialogBody: React.FC<{
             <Box
               key={range.dimension.name}
               border="bottom"
-              padding={{vertical: 12, horizontal: 24}}
+              padding={{vertical: 12, horizontal: 20}}
             >
               <Box as={Subheading} flex={{alignItems: 'center', gap: 8}}>
                 <Icon name="partition" />

diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/ToggleableSection.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/ToggleableSection.tsx
@@ -21,7 +21,7 @@ export const ToggleableSection = ({
         background={background ?? Colors.Gray50}
         border="bottom"
         flex={{alignItems: 'center', direction: 'row'}}
-        padding={{vertical: 12, horizontal: 24}}
+        padding={{vertical: 12, right: 20, left: 16}}
         style={{cursor: 'pointer'}}
       >
         <Rotateable $rotate={!isOpen}>