PublicDashboards: Add delete public dashboard button in public dashboard modal (#58095)

- Delete public dashboard button added in public dashboard modal
- Delete public dashboard button refactored in order to be used in audit table and public dashboard modal
- Tests added
- RTK Query api modified, in order to keep cached data because of having to show public dashboard modal once delete modal is closed.
- RTK Query specific cached data invalidated for public dashboard
- Save button text changed: Create public dashboard when it was never created. Save public dashboard when there's a public dashboard already created
- Public Dashboard modal subscribed to DashboardModel metadata changes

public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardButton.tsx

@@ -1,47 +1,60 @@
 import React from 'react';
 
-import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { Button, ComponentSize, Icon, ModalsController, Spinner } from '@grafana/ui/src';
-
-import { useDeletePublicDashboardMutation } from '../../../dashboard/api/publicDashboardApi';
-import { ListPublicDashboardResponse } from '../../types';
+import { Button, ModalsController, ButtonProps } from '@grafana/ui/src';
+import { useDeletePublicDashboardMutation } from 'app/features/dashboard/api/publicDashboardApi';
+import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 
 import { DeletePublicDashboardModal } from './DeletePublicDashboardModal';
 
+export interface PublicDashboardDeletion {
+  uid: string;
+  dashboardUid: string;
+  title: string;
+}
+
 export const DeletePublicDashboardButton = ({
+  dashboard,
   publicDashboard,
-  size,
+  loader,
+  children,
+  onDismiss,
+  ...rest
 }: {
-  publicDashboard: ListPublicDashboardResponse;
-  size: ComponentSize;
-}) => {
+  dashboard?: DashboardModel;
+  publicDashboard: PublicDashboardDeletion;
+  loader?: JSX.Element;
+  children: React.ReactNode;
+  onDismiss?: () => void;
+} & ButtonProps) => {
   const [deletePublicDashboard, { isLoading }] = useDeletePublicDashboardMutation();
 
-  const onDeletePublicDashboardClick = (pd: ListPublicDashboardResponse, onDelete: () => void) => {
-    deletePublicDashboard({ uid: pd.uid, dashboardUid: pd.dashboardUid, dashboardTitle: pd.title });
+  const onDeletePublicDashboardClick = (pd: PublicDashboardDeletion, onDelete: () => void) => {
+    deletePublicDashboard({
+      dashboard,
+      uid: pd.uid,
+      dashboardUid: pd.dashboardUid,
+    });
     onDelete();
   };
 
-  const selectors = e2eSelectors.pages.PublicDashboards;
-
   return (
     <ModalsController>
       {({ showModal, hideModal }) => (
         <Button
-          fill="text"
           aria-label="Delete public dashboard"
           title="Delete public dashboard"
           onClick={() =>
             showModal(DeletePublicDashboardModal, {
               dashboardTitle: publicDashboard.title,
               onConfirm: () => onDeletePublicDashboardClick(publicDashboard, hideModal),
-              onDismiss: hideModal,
+              onDismiss: () => {
+                onDismiss ? onDismiss() : hideModal();
+              },
             })
           }
-          data-testid={selectors.ListItem.trashcanButton}
-          size={size}
+          {...rest}
         >
-          {isLoading ? <Spinner /> : <Icon size={size} name="trash-alt" />}
+          {isLoading && loader ? loader : children}
         </Button>
       )}
     </ModalsController>

public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardModal.tsx

@@ -12,7 +12,7 @@ const Body = ({ title }: { title?: string }) => {
       <p className={styles.title}>Do you want to delete this public dashboard?</p>
       <p className={styles.description}>
         {title
-          ? `This will delete the public dashboard for ${title}. Your dashboard will not be deleted.`
+          ? `This will delete the public dashboard for "${title}". Your dashboard will not be deleted.`
           : 'Orphaned public dashboard will be deleted'}
       </p>
     </>

public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx

@@ -94,7 +94,15 @@ export const PublicDashboardListTable = () => {
                         <Icon size={responsiveSize} name="cog" />
                       </LinkButton>
                       {hasWritePermissions && (
-                        <DeletePublicDashboardButton publicDashboard={pd} size={responsiveSize} />
+                        <DeletePublicDashboardButton
+                          variant="primary"
+                          fill="text"
+                          data-testid={selectors.ListItem.trashcanButton}
+                          publicDashboard={pd}
+                          loader={<Spinner />}
+                        >
+                          <Icon size={responsiveSize} name="trash-alt" />
+                        </DeletePublicDashboardButton>
                       )}
                     </ButtonGroup>
                   </td>
@@ -134,9 +142,10 @@ function getStyles(theme: GrafanaTheme2, isMobile: boolean) {
     orphanedTitle: css`
       display: flex;
       align-items: center;
+      gap: ${theme.spacing(1)};
 
       p {
-        margin: ${theme.spacing(0, 1, 0, 0)};
+        margin: ${theme.spacing(0)};
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;