From f523841e2b5e50a242e1ad4b13d840ef49a3ed9c Mon Sep 17 00:00:00 2001
From: Olha Tomylko <otomylko@redhat.com>
Date: Wed, 15 Apr 2026 10:44:34 +0200
Subject: [PATCH 1/3] feat: enable create actions in dashboard hub, generic
 page and landing page

---
 .../DashboardTable/DashboardTable.tsx         | 18 +++--
 src/Components/DashboardHub/Header/Header.tsx | 16 ++---
 .../DashboardHub/ImportModal/ImportModal.tsx  |  6 ++
 .../DuplicateModal/DuplicateModal.tsx         | 11 ++-
 src/Components/Header/Header.tsx              | 69 ++++++++++++++-----
 src/Modules/DashboardHub.tsx                  |  2 +-
 src/hooks/useCreateBlankDashboard.ts          | 12 ++--
 src/hooks/useDuplicateDashboard.ts            | 10 +--
 src/hooks/useImportDashboard.ts               |  6 +-
 src/state/dashboardsAtom.ts                   | 51 +++++++++++++-
 10 files changed, 148 insertions(+), 53 deletions(-)

diff --git a/src/Components/DashboardHub/DashboardTable/DashboardTable.tsx b/src/Components/DashboardHub/DashboardTable/DashboardTable.tsx
index ab9cf30..d007930 100644
--- a/src/Components/DashboardHub/DashboardTable/DashboardTable.tsx
+++ b/src/Components/DashboardHub/DashboardTable/DashboardTable.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Table, Tbody, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table';
 import { ActionsColumn } from '@patternfly/react-table';
-import { Button, Content, TooltipPosition } from '@patternfly/react-core';
+import { Button, Content, Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { DashboardTemplate } from '../../../api/dashboard-templates';
 import { setDefaultDashboardAtom } from '../../../state/dashboardsAtom';
@@ -9,6 +9,7 @@ import { CodeIcon, CopyIcon, EditAltIcon, HomeIcon, TrashIcon, UsersIcon } from
 import { useExportDashboard } from '../../../hooks/useExportDashboard';
 import { useDeleteDashboard } from '../../../hooks/useDeleteDashboard';
 import { DeleteDashboardModal } from '../DeleteDashboardModal/DeleteDashboardModal';
+import { DuplicateModal } from '../../DuplicateModal/DuplicateModal';
 import DateFormat from '@redhat-cloud-services/frontend-components/DateFormat';
 import { useFlag } from '@unleash/proxy-client-react';
 import { useAddNotification } from '../../../state/notificationsAtom';
@@ -27,15 +28,15 @@ interface DashboardTableProps {
   onRefetchDashboards: () => void;
 }
 
-export const ButtonCopy: React.FunctionComponent = () => {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  return <Button variant="plain" aria-label="Copy" icon={<CopyIcon />} onClick={() => {}} />;
+export const ButtonCopy: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {
+  return <Button variant="plain" aria-label="Duplicate" icon={<CopyIcon />} onClick={onClick} />;
 };
 
 export const DashboardTable: React.FunctionComponent<DashboardTableProps> = ({ dashboards, onRefetchDashboards }) => {
   const { exportDashboard, isLoading, error } = useExportDashboard();
   const { deleteDashboard, isLoading: isDeleting } = useDeleteDashboard();
   const [dashboardToDelete, setDashboardToDelete] = useState<Dashboard | null>(null);
+  const [duplicateDashboardId, setDuplicateDashboardId] = useState<number | null>(null);
   const isEnabledDelete = useFlag('platform.widget-layout.delete-dashboard');
   const addNotification = useAddNotification();
   const setDefaultDashboard = useSetAtom(setDefaultDashboardAtom);
@@ -151,6 +152,11 @@ export const DashboardTable: React.FunctionComponent<DashboardTableProps> = ({ d
 
   return (
     <>
+      <DuplicateModal
+        isOpen={duplicateDashboardId !== null}
+        onClose={() => setDuplicateDashboardId(null)}
+        preselectedDashboardId={duplicateDashboardId}
+      />
       <DeleteDashboardModal
         isOpen={dashboardToDelete !== null}
         dashboardName={dashboardToDelete?.name ?? ''}
@@ -181,7 +187,9 @@ export const DashboardTable: React.FunctionComponent<DashboardTableProps> = ({ d
               </Td>
               <Td isActionCell>
                 <Td className="pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-gap-sm">
-                  <ButtonCopy />
+                  <Tooltip content="Duplicate dashboard" position={TooltipPosition.left}>
+                    <ButtonCopy onClick={() => setDuplicateDashboardId(dashboard.id)} />
+                  </Tooltip>
                   <ActionsColumn items={getRowActions(dashboard)} />
                 </Td>
               </Td>
diff --git a/src/Components/DashboardHub/Header/Header.tsx b/src/Components/DashboardHub/Header/Header.tsx
index 454fdc7..a398ba9 100644
--- a/src/Components/DashboardHub/Header/Header.tsx
+++ b/src/Components/DashboardHub/Header/Header.tsx
@@ -4,14 +4,12 @@ import { ImportModal } from '../ImportModal/ImportModal';
 import { CreateModal } from '../../CreateModal/CreateModal';
 import { DuplicateModal } from '../../DuplicateModal/DuplicateModal';
 import { CodeIcon, CopyIcon, ExternalLinkAltIcon, ThIcon } from '@patternfly/react-icons';
-import { DashboardTemplate } from '../../../api/dashboard-templates';
 
 interface CreateDashboardDropdownProps {
   onRefetchDashboards: () => void;
-  dashboards: DashboardTemplate[];
 }
 
-const CreateDashboardDropdown: React.FunctionComponent<CreateDashboardDropdownProps> = ({ onRefetchDashboards, dashboards }) => {
+const CreateDashboardDropdown: React.FunctionComponent<CreateDashboardDropdownProps> = ({ onRefetchDashboards }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isImportModalOpen, setIsImportModalOpen] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -44,12 +42,7 @@ const CreateDashboardDropdown: React.FunctionComponent<CreateDashboardDropdownPr
         </DropdownList>
       </Dropdown>
       <CreateModal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} onSuccess={onRefetchDashboards} />
-      <DuplicateModal
-        isOpen={isDuplicateModalOpen}
-        onClose={() => setIsDuplicateModalOpen(false)}
-        onSuccess={onRefetchDashboards}
-        dashboards={dashboards}
-      />
+      <DuplicateModal isOpen={isDuplicateModalOpen} onClose={() => setIsDuplicateModalOpen(false)} onSuccess={onRefetchDashboards} />
       <ImportModal isOpen={isImportModalOpen} onClose={() => setIsImportModalOpen(false)} onSuccess={onRefetchDashboards} />
     </>
   );
@@ -57,10 +50,9 @@ const CreateDashboardDropdown: React.FunctionComponent<CreateDashboardDropdownPr
 
 interface HeaderProps {
   onRefetchDashboards: () => void;
-  dashboards: DashboardTemplate[];
 }
 
-const Header: React.FunctionComponent<HeaderProps> = ({ onRefetchDashboards, dashboards }) => {
+const Header: React.FunctionComponent<HeaderProps> = ({ onRefetchDashboards }) => {
   return (
     <PageSection hasBodyWrapper={false} className="widg-c-page__main-section--header pf-v6-u-p-lg pf-v6-u-p-r-0-on-sm">
       <Flex className="widg-l-flex--header" direction={{ default: 'column', lg: 'row' }}>
@@ -77,7 +69,7 @@ const Header: React.FunctionComponent<HeaderProps> = ({ onRefetchDashboards, das
         </FlexItem>
 
         <FlexItem align={{ default: 'alignLeft', lg: 'alignRight' }}>
-          <CreateDashboardDropdown onRefetchDashboards={onRefetchDashboards} dashboards={dashboards} />
+          <CreateDashboardDropdown onRefetchDashboards={onRefetchDashboards} />
         </FlexItem>
       </Flex>
     </PageSection>
diff --git a/src/Components/DashboardHub/ImportModal/ImportModal.tsx b/src/Components/DashboardHub/ImportModal/ImportModal.tsx
index abd38a4..042d0d5 100644
--- a/src/Components/DashboardHub/ImportModal/ImportModal.tsx
+++ b/src/Components/DashboardHub/ImportModal/ImportModal.tsx
@@ -1,6 +1,7 @@
 import { Alert, Button, Form, FormGroup, Modal, ModalBody, ModalFooter, ModalHeader, TextInput } from '@patternfly/react-core';
 import React, { useEffect } from 'react';
 import { CodeEditorImport } from '../CodeEditor/CodeEditor';
+import { useAddNotification } from '../../../state/notificationsAtom';
 import { useImportDashboard } from '../../../hooks/useImportDashboard';
 
 interface ImportModalProps {
@@ -11,6 +12,7 @@ interface ImportModalProps {
 
 export const ImportModal: React.FunctionComponent<ImportModalProps> = ({ isOpen, onClose, onSuccess }) => {
   const { configString, setConfigString, name, setName, isFormValid, importDashboard, isLoading, error, reset } = useImportDashboard();
+  const addNotification = useAddNotification();
 
   const handleNameChange = (_event: React.FormEvent<HTMLInputElement>, name: string) => {
     setName(name);
@@ -19,6 +21,10 @@ export const ImportModal: React.FunctionComponent<ImportModalProps> = ({ isOpen,
   const handleSubmit = async () => {
     const result = await importDashboard();
     if (result) {
+      addNotification({
+        variant: 'success',
+        title: `Dashboard '${name}' imported successfully`,
+      });
       onSuccess?.();
       onClose();
     }
diff --git a/src/Components/DuplicateModal/DuplicateModal.tsx b/src/Components/DuplicateModal/DuplicateModal.tsx
index ebc4204..bbbe109 100644
--- a/src/Components/DuplicateModal/DuplicateModal.tsx
+++ b/src/Components/DuplicateModal/DuplicateModal.tsx
@@ -16,16 +16,18 @@ import React, { useEffect } from 'react';
 import { CopyIcon } from '@patternfly/react-icons';
 import { useAddNotification } from '../../state/notificationsAtom';
 import { useDuplicateDashboard } from '../../hooks/useDuplicateDashboard';
-import { DashboardTemplate } from '../../api/dashboard-templates';
+import { useAtomValue } from 'jotai';
+import { dashboardsAtom } from '../../state/dashboardsAtom';
 
 interface DuplicateModalProps {
   isOpen: boolean;
   onClose: () => void;
   onSuccess?: () => void;
-  dashboards: DashboardTemplate[];
+  preselectedDashboardId?: number | null;
 }
 
-export const DuplicateModal: React.FunctionComponent<DuplicateModalProps> = ({ isOpen, onClose, onSuccess, dashboards }) => {
+export const DuplicateModal: React.FunctionComponent<DuplicateModalProps> = ({ isOpen, onClose, onSuccess, preselectedDashboardId }) => {
+  const dashboards = useAtomValue(dashboardsAtom);
   const {
     name,
     setName,
@@ -66,6 +68,9 @@ export const DuplicateModal: React.FunctionComponent<DuplicateModalProps> = ({ i
   };
 
   useEffect(() => {
+    if (isOpen && preselectedDashboardId != null) {
+      setSelectedDashboardId(preselectedDashboardId);
+    }
     if (!isOpen) {
       reset();
     }
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 9cf59cb..6430910 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -24,7 +24,7 @@ import {
 } from '@patternfly/react-core';
 import React, { useRef, useState } from 'react';
 import { CodeIcon, CopyIcon, EditAltIcon, EllipsisVIcon, PlusCircleIcon, PlusIcon, ThIcon } from '@patternfly/react-icons';
-import { useAtom, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { drawerExpandedAtom } from '../../state/drawerExpandedAtom';
 import { templateIdAtom } from '../../state/templateAtom';
 import { resetDashboardTemplate } from '../../api/dashboard-templates';
@@ -33,10 +33,17 @@ import { WarningModal } from '@patternfly/react-component-groups';
 import { Link } from 'react-router-dom';
 import { useFlag } from '@unleash/proxy-client-react';
 import useGetDashboards from '../../hooks/useGetDashboards';
-import { DashboardTemplate } from '../../api/dashboard-templates';
+import { dashboardsAtom } from '../../state/dashboardsAtom';
+import { CreateModal } from '../CreateModal/CreateModal';
+import { ImportModal } from '../DashboardHub/ImportModal/ImportModal';
+import { DuplicateModal } from '../DuplicateModal/DuplicateModal';
 
-export const KebabDropdown = ({ dashboards }: { dashboards: DashboardTemplate[] }) => {
+export const KebabDropdown = () => {
+  const dashboards = useAtomValue(dashboardsAtom);
   const [isOpen, setIsOpen] = useState(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+  const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
   const [drilldownState, setDrilldownState] = useState({
     menuDrilledIn: [] as string[],
     drilldownPath: [] as string[],
@@ -100,7 +107,7 @@ export const KebabDropdown = ({ dashboards }: { dashboards: DashboardTemplate[]
       onGetMenuHeight={setHeight}
       ref={menuRef}
     >
-      <MenuContent menuHeight={`${menuHeights[drilldownState.activeMenu]}px`}>
+      <MenuContent menuHeight={drilldownState.activeMenu !== 'kebab-rootMenu' ? `${menuHeights[drilldownState.activeMenu]}px` : undefined}>
         <MenuList>
           {dashboards.length > 0 && (
             <>
@@ -137,13 +144,34 @@ export const KebabDropdown = ({ dashboards }: { dashboards: DashboardTemplate[]
                   Create new dashboard
                 </MenuItem>
                 <Divider component="li" />
-                <MenuItem itemId="share-dashboard" icon={<ThIcon />} isDisabled>
+                <MenuItem
+                  itemId="create-blank"
+                  icon={<ThIcon />}
+                  onClick={() => {
+                    setIsCreateModalOpen(true);
+                    setIsOpen(false);
+                  }}
+                >
                   Create from blank
                 </MenuItem>
-                <MenuItem itemId="copy-config" icon={<CodeIcon />} isDisabled>
+                <MenuItem
+                  itemId="import-config"
+                  icon={<CodeIcon />}
+                  onClick={() => {
+                    setIsImportModalOpen(true);
+                    setIsOpen(false);
+                  }}
+                >
                   Import from config string
                 </MenuItem>
-                <MenuItem itemId="duplicate-dashboard" icon={<CopyIcon />} isDisabled>
+                <MenuItem
+                  itemId="duplicate-dashboard"
+                  icon={<CopyIcon />}
+                  onClick={() => {
+                    setIsDuplicateModalOpen(true);
+                    setIsOpen(false);
+                  }}
+                >
                   Duplicate existing
                 </MenuItem>
               </DrilldownMenu>
@@ -161,15 +189,20 @@ export const KebabDropdown = ({ dashboards }: { dashboards: DashboardTemplate[]
   );
 
   return (
-    <MenuContainer
-      isOpen={isOpen}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
-      menu={menu}
-      menuRef={menuRef}
-      toggle={toggle}
-      toggleRef={toggleRef}
-      popperProps={{ position: 'end' }}
-    />
+    <>
+      <MenuContainer
+        isOpen={isOpen}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        menu={menu}
+        menuRef={menuRef}
+        toggle={toggle}
+        toggleRef={toggleRef}
+        popperProps={{ position: 'end' }}
+      />
+      <CreateModal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} />
+      <ImportModal isOpen={isImportModalOpen} onClose={() => setIsImportModalOpen(false)} />
+      <DuplicateModal isOpen={isDuplicateModalOpen} onClose={() => setIsDuplicateModalOpen(false)} />
+    </>
   );
 };
 
@@ -232,7 +265,7 @@ const Header = () => {
   const { currentUser } = useCurrentUser();
   const userName = currentUser?.first_name && currentUser?.last_name ? ` ${currentUser.first_name} ${currentUser.last_name}` : currentUser?.username;
   const isDashboardHub = useFlag('platform.widget-layout.dashboard-dropdown');
-  const { dashboards } = useGetDashboards();
+  useGetDashboards();
   return (
     <PageSection hasBodyWrapper={false} className="widg-c-page__main-section--header pf-v6-u-p-lg pf-v6-u-p-r-0-on-sm">
       <Flex className="widg-l-flex--header" direction={{ default: 'column', lg: 'row' }}>
@@ -250,7 +283,7 @@ const Header = () => {
               <Controls />
               {isDashboardHub && (
                 <ToolbarItem>
-                  <KebabDropdown dashboards={dashboards} />
+                  <KebabDropdown />
                 </ToolbarItem>
               )}
             </ToolbarContent>
diff --git a/src/Modules/DashboardHub.tsx b/src/Modules/DashboardHub.tsx
index eadc365..b0c6add 100644
--- a/src/Modules/DashboardHub.tsx
+++ b/src/Modules/DashboardHub.tsx
@@ -21,7 +21,7 @@ const DashboardHub = () => {
         element={
           <div className="dashboardHub">
             <Portal notifications={notifications} removeNotification={removeNotification} />
-            <Header onRefetchDashboards={fetchDashboards} dashboards={dashboards} />
+            <Header onRefetchDashboards={fetchDashboards} />
             <PageSection>
               <DashboardTable dashboards={dashboards} onRefetchDashboards={fetchDashboards} />
             </PageSection>
diff --git a/src/hooks/useCreateBlankDashboard.ts b/src/hooks/useCreateBlankDashboard.ts
index f2eb826..cb529a1 100644
--- a/src/hooks/useCreateBlankDashboard.ts
+++ b/src/hooks/useCreateBlankDashboard.ts
@@ -1,5 +1,7 @@
 import { useState } from 'react';
-import { DashboardTemplate, DashboardTemplatesError, TemplateConfig, importDashboardTemplate, setDefaultTemplate } from '../api/dashboard-templates';
+import { DashboardTemplate, DashboardTemplatesError, TemplateConfig } from '../api/dashboard-templates';
+import { useSetAtom } from 'jotai';
+import { createDashboardAtom } from '../state/dashboardsAtom';
 
 interface CreateBlankDashboardState {
   name: string;
@@ -32,6 +34,7 @@ type UseCreateBlankDashboardReturn = CreateBlankDashboardState & {
 
 export const useCreateBlankDashboard = (): UseCreateBlankDashboardReturn => {
   const [state, setState] = useState<CreateBlankDashboardState>(initState);
+  const create = useSetAtom(createDashboardAtom);
 
   const isFormValid = state.name.trim() !== '';
 
@@ -49,19 +52,16 @@ export const useCreateBlankDashboard = (): UseCreateBlankDashboardReturn => {
     setState((prev) => ({ ...prev, isLoading: true, error: null }));
 
     try {
-      const result = await importDashboardTemplate({
+      const result = await create({
         dashboardName: state.name,
         templateBase: {
           name: 'landingPage',
           displayName: 'Landing Page',
         },
         templateConfig: blankTemplateConfig,
+        setAsHomepage: state.setAsHomepage,
       });
 
-      if (state.setAsHomepage) {
-        await setDefaultTemplate(result.id);
-      }
-
       setState((prev) => ({ ...prev, isLoading: false }));
       return result;
     } catch (err) {
diff --git a/src/hooks/useDuplicateDashboard.ts b/src/hooks/useDuplicateDashboard.ts
index b313359..033850f 100644
--- a/src/hooks/useDuplicateDashboard.ts
+++ b/src/hooks/useDuplicateDashboard.ts
@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { DashboardTemplate, DashboardTemplatesError, copyDashboardTemplate, setDefaultTemplate } from '../api/dashboard-templates';
+import { useSetAtom } from 'jotai';
+import { duplicateDashboardAtom } from '../state/dashboardsAtom';
 
 interface DuplicateDashboardState {
   name: string;
@@ -28,6 +30,7 @@ type UseDuplicateDashboardReturn = DuplicateDashboardState & {
 
 export const useDuplicateDashboard = (): UseDuplicateDashboardReturn => {
   const [state, setState] = useState<DuplicateDashboardState>(initState);
+  const create = useSetAtom(duplicateDashboardAtom);
 
   const isFormValid = state.name.trim() !== '' && state.selectedDashboardId !== null;
 
@@ -47,11 +50,8 @@ export const useDuplicateDashboard = (): UseDuplicateDashboardReturn => {
     setState((prev) => ({ ...prev, isLoading: true, error: null }));
 
     try {
-      const newDashboard = await copyDashboardTemplate(state.selectedDashboardId, { dashboardName: state.name });
-
-      if (state.setAsHomepage) {
-        await setDefaultTemplate(newDashboard.id);
-      }
+      //const newDashboard = await copyDashboardTemplate(state.selectedDashboardId, { dashboardName: state.name });
+      const newDashboard = await create({ id: state.selectedDashboardId, dashboardName: state.name, setAsHomepage: state.setAsHomepage });
 
       setState((prev) => ({ ...prev, isLoading: false }));
       return newDashboard;
diff --git a/src/hooks/useImportDashboard.ts b/src/hooks/useImportDashboard.ts
index 7c53d3b..a6782ae 100644
--- a/src/hooks/useImportDashboard.ts
+++ b/src/hooks/useImportDashboard.ts
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { importDashboardTemplate } from '../api/dashboard-templates';
 import { DashboardTemplate } from '../api/dashboard-templates';
+import { useSetAtom } from 'jotai';
+import { importDashboardAtom } from '../state/dashboardsAtom';
 
 interface ImportDashboardState {
   configString: string;
@@ -26,6 +27,7 @@ type UseImportDashboardReturn = ImportDashboardState & {
 
 export const useImportDashboard = (): UseImportDashboardReturn => {
   const [state, setState] = useState<ImportDashboardState>(initState);
+  const create = useSetAtom(importDashboardAtom);
 
   const isFormValid = state.configString.trim() !== '' && state.name.trim() !== '';
 
@@ -45,7 +47,7 @@ export const useImportDashboard = (): UseImportDashboardReturn => {
         dashboardName: state.name,
       };
 
-      const result = await importDashboardTemplate(requestData);
+      const result = await create(requestData);
 
       setState((prev) => ({ ...prev, isLoading: false }));
       return result;
diff --git a/src/state/dashboardsAtom.ts b/src/state/dashboardsAtom.ts
index b09b6b6..c94c0d9 100644
--- a/src/state/dashboardsAtom.ts
+++ b/src/state/dashboardsAtom.ts
@@ -1,5 +1,13 @@
 import { atom } from 'jotai';
-import { DashboardTemplate, deleteDashboardTemplateFromHub, getUsersDashboards, setDefaultTemplate } from '../api/dashboard-templates';
+import {
+  DashboardTemplate,
+  TemplateConfig,
+  copyDashboardTemplate,
+  deleteDashboardTemplateFromHub,
+  getUsersDashboards,
+  importDashboardTemplate,
+  setDefaultTemplate,
+} from '../api/dashboard-templates';
 
 export const dashboardsAtom = atom<DashboardTemplate[]>([]);
 
@@ -14,3 +22,44 @@ export const setDefaultDashboardAtom = atom(null, async (_get, set, id: Dashboar
   const dashboards = await getUsersDashboards();
   set(dashboardsAtom, dashboards);
 });
+
+export const createDashboardAtom = atom(
+  null,
+  async (
+    _get,
+    set,
+    data: { dashboardName: string; templateBase: { name: string; displayName: string }; templateConfig: TemplateConfig; setAsHomepage?: boolean }
+  ) => {
+    const { setAsHomepage, ...importData } = data;
+    const result = await importDashboardTemplate(importData);
+    if (setAsHomepage) {
+      await setDefaultTemplate(result.id);
+    }
+    const dashboards = await getUsersDashboards();
+    set(dashboardsAtom, dashboards);
+    return result;
+  }
+);
+
+export const importDashboardAtom = atom(
+  null,
+  async (_get, set, data: { dashboardName: string; templateBase: { name: string; displayName: string }; templateConfig: TemplateConfig }) => {
+    const result = await importDashboardTemplate(data);
+    const dashboards = await getUsersDashboards();
+    set(dashboardsAtom, dashboards);
+    return result;
+  }
+);
+
+export const duplicateDashboardAtom = atom(
+  null,
+  async (_get, set, data: { id: DashboardTemplate['id']; dashboardName: string; setAsHomepage?: boolean }) => {
+    const result = await copyDashboardTemplate(data.id, { dashboardName: data.dashboardName });
+    if (data.setAsHomepage) {
+      await setDefaultTemplate(result.id);
+    }
+    const dashboards = await getUsersDashboards();
+    set(dashboardsAtom, dashboards);
+    return result;
+  }
+);

From 18afde4cc5765b10f3fe6957d2e37874facd41ca Mon Sep 17 00:00:00 2001
From: Olha Tomylko <otomylko@redhat.com>
Date: Wed, 15 Apr 2026 13:15:47 +0200
Subject: [PATCH 2/3] test: fix cypress and unit tests

---
 cypress/component/CreateModal.cy.tsx          |  7 ++
 cypress/component/DashboardTable.cy.tsx       |  7 +-
 cypress/component/DuplicateModal.cy.tsx       | 69 ++++++++++++-------
 cypress/component/KebabDropdown.cy.tsx        | 18 ++++-
 .../DashboardTable/DashboardTable.tsx         | 34 ++++++---
 .../GenericHeader/GenericHeaderDropdown.tsx   |  8 ++-
 .../tests/useCreateBlankDashboard.test.ts     |  1 +
 src/hooks/tests/useDuplicateDashboard.test.ts |  1 +
 src/hooks/tests/useImportDashboard.test.ts    |  1 +
 9 files changed, 105 insertions(+), 41 deletions(-)

diff --git a/cypress/component/CreateModal.cy.tsx b/cypress/component/CreateModal.cy.tsx
index c45b1d6..5d6e2f5 100644
--- a/cypress/component/CreateModal.cy.tsx
+++ b/cypress/component/CreateModal.cy.tsx
@@ -85,6 +85,13 @@ describe('CreateModal', () => {
   });
 
   describe('Successful creation', () => {
+    beforeEach(() => {
+      cy.intercept('GET', '/api/widget-layout/v1/', {
+        statusCode: 200,
+        body: { data: [mockDashboardResponse] },
+      }).as('getDashboards');
+    });
+
     it('calls import API and closes modal on success', () => {
       cy.intercept('POST', '/api/widget-layout/v1/import', {
         statusCode: 200,
diff --git a/cypress/component/DashboardTable.cy.tsx b/cypress/component/DashboardTable.cy.tsx
index 0b67201..0ab5d7e 100644
--- a/cypress/component/DashboardTable.cy.tsx
+++ b/cypress/component/DashboardTable.cy.tsx
@@ -215,7 +215,7 @@ describe('DashboardTable', () => {
 
       cy.intercept('GET', '/api/widget-layout/v1/', {
         statusCode: 200,
-        body: mockDashboards,
+        body: { data: mockDashboards },
       }).as('getDashboards');
 
       cy.mount(
@@ -355,6 +355,11 @@ describe('DashboardTable', () => {
         body: '',
       }).as('deleteDashboard');
 
+      cy.intercept('GET', '/api/widget-layout/v1/', {
+        statusCode: 200,
+        body: { data: mockDashboards },
+      }).as('getDashboards');
+
       const refetchStub = cy.stub();
 
       cy.mount(
diff --git a/cypress/component/DuplicateModal.cy.tsx b/cypress/component/DuplicateModal.cy.tsx
index 7e282c9..bd38d0d 100644
--- a/cypress/component/DuplicateModal.cy.tsx
+++ b/cypress/component/DuplicateModal.cy.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { DuplicateModal } from '../../src/Components/DuplicateModal/DuplicateModal';
 import Portal from '@redhat-cloud-services/frontend-components-notifications/Portal';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { notificationsAtom, useRemoveNotification } from '../../src/state/notificationsAtom';
+import { dashboardsAtom } from '../../src/state/dashboardsAtom';
+import { DashboardTemplate } from '../../src/api/dashboard-templates';
 
 const NotificationPortal = () => {
   const notifications = useAtomValue(notificationsAtom);
@@ -10,6 +12,14 @@ const NotificationPortal = () => {
   return <Portal notifications={notifications} removeNotification={removeNotification} />;
 };
 
+const HydrateDashboards: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const set = useSetAtom(dashboardsAtom);
+  React.useEffect(() => {
+    set(mockDashboards as DashboardTemplate[]);
+  }, []);
+  return <>{children}</>;
+};
+
 const mockDashboards = [
   {
     id: 1,
@@ -50,29 +60,29 @@ const mockCopyResponse = {
 describe('DuplicateModal', () => {
 
   it('renders modal with title when isOpen=true', () => {
-    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} />);
     cy.contains('Duplicate existing dashboard').should('be.visible');
   });
 
   it('does not render modal content when isOpen=false', () => {
-    cy.mount(<DuplicateModal isOpen={false} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<DuplicateModal isOpen={false} onClose={cy.stub()} />);
     cy.contains('Duplicate existing dashboard').should('not.exist');
   });
 
   it('shows "Duplicate dashboard" button disabled when form is empty', () => {
-    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} />);
     cy.contains('button', 'Duplicate dashboard').should('be.visible').and('be.disabled');
   });
 
   it('Cancel button calls onClose', () => {
     const onClose = cy.stub().as('onClose');
-    cy.mount(<DuplicateModal isOpen={true} onClose={onClose} dashboards={mockDashboards} />);
+    cy.mount(<DuplicateModal isOpen={true} onClose={onClose} />);
     cy.contains('button', 'Cancel').click();
     cy.get('@onClose').should('have.been.calledOnce');
   });
 
   it('dashboard name input is present and can be typed into', () => {
-    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} />);
     cy.get('#duplicate-dashboard-name')
       .should('be.visible')
       .type('My Duplicate')
@@ -80,14 +90,14 @@ describe('DuplicateModal', () => {
   });
 
   it('form labels are correct', () => {
-    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} />);
     cy.contains('label', 'Select existing dashboard for duplication').should('be.visible');
     cy.contains('label', 'New dashboard name').should('be.visible');
     cy.contains('Set as homepage').should('be.visible');
   });
 
   it('checkbox is unchecked by default and can be toggled', () => {
-    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} />);
     cy.get('#set-as-homepage').should('not.be.checked');
     cy.get('#set-as-homepage').check();
     cy.get('#set-as-homepage').should('be.checked');
@@ -96,7 +106,7 @@ describe('DuplicateModal', () => {
   });
 
   it('dashboard select dropdown shows mocked dashboards', () => {
-    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<HydrateDashboards><DuplicateModal isOpen={true} onClose={cy.stub()} /></HydrateDashboards>);
     cy.get('select[aria-label="Select a dashboard"]').within(() => {
       cy.get('option').should('have.length', 3); // placeholder + 2 dashboards
       cy.contains('option', 'Dashboard One').should('exist');
@@ -105,32 +115,39 @@ describe('DuplicateModal', () => {
   });
 
   it('enables "Duplicate dashboard" button when both dashboard is selected AND name is entered', () => {
-    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<HydrateDashboards><DuplicateModal isOpen={true} onClose={cy.stub()} /></HydrateDashboards>);
     cy.get('select[aria-label="Select a dashboard"]').select('1');
     cy.get('#duplicate-dashboard-name').type('My Duplicate');
     cy.contains('button', 'Duplicate dashboard').should('not.be.disabled');
   });
 
   it('keeps button disabled when only name is entered (no dashboard selected)', () => {
-    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<HydrateDashboards><DuplicateModal isOpen={true} onClose={cy.stub()} /></HydrateDashboards>);
     cy.get('#duplicate-dashboard-name').type('My Duplicate');
     cy.contains('button', 'Duplicate dashboard').should('be.disabled');
   });
 
   it('keeps button disabled when only dashboard is selected (no name)', () => {
-    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<HydrateDashboards><DuplicateModal isOpen={true} onClose={cy.stub()} /></HydrateDashboards>);
     cy.get('select[aria-label="Select a dashboard"]').select('1');
     cy.contains('button', 'Duplicate dashboard').should('be.disabled');
   });
 
   it('keeps button disabled when name is whitespace only', () => {
-    cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+    cy.mount(<HydrateDashboards><DuplicateModal isOpen={true} onClose={cy.stub()} /></HydrateDashboards>);
     cy.get('select[aria-label="Select a dashboard"]').select('1');
     cy.get('#duplicate-dashboard-name').type('   ');
     cy.contains('button', 'Duplicate dashboard').should('be.disabled');
   });
 
   describe('Successful duplication', () => {
+    beforeEach(() => {
+      cy.intercept('GET', '/api/widget-layout/v1/', {
+        statusCode: 200,
+        body: { data: [mockCopyResponse] },
+      }).as('getDashboards');
+    });
+
     it('calls copy API, shows success notification, calls onSuccess and onClose', () => {
       cy.intercept('POST', '/api/widget-layout/v1/1/copy', {
         statusCode: 200,
@@ -141,10 +158,10 @@ describe('DuplicateModal', () => {
       const onSuccess = cy.stub().as('onSuccess');
 
       cy.mount(
-        <>
+        <HydrateDashboards>
           <NotificationPortal />
-          <DuplicateModal isOpen={true} onClose={onClose} onSuccess={onSuccess} dashboards={mockDashboards} />
-        </>
+          <DuplicateModal isOpen={true} onClose={onClose} onSuccess={onSuccess} />
+        </HydrateDashboards>
       );
 
       cy.get('select[aria-label="Select a dashboard"]').select('1');
@@ -172,10 +189,10 @@ describe('DuplicateModal', () => {
       const onClose = cy.stub().as('onClose');
 
       cy.mount(
-        <>
+        <HydrateDashboards>
           <NotificationPortal />
-          <DuplicateModal isOpen={true} onClose={onClose} onSuccess={cy.stub()} dashboards={mockDashboards} />
-        </>
+          <DuplicateModal isOpen={true} onClose={onClose} onSuccess={cy.stub()} />
+        </HydrateDashboards>
       );
 
       cy.get('select[aria-label="Select a dashboard"]').select('1');
@@ -201,10 +218,10 @@ describe('DuplicateModal', () => {
       }).as('setDefault');
 
       cy.mount(
-        <>
+        <HydrateDashboards>
           <NotificationPortal />
-          <DuplicateModal isOpen={true} onClose={cy.stub()} onSuccess={cy.stub()} dashboards={mockDashboards} />
-        </>
+          <DuplicateModal isOpen={true} onClose={cy.stub()} onSuccess={cy.stub()} />
+        </HydrateDashboards>
       );
 
       cy.get('select[aria-label="Select a dashboard"]').select('1');
@@ -226,7 +243,7 @@ describe('DuplicateModal', () => {
         delay: 1000,
       }).as('copyDashboard');
 
-      cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+      cy.mount(<HydrateDashboards><DuplicateModal isOpen={true} onClose={cy.stub()} /></HydrateDashboards>);
 
       cy.get('select[aria-label="Select a dashboard"]').select('1');
       cy.get('#duplicate-dashboard-name').type('My Duplicate');
@@ -245,7 +262,7 @@ describe('DuplicateModal', () => {
         body: 'Internal Server Error',
       }).as('copyDashboard');
 
-      cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+      cy.mount(<HydrateDashboards><DuplicateModal isOpen={true} onClose={cy.stub()} /></HydrateDashboards>);
 
       cy.get('select[aria-label="Select a dashboard"]').select('1');
       cy.get('#duplicate-dashboard-name').type('My Duplicate');
@@ -262,7 +279,7 @@ describe('DuplicateModal', () => {
         body: 'Bad Request',
       }).as('copyDashboard');
 
-      cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+      cy.mount(<HydrateDashboards><DuplicateModal isOpen={true} onClose={cy.stub()} /></HydrateDashboards>);
 
       cy.get('select[aria-label="Select a dashboard"]').select('1');
       cy.get('#duplicate-dashboard-name').type('My Duplicate');
@@ -279,7 +296,7 @@ describe('DuplicateModal', () => {
         body: 'Internal Server Error',
       }).as('copyDashboard');
 
-      cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} dashboards={mockDashboards} />);
+      cy.mount(<HydrateDashboards><DuplicateModal isOpen={true} onClose={cy.stub()} /></HydrateDashboards>);
 
       cy.get('select[aria-label="Select a dashboard"]').select('1');
       cy.get('#duplicate-dashboard-name').type('My Duplicate');
diff --git a/cypress/component/KebabDropdown.cy.tsx b/cypress/component/KebabDropdown.cy.tsx
index 0adc1f8..2dce18c 100644
--- a/cypress/component/KebabDropdown.cy.tsx
+++ b/cypress/component/KebabDropdown.cy.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { KebabDropdown } from '../../src/Components/Header/Header';
 import { MemoryRouter } from 'react-router-dom';
 import { DashboardTemplate } from '../../src/api/dashboard-templates';
+import { useSetAtom } from 'jotai';
+import { dashboardsAtom } from '../../src/state/dashboardsAtom';
 
 const mockDashboards: DashboardTemplate[] = [
   {
@@ -17,13 +19,23 @@ const mockDashboards: DashboardTemplate[] = [
   },
 ];
 
+const HydrateDashboards: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const set = useSetAtom(dashboardsAtom);
+  React.useEffect(() => {
+    set(mockDashboards);
+  }, []);
+  return <>{children}</>;
+};
+
 describe('KebabDropdown', () => {
   beforeEach(() => {
     cy.mount(
       <MemoryRouter>
-        <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '16px' }}>
-          <KebabDropdown dashboards={mockDashboards} />
-        </div>
+        <HydrateDashboards>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '16px' }}>
+            <KebabDropdown />
+          </div>
+        </HydrateDashboards>
       </MemoryRouter>
     );
   });
diff --git a/src/Components/DashboardHub/DashboardTable/DashboardTable.tsx b/src/Components/DashboardHub/DashboardTable/DashboardTable.tsx
index d007930..095a71f 100644
--- a/src/Components/DashboardHub/DashboardTable/DashboardTable.tsx
+++ b/src/Components/DashboardHub/DashboardTable/DashboardTable.tsx
@@ -60,22 +60,38 @@ export const DashboardTable: React.FunctionComponent<DashboardTableProps> = ({ d
   // Sorting state
   const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc'>('asc');
 
-  const handleCopyConfiguration = async (dashboardId: number) => {
-    const result = await exportDashboard(dashboardId);
-
+  const handleCopyConfiguration = async (dashboard: Dashboard) => {
+    const result = await exportDashboard(dashboard.id);
     if (result) {
       try {
         const configString = JSON.stringify(result, null, 2);
         await navigator.clipboard.writeText(configString);
-        console.log('Configuration copied to clipboard');
+        addNotification({
+          variant: 'success',
+          title: `'${dashboard.name}' has been copied to clipboard`,
+        });
       } catch (err) {
-        console.error('Failed to copy to clipboard:', err);
+        addNotification({
+          variant: 'danger',
+          title: `Failed to copy '${dashboard.name}' to clipboard`,
+        });
       }
     }
   };
 
-  const handleSetAsHomepage = async (dashboardId: number) => {
-    await setDefaultDashboard(dashboardId);
+  const handleSetAsHomepage = async (dashboard: Dashboard) => {
+    try {
+      await setDefaultDashboard(dashboard.id);
+      addNotification({
+        variant: 'success',
+        title: `'${dashboard.name}' has been set as homepage`,
+      });
+    } catch (err) {
+      addNotification({
+        variant: 'danger',
+        title: `Failed to set '${dashboard.name}' as homepage`,
+      });
+    }
   };
 
   // Sort dashboards by name
@@ -111,12 +127,12 @@ export const DashboardTable: React.FunctionComponent<DashboardTableProps> = ({ d
       title: 'Set as homepage',
       isAriaDisabled: dashboard.isDefault,
       tooltipProps: dashboard.isDefault ? { content: 'This dashboard is already set to your homepage', position: TooltipPosition.left } : undefined,
-      onClick: () => handleSetAsHomepage(dashboard.id),
+      onClick: () => handleSetAsHomepage(dashboard),
     },
     {
       icon: <CodeIcon />,
       title: 'Copy configuration string',
-      onClick: () => handleCopyConfiguration(dashboard.id),
+      onClick: () => handleCopyConfiguration(dashboard),
     },
     {
       icon: <UsersIcon />,
diff --git a/src/Components/GenericHeader/GenericHeaderDropdown.tsx b/src/Components/GenericHeader/GenericHeaderDropdown.tsx
index 99efc27..4b49115 100644
--- a/src/Components/GenericHeader/GenericHeaderDropdown.tsx
+++ b/src/Components/GenericHeader/GenericHeaderDropdown.tsx
@@ -7,6 +7,7 @@ import { dashboardsAtom, setDefaultDashboardAtom } from '../../state/dashboardsA
 import { useExportDashboard } from '../../hooks/useExportDashboard';
 import { useDeleteDashboard } from '../../hooks/useDeleteDashboard';
 import { DeleteDashboardModal } from '../DashboardHub/DeleteDashboardModal/DeleteDashboardModal';
+import { DuplicateModal } from '../DuplicateModal/DuplicateModal';
 import { useAddNotification } from '../../state/notificationsAtom';
 import { useNavigate } from 'react-router-dom';
 
@@ -17,6 +18,7 @@ interface GenericHeaderDropdownProps {
 const GenericHeaderDropdown = ({ dashboard }: GenericHeaderDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
   const dashboards = useAtomValue(dashboardsAtom);
   const isHomepage = dashboards.find((d) => d.id === dashboard.id)?.default ?? dashboard.default;
   const { exportDashboard } = useExportDashboard();
@@ -65,6 +67,7 @@ const GenericHeaderDropdown = ({ dashboard }: GenericHeaderDropdownProps) => {
 
   const handleDuplicate = () => {
     setIsOpen(false);
+    setIsDuplicateModalOpen(true);
   };
 
   const handleDeleteConfirm = async () => {
@@ -103,8 +106,8 @@ const GenericHeaderDropdown = ({ dashboard }: GenericHeaderDropdownProps) => {
           >
             Set as homepage
           </DropdownItem>
-          <DropdownItem icon={<CopyIcon />} isDisabled onClick={handleDuplicate}>
-            Duplicate
+          <DropdownItem icon={<CopyIcon />} onClick={handleDuplicate}>
+            Duplicate dashboard
           </DropdownItem>
           <DropdownItem icon={<CodeIcon />} onClick={handleCopyConfiguration}>
             Copy configuration string
@@ -121,6 +124,7 @@ const GenericHeaderDropdown = ({ dashboard }: GenericHeaderDropdownProps) => {
           </DropdownItem>
         </DropdownList>
       </Dropdown>
+      <DuplicateModal isOpen={isDuplicateModalOpen} onClose={() => setIsDuplicateModalOpen(false)} preselectedDashboardId={dashboard.id} />
       <DeleteDashboardModal
         isOpen={isDeleteModalOpen}
         dashboardName={dashboard.dashboardName}
diff --git a/src/hooks/tests/useCreateBlankDashboard.test.ts b/src/hooks/tests/useCreateBlankDashboard.test.ts
index 5545cfa..9ae9e9c 100644
--- a/src/hooks/tests/useCreateBlankDashboard.test.ts
+++ b/src/hooks/tests/useCreateBlankDashboard.test.ts
@@ -6,6 +6,7 @@ jest.mock('../../api/dashboard-templates', () => ({
   ...jest.requireActual('../../api/dashboard-templates'),
   importDashboardTemplate: jest.fn(),
   setDefaultTemplate: jest.fn(),
+  getUsersDashboards: jest.fn().mockResolvedValue([]),
 }));
 
 const mockedImportDashboardTemplate = importDashboardTemplate as jest.MockedFunction<typeof importDashboardTemplate>;
diff --git a/src/hooks/tests/useDuplicateDashboard.test.ts b/src/hooks/tests/useDuplicateDashboard.test.ts
index 63f720b..33b6cdc 100644
--- a/src/hooks/tests/useDuplicateDashboard.test.ts
+++ b/src/hooks/tests/useDuplicateDashboard.test.ts
@@ -6,6 +6,7 @@ jest.mock('../../api/dashboard-templates', () => ({
   ...jest.requireActual('../../api/dashboard-templates'),
   copyDashboardTemplate: jest.fn(),
   setDefaultTemplate: jest.fn(),
+  getUsersDashboards: jest.fn().mockResolvedValue([]),
 }));
 
 const mockedCopyDashboardTemplate = copyDashboardTemplate as jest.MockedFunction<typeof copyDashboardTemplate>;
diff --git a/src/hooks/tests/useImportDashboard.test.ts b/src/hooks/tests/useImportDashboard.test.ts
index 5e13a1d..b280f3b 100644
--- a/src/hooks/tests/useImportDashboard.test.ts
+++ b/src/hooks/tests/useImportDashboard.test.ts
@@ -4,6 +4,7 @@ import { DashboardTemplate, importDashboardTemplate } from '../../api/dashboard-
 
 jest.mock('../../api/dashboard-templates', () => ({
   importDashboardTemplate: jest.fn(),
+  getUsersDashboards: jest.fn().mockResolvedValue([]),
 }));
 
 const mockedImportDashboardTemplate = importDashboardTemplate as jest.MockedFunction<typeof importDashboardTemplate>;

From 5f230b3a7c9be45b7269649566cdec68b7217601 Mon Sep 17 00:00:00 2001
From: Olha Tomylko <otomylko@redhat.com>
Date: Mon, 27 Apr 2026 10:37:10 +0200
Subject: [PATCH 3/3] refactor: move useGetDashboard call into KebabDropdown
 and fix tests

---
 cypress/component/KebabDropdown.cy.tsx | 46 ++++++++++++++++++++++----
 src/Components/Header/Header.tsx       |  6 ++--
 src/hooks/useDuplicateDashboard.ts     |  3 +-
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/cypress/component/KebabDropdown.cy.tsx b/cypress/component/KebabDropdown.cy.tsx
index 2dce18c..cee12b7 100644
--- a/cypress/component/KebabDropdown.cy.tsx
+++ b/cypress/component/KebabDropdown.cy.tsx
@@ -1,10 +1,40 @@
 import React from 'react';
 import { KebabDropdown } from '../../src/Components/Header/Header';
 import { MemoryRouter } from 'react-router-dom';
+import { ScalprumContext, ScalprumState } from '@scalprum/react-core';
 import { DashboardTemplate } from '../../src/api/dashboard-templates';
 import { useSetAtom } from 'jotai';
 import { dashboardsAtom } from '../../src/state/dashboardsAtom';
 
+const scalprumValue = {                                                                                                                                                                                                        
+  initialized: true,                                                                                                                                                                                                           
+  config: {},                                                                                                                                                                                                                  
+  pluginStore: {},
+  api: {                                                                                                                                                                                                                       
+    chrome: {   
+      auth: {
+        getUser: () => Promise.resolve({                                                                                                                                                                                               
+          entitlements: {},  
+          identity: {
+            org_id: '123',
+            type: 'User',                                                                                                                                                                                                              
+            user: {
+              username: 'test-user',                                                                                                                                                                                                   
+              email: 'test@test.com',
+              first_name: 'Test',                                                                                                                                                                                                      
+              last_name: 'User',
+              is_active: true,                                                                                                                                                                                                         
+              is_internal: false,
+              is_org_admin: false,                                                                                                                                                                                                     
+              locale: 'en_US',
+            },                                                                                                                                                                                                                         
+          },
+        }), 
+      },
+    },
+  },
+} as unknown as ScalprumState;
+
 const mockDashboards: DashboardTemplate[] = [
   {
     id: 1,
@@ -30,13 +60,15 @@ const HydrateDashboards: React.FC<{ children: React.ReactNode }> = ({ children }
 describe('KebabDropdown', () => {
   beforeEach(() => {
     cy.mount(
-      <MemoryRouter>
-        <HydrateDashboards>
-          <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '16px' }}>
-            <KebabDropdown />
-          </div>
-        </HydrateDashboards>
-      </MemoryRouter>
+      <ScalprumContext.Provider value={scalprumValue}>
+        <MemoryRouter>
+          <HydrateDashboards>
+            <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '16px' }}>
+              <KebabDropdown />
+            </div>
+          </HydrateDashboards>
+        </MemoryRouter>
+      </ScalprumContext.Provider>
     );
   });
 
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 6430910..e22c72c 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -24,7 +24,7 @@ import {
 } from '@patternfly/react-core';
 import React, { useRef, useState } from 'react';
 import { CodeIcon, CopyIcon, EditAltIcon, EllipsisVIcon, PlusCircleIcon, PlusIcon, ThIcon } from '@patternfly/react-icons';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 import { drawerExpandedAtom } from '../../state/drawerExpandedAtom';
 import { templateIdAtom } from '../../state/templateAtom';
 import { resetDashboardTemplate } from '../../api/dashboard-templates';
@@ -33,13 +33,12 @@ import { WarningModal } from '@patternfly/react-component-groups';
 import { Link } from 'react-router-dom';
 import { useFlag } from '@unleash/proxy-client-react';
 import useGetDashboards from '../../hooks/useGetDashboards';
-import { dashboardsAtom } from '../../state/dashboardsAtom';
 import { CreateModal } from '../CreateModal/CreateModal';
 import { ImportModal } from '../DashboardHub/ImportModal/ImportModal';
 import { DuplicateModal } from '../DuplicateModal/DuplicateModal';
 
 export const KebabDropdown = () => {
-  const dashboards = useAtomValue(dashboardsAtom);
+  const { dashboards } = useGetDashboards();
   const [isOpen, setIsOpen] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportModalOpen] = useState(false);
@@ -265,7 +264,6 @@ const Header = () => {
   const { currentUser } = useCurrentUser();
   const userName = currentUser?.first_name && currentUser?.last_name ? ` ${currentUser.first_name} ${currentUser.last_name}` : currentUser?.username;
   const isDashboardHub = useFlag('platform.widget-layout.dashboard-dropdown');
-  useGetDashboards();
   return (
     <PageSection hasBodyWrapper={false} className="widg-c-page__main-section--header pf-v6-u-p-lg pf-v6-u-p-r-0-on-sm">
       <Flex className="widg-l-flex--header" direction={{ default: 'column', lg: 'row' }}>
diff --git a/src/hooks/useDuplicateDashboard.ts b/src/hooks/useDuplicateDashboard.ts
index 033850f..0a7b350 100644
--- a/src/hooks/useDuplicateDashboard.ts
+++ b/src/hooks/useDuplicateDashboard.ts
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { DashboardTemplate, DashboardTemplatesError, copyDashboardTemplate, setDefaultTemplate } from '../api/dashboard-templates';
+import { DashboardTemplate, DashboardTemplatesError } from '../api/dashboard-templates';
 import { useSetAtom } from 'jotai';
 import { duplicateDashboardAtom } from '../state/dashboardsAtom';
 
@@ -50,7 +50,6 @@ export const useDuplicateDashboard = (): UseDuplicateDashboardReturn => {
     setState((prev) => ({ ...prev, isLoading: true, error: null }));
 
     try {
-      //const newDashboard = await copyDashboardTemplate(state.selectedDashboardId, { dashboardName: state.name });
       const newDashboard = await create({ id: state.selectedDashboardId, dashboardName: state.name, setAsHomepage: state.setAsHomepage });
 
       setState((prev) => ({ ...prev, isLoading: false }));