EDM-2060 Backup and restore devices

apps/ocp-plugin/src/components/AppContext/AppContext.tsx

@@ -1,10 +1,12 @@
+import * as React from 'react';
 import {
   AppContext,
   AppContextProps,
   FlightCtlApp,
   NavLinkFC,
   PromptFC,
 } from '@flightctl/ui-components/src/hooks/useAppContext';
+import { SystemRestoreProvider } from '@flightctl/ui-components/src/hooks/useSystemRestoreContext';
 import { ROUTE } from '@flightctl/ui-components/src/hooks/useNavigate';
 import {
   Link,
@@ -24,7 +26,20 @@ import { useFetch } from '../../hooks/useFetch';
 
 import './AppContext.css';
 
-export const OCPPluginAppContext = AppContext.Provider;
+/**
+ * OCP Plugin App Context Provider that includes SystemRestoreProvider
+ * The OCP plugin system calls useValuesAppContext separately and passes the value as a prop
+ */
+export const OCPPluginAppContext: React.FC<React.PropsWithChildren<{ value: AppContextProps }>> = ({
+  children,
+  value,
+}) => {
+  return (
+    <AppContext.Provider value={value}>
+      <SystemRestoreProvider>{children}</SystemRestoreProvider>
+    </AppContext.Provider>
+  );
+};
 
 const appRoutes = {
   [ROUTE.ROOT]: '/',

apps/ocp-plugin/src/hooks/useFetch.ts

@@ -42,18 +42,25 @@ export const useFetch = () => {
     [],
   );
 
-  const post = React.useCallback(async <R>(kind: string, obj: R): Promise<R> => postData(kind, obj), []);
+  const post = React.useCallback(
+    async <TRequest, TResponse = TRequest>(kind: string, data: TRequest): Promise<TResponse> => {
+      return postData<TRequest, TResponse>(kind, data);
+    },
+    [],
+  );
 
-  const put = React.useCallback(async <R>(kind: string, obj: R): Promise<R> => putData(kind, obj), []);
+  const put = React.useCallback(async <TRequest>(kind: string, data: TRequest): Promise<TRequest> => {
+    return putData<TRequest>(kind, data);
+  }, []);
 
   const remove = React.useCallback(
     async <R>(kind: string, abortSignal?: AbortSignal): Promise<R> => deleteData(kind, abortSignal),
     [],
   );
 
   const patch = React.useCallback(
-    async <R>(kind: string, obj: PatchRequest, abortSignal?: AbortSignal): Promise<R> =>
-      patchData(kind, obj, abortSignal),
+    async <R>(kind: string, patches: PatchRequest, abortSignal?: AbortSignal): Promise<R> =>
+      patchData(kind, patches, abortSignal),
     [],
   );
 

apps/ocp-plugin/src/utils/apiCalls.ts

@@ -72,7 +72,11 @@ export const handleApiJSONResponse = async <R>(response: Response): Promise<R> =
   throw new Error(await getErrorMsgFromApiResponse(response));
 };
 
-const putOrPostData = async <R>(kind: string, data: R, method: 'PUT' | 'POST'): Promise<R> => {
+const putOrPostData = async <TRequest, TResponse = TRequest>(
+  kind: string,
+  data: TRequest,
+  method: 'PUT' | 'POST',
+): Promise<TResponse> => {
   const options: RequestInit = {
     headers: {
       'Content-Type': 'application/json',
@@ -90,9 +94,11 @@ const putOrPostData = async <R>(kind: string, data: R, method: 'PUT' | 'POST'):
   }
 };
 
-export const postData = async <R>(kind: string, data: R): Promise<R> => putOrPostData(kind, data, 'POST');
+export const postData = async <TRequest, TResponse = TRequest>(kind: string, data: TRequest): Promise<TResponse> =>
+  putOrPostData<TRequest, TResponse>(kind, data, 'POST');
 
-export const putData = async <R>(kind: string, data: R): Promise<R> => putOrPostData(kind, data, 'PUT');
+export const putData = async <TRequest>(kind: string, data: TRequest): Promise<TRequest> =>
+  putOrPostData<TRequest, TRequest>(kind, data, 'PUT');
 
 export const deleteData = async <R>(kind: string, abortSignal?: AbortSignal): Promise<R> => {
   const options: RequestInit = {

apps/standalone/src/app/hooks/useFetch.ts

@@ -8,9 +8,16 @@ export const useFetch = () => {
     [],
   );
 
-  const post = React.useCallback(async <R>(kind: string, obj: R): Promise<R> => postData(kind, obj), []);
+  const post = React.useCallback(
+    async <TRequest, TResponse = TRequest>(kind: string, data: TRequest): Promise<TResponse> =>
+      postData<TRequest, TResponse>(kind, data),
+    [],
+  );
 
-  const put = React.useCallback(async <R>(kind: string, obj: R): Promise<R> => putData(kind, obj), []);
+  const put = React.useCallback(
+    async <TRequest>(kind: string, data: TRequest): Promise<TRequest> => putData<TRequest>(kind, data),
+    [],
+  );
 
   const remove = React.useCallback(
     async <R>(kind: string, abortSignal?: AbortSignal): Promise<R> => deleteData(kind, abortSignal),

apps/standalone/src/app/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { AppContext } from '@flightctl/ui-components/src/hooks/useAppContext';
+import { SystemRestoreProvider } from '@flightctl/ui-components/src/hooks/useSystemRestoreContext';
 
 import { AppRouter } from './routes';
 import { useStandaloneAppContext } from './hooks/useStandaloneAppContext';
@@ -19,7 +20,9 @@ const App: React.FunctionComponent = () => {
     <React.Suspense fallback={<div />}>
       <AuthContext.Provider value={authContextValue}>
         <AppContext.Provider value={appContextValue}>
-          <AppRouter />
+          <SystemRestoreProvider>
+            <AppRouter />
+          </SystemRestoreProvider>
         </AppContext.Provider>
       </AuthContext.Provider>
     </React.Suspense>

apps/standalone/src/app/utils/apiCalls.ts

@@ -105,9 +105,13 @@ export const fetchCliArtifacts = async (abortSignal?: AbortSignal): Promise<CliA
   }
 };
 
-const putOrPostData = async <R>(kind: string, data: R, method: 'PUT' | 'POST'): Promise<R> => {
+const putOrPostData = async <TRequest, TResponse = TRequest>(
+  kind: string,
+  data: TRequest,
+  method: 'PUT' | 'POST',
+): Promise<TResponse> => {
   try {
-    return await fetchWithRetry<R>(kind, {
+    return await fetchWithRetry<TResponse>(kind, {
       headers: {
         'Content-Type': 'application/json',
       },
@@ -121,9 +125,11 @@ const putOrPostData = async <R>(kind: string, data: R, method: 'PUT' | 'POST'):
   }
 };
 
-export const postData = async <R>(kind: string, data: R): Promise<R> => putOrPostData(kind, data, 'POST');
+export const postData = async <TRequest, TResponse = TRequest>(kind: string, data: TRequest): Promise<TResponse> =>
+  putOrPostData<TRequest, TResponse>(kind, data, 'POST');
 
-export const putData = async <R>(kind: string, data: R): Promise<R> => putOrPostData(kind, data, 'PUT');
+export const putData = async <TRequest>(kind: string, data: TRequest): Promise<TRequest> =>
+  putOrPostData<TRequest, TRequest>(kind, data, 'PUT');
 
 export const deleteData = async <R>(kind: string, abortSignal?: AbortSignal): Promise<R> => {
   try {

libs/ansible/src/hooks/useFetch.ts

@@ -24,12 +24,13 @@ export const useFetch = (getCookie: (name: string) => string | undefined, servic
   );
 
   const post = React.useCallback(
-    async <R>(kind: string, obj: R): Promise<R> => postData(kind, obj, serviceUrl, applyHeaders),
+    async <TRequest, TResponse = TRequest>(kind: string, data: TRequest): Promise<TResponse> =>
+      postData(kind, data, serviceUrl, applyHeaders),
     [serviceUrl, applyHeaders],
   );
 
   const put = React.useCallback(
-    async <R>(kind: string, obj: R): Promise<R> => putData(kind, obj, serviceUrl, applyHeaders),
+    async <TRequest>(kind: string, data: TRequest): Promise<TRequest> => putData(kind, data, serviceUrl, applyHeaders),
     [serviceUrl, applyHeaders],
   );
 

libs/ansible/src/utils/apiCalls.ts

@@ -17,13 +17,13 @@ const handleApiJSONResponse = async <R>(response: Response): Promise<R> => {
   throw new Error(await getErrorMsgFromApiResponse(response));
 };
 
-const putOrPostData = async <R>(
+const putOrPostData = async <TRequest, TResponse = TRequest>(
   kind: string,
-  data: R,
+  data: TRequest,
   serviceUrl: string,
   applyOptions: (options: RequestInit) => RequestInit,
   method: 'PUT' | 'POST',
-): Promise<R> => {
+): Promise<TResponse> => {
   const options: RequestInit = {
     headers: {
       'Content-Type': 'application/json',
@@ -41,19 +41,19 @@ const putOrPostData = async <R>(
   }
 };
 
-export const postData = async <R>(
+export const postData = async <TRequest, TResponse = TRequest>(
   kind: string,
-  data: R,
+  data: TRequest,
   serviceUrl: string,
   applyOptions: (options: RequestInit) => RequestInit,
-) => putOrPostData(kind, data, serviceUrl, applyOptions, 'POST');
+): Promise<TResponse> => putOrPostData<TRequest, TResponse>(kind, data, serviceUrl, applyOptions, 'POST');
 
-export const putData = async <R>(
+export const putData = async <TRequest>(
   kind: string,
-  data: R,
+  data: TRequest,
   serviceUrl: string,
   applyOptions: (options: RequestInit) => RequestInit,
-) => putOrPostData(kind, data, serviceUrl, applyOptions, 'PUT');
+): Promise<TRequest> => putOrPostData<TRequest, TRequest>(kind, data, serviceUrl, applyOptions, 'PUT');
 
 export const deleteData = async <R>(
   kind: string,