feat: reworking the secret types for the context.

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder/src/components/Router.tsx

@@ -21,6 +21,7 @@ import { ScaffolderPage } from './ScaffolderPage';
 import { TemplatePage } from './TemplatePage';
 import { TaskPage } from './TaskPage';
 import { ActionsPage } from './ActionsPage';
+import { SecretsContextProvider } from './secrets/SecretsContext';
 
 import {
   FieldExtensionOptions,
@@ -77,7 +78,11 @@ export const Router = ({ TemplateCardComponent, groups }: RouterProps) => {
       />
       <Route
         path="/templates/:templateName"
-        element={<TemplatePage customFieldExtensions={fieldExtensions} />}
+        element={
+          <SecretsContextProvider>
+            <TemplatePage customFieldExtensions={fieldExtensions} />
+          </SecretsContextProvider>
+        }
       />
       <Route path="/tasks/:taskId" element={<TaskPage />} />
       <Route path="/actions" element={<ActionsPage />} />

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -17,12 +17,13 @@ import { JsonObject, JsonValue } from '@backstage/types';
 import { LinearProgress } from '@material-ui/core';
 import { FormValidation, IChangeEvent } from '@rjsf/core';
 import qs from 'qs';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { generatePath, Navigate, useNavigate } from 'react-router';
 import { useParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import { scaffolderApiRef } from '../../api';
 import { CustomFieldValidator, FieldExtensionOptions } from '../../extensions';
+import { SecretsContext } from '../secrets/SecretsContext';
 import { rootRouteRef } from '../../routes';
 import { MultistepJsonForm } from '../MultistepJsonForm';
 
@@ -115,6 +116,7 @@ export const TemplatePage = ({
   customFieldExtensions?: FieldExtensionOptions[];
 }) => {
   const apiHolder = useApiHolder();
+  const secretsContext = useContext(SecretsContext);
   const errorApi = useApi(errorApiRef);
   const scaffolderApi = useApi(scaffolderApiRef);
   const { templateName } = useParams();
@@ -135,7 +137,11 @@ export const TemplatePage = ({
   );
 
   const handleCreate = async () => {
-    const id = await scaffolderApi.scaffold(templateName, formState);
+    const id = await scaffolderApi.scaffold(
+      templateName,
+      formState,
+      secretsContext?.secrets,
+    );
 
     const formParams = qs.stringify(
       { formData: formState },

plugins/scaffolder/src/components/secrets/SecretsContext.test.tsx

@@ -34,8 +34,10 @@ describe('SecretsContext', () => {
         ),
       },
     );
+    expect(result.current.context?.secrets.foo).toEqual(undefined);
 
     act(() => result.current.hook.setSecret({ foo: 'bar' }));
+
     expect(result.current.context?.secrets.foo).toEqual('bar');
   });
 });

plugins/scaffolder/src/components/secrets/SecretsContext.tsx

@@ -20,11 +20,10 @@ import React, {
   createContext,
   PropsWithChildren,
 } from 'react';
-import { JsonObject } from '@backstage/types';
 
 type SecretsContextContents = {
-  secrets: JsonObject;
-  setSecrets: React.Dispatch<React.SetStateAction<JsonObject>>;
+  secrets: Record<string, string>;
+  setSecrets: React.Dispatch<React.SetStateAction<Record<string, string>>>;
 };
 
 /**
@@ -40,7 +39,7 @@ export const SecretsContext = createContext<SecretsContextContents | undefined>(
  * @public
  */
 export const SecretsContextProvider = ({ children }: PropsWithChildren<{}>) => {
-  const [secrets, setSecrets] = useState<JsonObject>({});
+  const [secrets, setSecrets] = useState<Record<string, string>>({});
 
   return (
     <SecretsContext.Provider value={{ secrets, setSecrets }}>
@@ -64,7 +63,7 @@ export const useSecretsContext = () => {
   const { secrets, setSecrets } = value;
 
   const setSecret = useCallback(
-    (input: JsonObject) => {
+    (input: Record<string, string>) => {
       setSecrets({ ...secrets, ...input });
     },
     [secrets, setSecrets],

plugins/scaffolder/src/index.ts

@@ -56,3 +56,4 @@ export { FavouriteTemplate } from './components/FavouriteTemplate';
 export { TemplateList } from './components/TemplateList';
 export type { TemplateListProps } from './components/TemplateList';
 export { TemplateTypePicker } from './components/TemplateTypePicker';
+export * from './components/secrets';