From 82d51840d41b3ea9456abfb9ac0299461e2d596d Mon Sep 17 00:00:00 2001
From: Ben Gotow <ben@foundry376.com>
Date: Mon, 16 Oct 2023 18:21:40 -0500
Subject: [PATCH] =?UTF-8?q?[ui]=20Tweak=20dialog=20padding,=20conditionall?=
 =?UTF-8?q?y=20pluralize=20=E2=80=9Creport=20events=E2=80=9D=20in=20Materi?=
 =?UTF-8?q?alize=20dropdown=20(#17217)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 <bgotow@elementl.com>
---
 .../assets/LaunchAssetChoosePartitionsDialog.tsx   | 14 +++++++-------
 .../ui-core/src/assets/useReportEventsModal.tsx    |  8 +++++---
 .../packages/ui-core/src/ui/ToggleableSection.tsx  |  2 +-
 3 files changed, 13 insertions(+), 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
index e33a4f3174b77..cf6cade712b62 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
@@ -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
index a20e052298e31..919ff9d24cc03 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
@@ -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
index 874377d6c917d..d83df157cace4 100644
--- 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}>