feat: switch the data source to the new backend

cypress/component/CreateModal.cy.tsx

@@ -3,6 +3,7 @@ import { CreateModal } from '../../src/Components/CreateModal/CreateModal';
 import Portal from '@redhat-cloud-services/frontend-components-notifications/Portal';
 import { useAtomValue } from 'jotai';
 import { notificationsAtom, useRemoveNotification } from '../../src/state/notificationsAtom';
+import { backendFlagAtom, store } from '../../src/state/store';
 
 const NotificationPortal = () => {
   const notifications = useAtomValue(notificationsAtom);
@@ -23,6 +24,10 @@ const mockDashboardResponse = {
 };
 
 describe('CreateModal', () => {
+  beforeEach(() => {
+    store.set(backendFlagAtom, true);
+  });
+
   it('renders modal with title when isOpen=true', () => {
     cy.mount(<CreateModal isOpen={true} onClose={cy.stub()} />);
     cy.contains('Create new blank dashboard').should('be.visible');

cypress/component/DuplicateModal.cy.tsx

@@ -5,6 +5,7 @@ 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';
+import { backendFlagAtom, store } from '../../src/state/store';
 
 const NotificationPortal = () => {
   const notifications = useAtomValue(notificationsAtom);
@@ -58,6 +59,9 @@ const mockCopyResponse = {
 };
 
 describe('DuplicateModal', () => {
+  beforeEach(() => {
+    store.set(backendFlagAtom, true);
+  });
 
   it('renders modal with title when isOpen=true', () => {
     cy.mount(<DuplicateModal isOpen={true} onClose={cy.stub()} />);

src/App.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import DefaultRoute from './Routes/Default/Default';
 
 const App = () => {
-  return <DefaultRoute />;
+  return <DefaultRoute layoutType="landingPage" />;
 };
 
 export default App;

src/Components/CreateModal/CreateModal.tsx

@@ -8,10 +8,12 @@ interface CreateModalProps {
   isOpen: boolean;
   onClose: () => void;
   onSuccess?: () => void;
+  layoutType?: string;
 }
 
-export const CreateModal: React.FunctionComponent<CreateModalProps> = ({ isOpen, onClose, onSuccess }) => {
-  const { name, setName, setAsHomepage, setSetAsHomepage, isLoading, error, isFormValid, createDashboard, reset } = useCreateBlankDashboard();
+export const CreateModal: React.FunctionComponent<CreateModalProps> = ({ isOpen, onClose, onSuccess, layoutType }) => {
+  const { name, setName, setAsHomepage, setSetAsHomepage, isLoading, error, isFormValid, createDashboard, reset } =
+    useCreateBlankDashboard(layoutType);
   const addNotification = useAddNotification();
 
   const handleNameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {

src/Components/Header/Header.tsx

@@ -27,7 +27,7 @@ import { CodeIcon, CopyIcon, EditAltIcon, EllipsisVIcon, PlusCircleIcon, PlusIco
 import { useAtom, useSetAtom } from 'jotai';
 import { drawerExpandedAtom } from '../../state/drawerExpandedAtom';
 import { templateIdAtom } from '../../state/templateAtom';
-import { resetDashboardTemplate } from '../../api/dashboard-templates';
+import { useApi } from '../../hooks/useApi';
 import useCurrentUser from '../../hooks/useCurrentUser';
 import { WarningModal } from '@patternfly/react-component-groups';
 import { Link } from 'react-router-dom';
@@ -37,7 +37,7 @@ import { CreateModal } from '../CreateModal/CreateModal';
 import { ImportModal } from '../DashboardHub/ImportModal/ImportModal';
 import { DuplicateModal } from '../DuplicateModal/DuplicateModal';
 
-export const KebabDropdown = () => {
+export const KebabDropdown = ({ layoutType }: { layoutType?: string }) => {
   const { dashboards } = useGetDashboards();
   const [isOpen, setIsOpen] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -198,7 +198,7 @@ export const KebabDropdown = () => {
         toggleRef={toggleRef}
         popperProps={{ position: 'end' }}
       />
-      <CreateModal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} />
+      <CreateModal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} layoutType={layoutType} />
       <ImportModal isOpen={isImportModalOpen} onClose={() => setIsImportModalOpen(false)} />
       <DuplicateModal isOpen={isDuplicateModalOpen} onClose={() => setIsDuplicateModalOpen(false)} />
     </>
@@ -209,6 +209,7 @@ const Controls = () => {
   const [isOpen, setIsOpen] = useState(false);
   const toggleOpen = useSetAtom(drawerExpandedAtom);
   const [templateId, setTemplateId] = useAtom(templateIdAtom);
+  const api = useApi();
 
   return (
     <>
@@ -223,7 +224,7 @@ const Controls = () => {
         onConfirm={() => {
           setIsOpen(false);
           if (templateId > 0) {
-            resetDashboardTemplate(templateId).then(() => {
+            api.resetDashboardTemplate(templateId).then(() => {
               setTemplateId(NaN);
             });
           }
@@ -260,7 +261,7 @@ const Controls = () => {
   );
 };
 
-const Header = () => {
+const Header = ({ layoutType }: { layoutType?: string }) => {
   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');
@@ -281,7 +282,7 @@ const Header = () => {
               <Controls />
               {isDashboardHub && (
                 <ToolbarItem>
-                  <KebabDropdown />
+                  <KebabDropdown layoutType={layoutType} />
                 </ToolbarItem>
               )}
             </ToolbarContent>

src/Modules/DashboardHub.tsx

@@ -1,18 +1,26 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Header from '../Components/DashboardHub/Header/Header';
 import DashboardTable from '../Components/DashboardHub/DashboardTable/DashboardTable';
 import { PageSection } from '@patternfly/react-core';
 import useGetDashboards from '../hooks/useGetDashboards';
 import Portal from '@redhat-cloud-services/frontend-components-notifications/Portal';
-import { useAtomValue } from 'jotai';
+import { Provider, useAtomValue, useSetAtom } from 'jotai';
+import { useFlag } from '@unleash/proxy-client-react';
 import { notificationsAtom, useRemoveNotification } from '../state/notificationsAtom';
 import { Route, Routes } from 'react-router-dom';
 import GenericDashboardPage from './GenericDashboardPage';
+import { backendFlagAtom, store } from '../state/store';
 
-const DashboardHub = () => {
+const DashboardHubInner = () => {
   const notifications = useAtomValue(notificationsAtom);
   const removeNotification = useRemoveNotification();
   const { dashboards, fetchDashboards } = useGetDashboards();
+  const setBackendFlag = useSetAtom(backendFlagAtom);
+  const isNewBackend = useFlag('platform.widget-layout.new-backend');
+
+  useEffect(() => {
+    setBackendFlag(isNewBackend);
+  }, [isNewBackend]);
 
   return (
     <Routes>
@@ -34,4 +42,10 @@ const DashboardHub = () => {
   );
 };
 
+const DashboardHub = () => (
+  <Provider store={store}>
+    <DashboardHubInner />
+  </Provider>
+);
+
 export default DashboardHub;

src/Routes/Default/Default.tsx

@@ -1,7 +1,9 @@
 import { PageSection } from '@patternfly/react-core';
 import AddWidgetDrawer from '../../Components/WidgetDrawer/WidgetDrawer';
 import GridLayout from '../../Components/DnDLayout/GridLayout';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { Provider, useAtomValue, useSetAtom } from 'jotai';
+import { useFlag } from '@unleash/proxy-client-react';
+import { backendFlagAtom, store } from '../../state/store';
 import { lockedLayoutAtom } from '../../state/lockedLayoutAtom';
 import { notificationsAtom, useRemoveNotification } from '../../state/notificationsAtom';
 import Header from '../../Components/Header/Header';
@@ -13,13 +15,19 @@ import Portal from '@redhat-cloud-services/frontend-components-notifications/Por
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import { resolvedWidgetMappingAtom } from '../../state/widgetMappingAtom';
 
-const DefaultRoute = (props: { layoutType?: LayoutTypes }) => {
+const DefaultRouteInner = (props: { layoutType: LayoutTypes }) => {
   const isLayoutLocked = useAtomValue(lockedLayoutAtom);
   const notifications = useAtomValue(notificationsAtom);
   const removeNotification = useRemoveNotification();
   const { template, saveTemplate, isLoaded, layoutRef } = useDashboardConfig(props.layoutType);
   const resolveWidgetMapping = useSetAtom(resolvedWidgetMappingAtom);
   const { visibilityFunctions } = useChrome();
+  const setBackendFlag = useSetAtom(backendFlagAtom);
+  const isNewBackend = useFlag('platform.widget-layout.new-backend');
+
+  useEffect(() => {
+    setBackendFlag(isNewBackend);
+  }, [isNewBackend]);
 
   useEffect(() => {
     if (visibilityFunctions) {
@@ -30,7 +38,7 @@ const DefaultRoute = (props: { layoutType?: LayoutTypes }) => {
   return (
     <div className="widgetLayout">
       <Portal notifications={notifications} removeNotification={removeNotification} />
-      <Header />
+      <Header layoutType={props.layoutType} />
       <AddWidgetDrawer dismissible={false}>
         <PageSection hasBodyWrapper={false} className="widg-c-page__main-section--grid 6-u-p-md-on-sm">
           <GridLayout template={template} saveTemplate={saveTemplate} isLoaded={isLoaded} isLayoutLocked={isLayoutLocked} layoutRef={layoutRef} />
@@ -40,4 +48,10 @@ const DefaultRoute = (props: { layoutType?: LayoutTypes }) => {
   );
 };
 
+const DefaultRoute = (props: { layoutType: LayoutTypes }) => (
+  <Provider store={store}>
+    <DefaultRouteInner {...props} />
+  </Provider>
+);
+
 export default DefaultRoute;