Display MenuItem within mantine Menu (#23573)

* Display MenuItem within mantine Menu

* Use better named props

* Fixing lint

Author: simonychuang

graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/Constants.ts

@@ -21,11 +21,11 @@ const getDashboardTableElements = (pluggableAttributes?: {
   attributeNames?: Array<string>;
   attributes?: Array<Attribute>;
 }) => {
-  const getDefaultLayout = (isEvidenceModal: boolean) => ({
+  const getDefaultLayout = (hideAdditionalColumns: boolean) => ({
     entityTableId: 'dashboards',
     defaultPageSize: 20,
     defaultSort: { attributeId: 'title', direction: 'asc' } as Sort,
-    defaultDisplayedAttributes: isEvidenceModal
+    defaultDisplayedAttributes: hideAdditionalColumns
       ? ['title', 'description', 'summary']
       : ['title', 'description', 'summary', 'favorite', ...(pluggableAttributes?.attributeNames || [])],
   });

graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/DashboardActions.tsx

@@ -45,7 +45,8 @@ const _extractErrorMessage = (error: FetchError) =>
 
 type Props = {
   dashboard: View;
-  isEvidenceModal?: boolean;
+  hideDelete?: boolean;
+  hideShare?: boolean;
 };
 
 const usePluggableDashboardActions = (dashboard: View) => {
@@ -81,11 +82,11 @@ const usePluggableDashboardActions = (dashboard: View) => {
 const DashboardDeleteAction = ({
   dashboard,
   refetchDashboards,
-  isEvidenceModal = false,
+  hideDelete = false,
 }: {
   dashboard: View;
   refetchDashboards: () => void;
-  isEvidenceModal?: boolean;
+  hideDelete?: boolean;
 }) => {
   const { deselectEntity } = useSelectedEntities();
   const paginationQueryParameter = usePaginationQueryParameter();
@@ -112,39 +113,40 @@ const DashboardDeleteAction = ({
     }
   }, [dashboard, deselectEntity, refetchDashboards, paginationQueryParameter]);
 
-  return isEvidenceModal ? null : <DeleteMenuItem onClick={onDashboardDelete} />;
+  return hideDelete ? null : <DeleteMenuItem onClick={onDashboardDelete} />;
 };
 
-const DashboardActions = ({ dashboard, isEvidenceModal = false }: Props) => {
+const DashboardActions = ({ dashboard, hideDelete = false, hideShare = false }: Props) => {
   const [showShareModal, setShowShareModal] = useState(false);
   const { actions: pluggableActions, actionModals: pluggableActionModals } = usePluggableDashboardActions(dashboard);
   const currentUser = useCurrentUser();
   const { refetch } = useTableFetchContext();
 
   const moreActions = [
     pluggableActions.length ? pluggableActions : null,
-    pluggableActions.length && !isEvidenceModal ? <MenuItem divider key="divider" /> : null,
+    pluggableActions.length && !hideDelete ? <MenuItem divider key="divider" /> : null,
     isAnyPermitted(currentUser.permissions, [`view:edit:${dashboard.id}`, 'view:edit']) ? (
       <DashboardDeleteAction
         dashboard={dashboard}
         refetchDashboards={refetch}
         key="delete-action"
-        isEvidenceModal={isEvidenceModal}
+        hideDelete={hideDelete}
       />
     ) : null,
   ].filter(Boolean);
 
   return (
     <>
-      {isEvidenceModal || (
+      {hideShare || (
         <ShareButton
           bsSize="xsmall"
           entityId={dashboard.id}
           entityType="dashboard"
           onClick={() => setShowShareModal(true)}
         />
       )}
-      {!!moreActions.length && isEvidenceModal ? moreActions[0] : <MoreActions>{moreActions}</MoreActions>}
+      <MoreActions>{moreActions}</MoreActions>
+
       {showShareModal && (
         <EntityShareModal
           entityId={dashboard.id}

graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/DashboardsOverview.tsx

@@ -28,18 +28,20 @@ import usePluggableEntityTableElements from 'hooks/usePluggableEntityTableElemen
 import BulkActions from './BulkActions';
 
 type Props = {
-  isEvidenceModal?: boolean;
+  hideShare?: boolean;
+  hideAdditionalColumns?: boolean;
+  hideDelete?: boolean;
 };
 
-const DashboardsOverview = ({ isEvidenceModal = false }: Props) => {
+const DashboardsOverview = ({ hideAdditionalColumns = false, hideShare = false, hideDelete = false }: Props) => {
   const { pluggableColumnRenderers, pluggableAttributes, pluggableExpandedSections } =
     usePluggableEntityTableElements<View>(null, 'dashboard');
   const { getDefaultLayout, columnOrder, additionalAttributes } = getDashboardTableElements(pluggableAttributes);
   const customColumnRenderers = useColumnRenderers(pluggableColumnRenderers);
 
   const renderDashboardActions = useCallback(
-    (dashboard: View) => <DashboardActions dashboard={dashboard} isEvidenceModal={isEvidenceModal} />,
-    [isEvidenceModal],
+    (dashboard: View) => <DashboardActions dashboard={dashboard} hideDelete={hideDelete} hideShare={hideShare} />,
+    [hideDelete, hideShare],
   );
   const expandedSections = useMemo(
     () => ({
@@ -56,7 +58,7 @@ const DashboardsOverview = ({ isEvidenceModal = false }: Props) => {
         <QueryHelper entityName="dashboard" commonFields={['id', 'title', 'description', 'summary']} />
       }
       entityActions={renderDashboardActions}
-      tableLayout={getDefaultLayout(isEvidenceModal)}
+      tableLayout={getDefaultLayout(hideAdditionalColumns)}
       fetchEntities={fetchDashboards}
       additionalAttributes={additionalAttributes}
       expandedSectionsRenderer={expandedSections}