[Share] Cleanup share model UI and warning logic (#196401)

cleanup share modal UI with better context around warnings and styles

packages/kbn-reporting/public/share/share_context_menu/register_pdf_png_modal_reporting.tsx

@@ -237,18 +237,6 @@ export const reportingExportModalProvider = ({
       generateExportUrl: generateExportUrlPDF,
       reportType: 'printablePdfV2',
       requiresSavedState,
-      helpText: (
-        <FormattedMessage
-          id="reporting.printablePdfV2.helpText"
-          defaultMessage="Select the file type you would like to export for this visualization."
-        />
-      ),
-      generateExportButton: (
-        <FormattedMessage
-          id="reporting.printablePdfV2.generateButtonLabel"
-          defaultMessage="Export file"
-        />
-      ),
       layoutOption: objectType === 'dashboard' ? ('print' as const) : undefined,
       renderLayoutOptionSwitch: objectType === 'dashboard',
       renderCopyURLButton: true,
@@ -268,15 +256,6 @@ export const reportingExportModalProvider = ({
       generateExportUrl: generateExportUrlPNG,
       reportType: 'pngV2',
       requiresSavedState,
-      helpText: (
-        <FormattedMessage
-          id="reporting.pngV2.helpText"
-          defaultMessage="Select the file type you would like to export for this visualization."
-        />
-      ),
-      generateExportButton: (
-        <FormattedMessage id="reporting.pngV2.generateButtonLabel" defaultMessage="Export file" />
-      ),
       layoutOption: objectType === 'dashboard' ? ('print' as const) : undefined,
       renderCopyURLButton: true,
     });

src/plugins/share/public/components/tabs/export/export_content.tsx

@@ -48,11 +48,16 @@ const ExportContentUi = ({
   const [usePrintLayout, setPrintLayout] = useState(false);
 
   const radioOptions = useMemo(() => {
-    return aggregateReportTypes
-      .filter(({ reportType }) => reportType)
-      .map(({ reportType, label }) => {
-        return { id: reportType, label, 'data-test-subj': `${reportType}-radioOption` };
-      }) as EuiRadioGroupOption[];
+    return aggregateReportTypes.reduce<EuiRadioGroupOption[]>((acc, { reportType, label }) => {
+      if (reportType) {
+        acc.push({
+          id: reportType,
+          label,
+          'data-test-subj': `${reportType}-radioOption`,
+        });
+      }
+      return acc;
+    }, []);
   }, [aggregateReportTypes]);
 
   const [selectedRadio, setSelectedRadio] = useState<SupportedExportTypes>(
@@ -62,6 +67,7 @@ const ExportContentUi = ({
   const {
     generateExportButton,
     helpText,
+    warnings = [],
     renderCopyURLButton,
     generateExport,
     generateExportUrl,
@@ -168,42 +174,56 @@ const ExportContentUi = ({
     return (
       <EuiButton
         fill
-        color={isDirty ? 'warning' : 'primary'}
+        color={(isDirty && renderCopyURLButton) || warnings.length > 0 ? 'warning' : 'primary'}
         onClick={getReport}
         data-test-subj="generateReportButton"
         isLoading={isCreatingExport}
       >
-        {generateExportButton}
+        {generateExportButton ?? (
+          <FormattedMessage id="share.export.generateButtonLabel" defaultMessage="Export file" />
+        )}
       </EuiButton>
     );
-  }, [generateExportButton, getReport, isCreatingExport, isDirty]);
+  }, [
+    generateExportButton,
+    getReport,
+    isCreatingExport,
+    isDirty,
+    renderCopyURLButton,
+    warnings.length,
+  ]);
 
   const renderRadioOptions = () => {
     if (radioOptions.length > 1) {
       return (
-        <EuiFlexGroup direction="row" justifyContent={'spaceBetween'}>
-          <EuiRadioGroup
-            options={radioOptions}
-            onChange={(id) => setSelectedRadio(id as SupportedExportTypes)}
-            name="image reporting radio group"
-            idSelected={selectedRadio}
-            legend={{
-              children: <FormattedMessage id="share.fileType" defaultMessage="File type" />,
-            }}
-          />
-        </EuiFlexGroup>
+        <>
+          <EuiSpacer size="m" />
+          <EuiFlexGroup direction="row" justifyContent={'spaceBetween'}>
+            <EuiRadioGroup
+              options={radioOptions}
+              onChange={(id) => setSelectedRadio(id as SupportedExportTypes)}
+              name="image reporting radio group"
+              idSelected={selectedRadio}
+              legend={{
+                children: <FormattedMessage id="share.fileType" defaultMessage="File type" />,
+              }}
+            />
+          </EuiFlexGroup>
+        </>
       );
     }
   };
 
-  const renderHelpText = () => {
-    const showHelpText = publicAPIEnabled && isDirty;
+  const renderDirtyWarning = () => {
     return (
-      showHelpText && (
+      renderCopyURLButton &&
+      publicAPIEnabled &&
+      isDirty && (
         <>
-          <EuiSpacer size="s" />
+          <EuiSpacer size="m" />
           <EuiCallOut
             color="warning"
+            iconType="warning"
             title={
               <FormattedMessage id="share.link.warning.title" defaultMessage="Unsaved changes" />
             }
@@ -218,19 +238,35 @@ const ExportContentUi = ({
     );
   };
 
+  const renderWarnings = (warning: { title: string; message: string }) => (
+    <>
+      <EuiSpacer size="m" />
+      <EuiCallOut color="warning" iconType="warning" title={warning.title}>
+        {warning.message}
+      </EuiCallOut>
+    </>
+  );
+
   return (
     <>
       <EuiForm>
-        <>{helpText}</>
-        <EuiSpacer size="m" />
-        <>{renderRadioOptions()}</>
-        {renderHelpText()}
-        <EuiSpacer size="xl" />
+        <EuiText size="s">
+          {helpText ?? (
+            <FormattedMessage
+              id="share.export.helpText"
+              defaultMessage="Select the file type you would like to export for this visualization."
+            />
+          )}
+        </EuiText>
+        {renderRadioOptions()}
+        {renderDirtyWarning()}
+        {warnings.map(renderWarnings)}
+        <EuiSpacer size="l" />
       </EuiForm>
       <EuiFlexGroup justifyContent="flexEnd" responsive={false} gutterSize="m">
-        <>{renderLayoutOptionsSwitch()}</>
-        <>{showCopyURLButton()}</>
-        <>{renderGenerateReportButton()}</>
+        {renderLayoutOptionsSwitch()}
+        {showCopyURLButton()}
+        {renderGenerateReportButton()}
       </EuiFlexGroup>
     </>
   );

src/plugins/share/public/components/tabs/link/link_content.tsx

@@ -138,6 +138,7 @@ export const LinkContent = ({
             <EuiSpacer size="m" />
             <EuiCallOut
               color="warning"
+              iconType="warning"
               title={
                 <FormattedMessage id="share.link.warning.title" defaultMessage="Unsaved changes" />
               }

src/plugins/share/public/types.ts

@@ -132,11 +132,12 @@ export interface ShareMenuItemV2 extends ShareMenuItemBase {
   layoutOption?: 'print';
   generateCopyUrl?: URL;
   renderCopyURLButton?: boolean;
+  warnings?: Array<{ title: string; message: string }>;
 }
 
 export interface ShareMenuProviderV2 {
   readonly id: string;
-  getShareMenuItems: (context: ShareContext) => Array<Omit<ShareMenuItemV2, 'intl'>>;
+  getShareMenuItems: (context: ShareContext) => ShareMenuItemV2[];
 }
 export interface ShareMenuProviderLegacy {
   readonly id: string;