feat: integrate ResourceRecommenderActionMenu and enhance ExportToCsv component with new props

Author: AbhishekA1509

src/components/ResourceBrowser/ResourceList/ResourceFilterOptions.tsx

@@ -26,6 +26,7 @@ import {
     GVK_FILTER_API_VERSION_QUERY_PARAM_KEY,
     GVK_FILTER_KIND_QUERY_PARAM_KEY,
     GVKOptionValueType,
+    Icon,
     Nodes,
     OptionType,
     ResourceRecommenderHeaderType,
@@ -55,6 +56,7 @@ const getResourceRecommendationsCSVData = importComponentFromFELibrary(
     null,
     'function',
 )
+const ResourceRecommenderActionMenu = importComponentFromFELibrary('ResourceRecommenderActionMenu', null, 'function')
 
 const ResourceFilterOptions = ({
     selectedResource,
@@ -73,6 +75,7 @@ const ResourceFilterOptions = ({
     showAbsoluteValuesInResourceRecommender,
     selectedAPIVersionGVKFilter,
     selectedKindGVKFilter,
+    resourceLastScannedOnDetails,
 }: ResourceFilterOptionsProps) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
     const { clusterId } = useParams<K8sResourceListURLParams>()
@@ -311,13 +314,21 @@ const ResourceFilterOptions = ({
                         />
                     </div>
 
-                    {isResourceRecommender && getResourceRecommendationsCSVData && (
-                        <ExportToCsv
-                            fileName={FILE_NAMES.ResourceRecommendations}
-                            showOnlyIcon
-                            disabled={isResourceListLoading}
-                            apiPromise={getResourcesToExport}
-                        />
+                    {isResourceRecommender && ResourceRecommenderActionMenu && getResourceRecommendationsCSVData && (
+                        <ResourceRecommenderActionMenu {...resourceLastScannedOnDetails}>
+                            <ExportToCsv
+                                fileName={FILE_NAMES.ResourceRecommendations}
+                                disabled={isResourceListLoading}
+                                apiPromise={getResourcesToExport}
+                                triggerElementClassname="bg__hover dc__transparent flexbox dc__gap-8 px-8 py-6 w-100"
+                                hideExportResultModal
+                            >
+                                <span className="mt-2 flex dc__no-shrink">
+                                    <Icon name="ic-download" size={16} color="N800" />
+                                </span>
+                                <span className="cn-9 fs-13 fw-4 lh-1-5">Export CSV</span>
+                            </ExportToCsv>
+                        </ResourceRecommenderActionMenu>
                     )}
                 </div>
             </div>

src/components/ResourceBrowser/Types.ts

@@ -27,6 +27,7 @@ import {
     K8sResourceDetailType,
     OptionType,
     ResourceDetail,
+    ResourceRecommenderActionMenuProps,
     SelectedResourceType,
     SelectPickerOptionType,
     ServerErrors,
@@ -114,6 +115,7 @@ export interface ResourceFilterOptionsProps
         reloadGVKOptions: () => void
         gvkOptionsError: ServerErrors
     }
+    resourceLastScannedOnDetails?: Omit<ResourceRecommenderActionMenuProps, 'children'>
     showAbsoluteValuesInResourceRecommender?: boolean
     selectedAPIVersionGVKFilter?: string
     selectedKindGVKFilter?: string

src/components/common/ExportToCsv/ExportToCsv.tsx

@@ -26,6 +26,9 @@ import {
     DetailsProgressing,
     GenericSectionErrorState,
     logExceptionToSentry,
+    ToastManager,
+    ToastVariantType,
+    Tooltip,
     VisibleModal,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -45,6 +48,9 @@ const ExportToCsv = <ConfigValueType extends string = string>({
     disabled = false,
     showOnlyIcon = false,
     configuration,
+    hideExportResultModal = false,
+    triggerElementClassname,
+    children,
 }: ExportToCsvProps<ConfigValueType>) => {
     const [selectedConfig, setSelectedConfig] = useState<Record<ConfigValueType, boolean>>(
         getDefaultValueFromConfiguration(configuration),
@@ -99,6 +105,12 @@ const ExportToCsv = <ConfigValueType extends string = string>({
             } catch (err) {
                 setErrorExportingData(true)
 
+                if (hideExportResultModal) {
+                    ToastManager.showToast({
+                        variant: ToastVariantType.error,
+                        description: `Failed to export ${fileNameKey || ''}. Please try again.`,
+                    })
+                }
                 // eslint-disable-next-line no-console
                 console.error(
                     `Data export failed at ${moment().format('HH:mm:ss')}. Reason - ${err.message || err.name}`,
@@ -219,34 +231,48 @@ const ExportToCsv = <ConfigValueType extends string = string>({
 
     return (
         <div>
-            <Button
-                {...(showOnlyIcon
-                    ? {
-                          icon: <ExportIcon />,
-                          ariaLabel: 'Export CSV',
-                          showAriaLabelInTippy: false,
-                      }
-                    : {
-                          text: 'Export CSV',
-                          startIcon: <ExportIcon />,
-                      })}
-                onClick={handleExportToCsvClick}
-                size={ComponentSizeType.medium}
-                variant={ButtonVariantType.secondary}
-                dataTestId="export-csv-button"
-                disabled={disabled}
-                showTooltip={disabled}
-                tooltipProps={{
-                    content: 'Nothing to export',
-                }}
-            />
+            {children ? (
+                <Tooltip alwaysShowTippyOnHover={disabled} content="Nothing to export">
+                    <button
+                        data-testid="export-csv-button"
+                        type="button"
+                        onClick={handleExportToCsvClick}
+                        disabled={disabled}
+                        className={triggerElementClassname}
+                    >
+                        {children}
+                    </button>
+                </Tooltip>
+            ) : (
+                <Button
+                    {...(showOnlyIcon
+                        ? {
+                              icon: <ExportIcon />,
+                              ariaLabel: 'Export CSV',
+                              showAriaLabelInTippy: false,
+                          }
+                        : {
+                              text: 'Export CSV',
+                              startIcon: <ExportIcon />,
+                          })}
+                    onClick={handleExportToCsvClick}
+                    size={ComponentSizeType.medium}
+                    variant={ButtonVariantType.secondary}
+                    dataTestId="export-csv-button"
+                    disabled={disabled}
+                    showTooltip={disabled}
+                    tooltipProps={{
+                        content: 'Nothing to export',
+                    }}
+                />
+            )}
             <CSVLink
                 ref={csvRef}
                 filename={`${fileName}_${moment().format(Moment12HourExportFormat)}.csv`}
                 headers={CSV_HEADERS[fileName] || []}
                 data={dataToExport || []}
             />
-            {(showExportingModal || isConfigurationAvailable) && (
+            {!hideExportResultModal && (showExportingModal || isConfigurationAvailable) && (
                 <VisibleModal className="export-to-csv-modal" data-testid="export-to-csv-modal">
                     <div className="modal__body mt-40 p-0">
                         <h2 className="cn-9 fw-6 fs-16 m-0 dc__border-bottom px-20 py-12">Export to CSV</h2>

src/components/common/ExportToCsv/types.ts

@@ -16,12 +16,11 @@
 
 import { FILE_NAMES } from './constants'
 
-export interface ExportToCsvProps<ConfigValueType extends string = string> {
+export type ExportToCsvProps<ConfigValueType extends string = string> = {
     apiPromise: (selectedConfig: Record<ConfigValueType, boolean>) => Promise<unknown[]>
     fileName: FILE_NAMES
     className?: string
     disabled?: boolean
-    showOnlyIcon?: boolean
     /**
      * Configuration for the export csv
      */
@@ -33,7 +32,29 @@ export interface ExportToCsvProps<ConfigValueType extends string = string> {
             description?: string
         }[]
     }
-}
+    /**
+     * @default false
+     * If true, the export result modal will not be shown after the export is completed.
+     */
+    hideExportResultModal?: boolean
+} & (
+    | {
+          /**
+           * If given would replace the Button component with the button tag and the children will be rendered inside it.
+           */
+          triggerElementClassname: string
+          /**
+           * Content inside the button
+           */
+          children: React.ReactNode
+          showOnlyIcon?: never
+      }
+    | {
+          children?: never
+          triggerElementClassname?: never
+          showOnlyIcon?: boolean
+      }
+)
 
 export interface ExportConfigurationProps<ConfigValueType extends string>
     extends Pick<ExportToCsvProps<ConfigValueType>, 'configuration'> {