[ui] Support for manually reporting materialization events from asset…

… details

js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx

@@ -149,7 +149,7 @@ const AssetEventListEventRow: React.FC<{group: AssetEventGroup}> = ({group}) =>
       </Box>
       <Box flex={{gap: 4, direction: 'row'}}>
         {partition && <Tag>{partition}</Tag>}
-        {latest && run && (
+        {latest && run ? (
           <Tag>
             <AssetRunLink
               runId={run.id}
@@ -161,7 +161,9 @@ const AssetEventListEventRow: React.FC<{group: AssetEventGroup}> = ({group}) =>
               </Box>
             </AssetRunLink>
           </Tag>
-        )}
+        ) : latest && latest.runId === '' ? (
+          <Tag>Reported</Tag>
+        ) : undefined}
       </Box>
     </>
   );

js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx

@@ -49,6 +49,7 @@ import {
   AssetViewDefinitionNodeFragment,
 } from './types/AssetView.types';
 import {healthRefreshHintFromLiveData} from './usePartitionHealthData';
+import {useReportEventsModal} from './useReportEventsModal';
 
 interface Props {
   assetKey: AssetKey;
@@ -239,6 +240,17 @@ export const AssetView = ({assetKey}: Props) => {
     }
   };
 
+  const reportEvents = useReportEventsModal(
+    definition
+      ? {
+          assetKey: definition.assetKey,
+          isPartitioned: definition.isPartitioned,
+          repository: definition.repository,
+        }
+      : null,
+      refreshState.refetch,
+  );
+
   return (
     <Box
       flex={{direction: 'column', grow: 1}}
@@ -271,8 +283,12 @@ export const AssetView = ({assetKey}: Props) => {
                 scope={{all: [definition], skipAllTerm: true}}
               />
             ) : definition && definition.jobNames.length > 0 && upstream ? (
-              <LaunchAssetExecutionButton scope={{all: [definition]}} />
+              <LaunchAssetExecutionButton
+                scope={{all: [definition]}}
+                additionalDropdownOptions={reportEvents.dropdownOptions}
+              />
             ) : undefined}
+            {reportEvents.element}
           </Box>
         }
       />

js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetChoosePartitionsDialog.tsx

@@ -56,6 +56,7 @@ import {DimensionRangeWizard} from '../partitions/DimensionRangeWizard';
 import {assembleIntoSpans, stringForSpan} from '../partitions/SpanRepresentation';
 import {DagsterTag} from '../runs/RunTag';
 import {testId} from '../testing/testId';
+import {ToggleableSection} from '../ui/ToggleableSection';
 import {useFeatureFlagForCodeLocation} from '../workspace/WorkspaceContext';
 import {RepoAddress} from '../workspace/types';
 
@@ -868,39 +869,3 @@ const Warnings: React.FC<{
     </ToggleableSection>
   );
 };
-
-const ToggleableSection = ({
-  isInitiallyOpen,
-  title,
-  children,
-  background,
-}: {
-  isInitiallyOpen: boolean;
-  title: React.ReactNode;
-  children: React.ReactNode;
-  background?: string;
-}) => {
-  const [isOpen, setIsOpen] = React.useState(isInitiallyOpen);
-  return (
-    <Box>
-      <Box
-        onClick={() => setIsOpen(!isOpen)}
-        background={background ?? Colors.Gray50}
-        border="bottom"
-        flex={{alignItems: 'center', direction: 'row'}}
-        padding={{vertical: 12, horizontal: 24}}
-        style={{cursor: 'pointer'}}
-      >
-        <Rotateable $rotate={!isOpen}>
-          <Icon name="arrow_drop_down" />
-        </Rotateable>
-        <div style={{flex: 1}}>{title}</div>
-      </Box>
-      {isOpen && <Box>{children}</Box>}
-    </Box>
-  );
-};
-
-const Rotateable = styled.span<{$rotate: boolean}>`
-  ${({$rotate}) => ($rotate ? 'transform: rotate(-90deg);' : '')}
-`;

js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetExecutionButton.tsx

@@ -175,7 +175,18 @@ export const LaunchAssetExecutionButton: React.FC<{
   liveDataForStale?: LiveData; // For "stale" dropdown options
   intent?: 'primary' | 'none';
   preferredJobName?: string;
-}> = ({scope, liveDataForStale, preferredJobName, intent = 'primary'}) => {
+  additionalDropdownOptions?: {
+    label: string;
+    icon?: JSX.Element;
+    onClick: () => void;
+  }[];
+}> = ({
+  scope,
+  liveDataForStale,
+  preferredJobName,
+  additionalDropdownOptions,
+  intent = 'primary',
+}) => {
   const {onClick, loading, launchpadElement} = useMaterializationAction(preferredJobName);
   const [isOpen, setIsOpen] = React.useState(false);
 
@@ -251,6 +262,14 @@ export const LaunchAssetExecutionButton: React.FC<{
                   onClick(firstOption.assetKeys, e, true);
                 }}
               />
+              {additionalDropdownOptions?.map((option) => (
+                <MenuItem
+                  key={option.label}
+                  text={option.label}
+                  icon={option.icon}
+                  onClick={option.onClick}
+                />
+              ))}
             </Menu>
           }
         >