chore: fix exporting the SecretsContext

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

plugins/scaffolder-react/api-report.md

@@ -242,7 +242,9 @@ export interface ScaffolderDryRunResponse {
 }
 
 // @public
-export const ScaffolderFieldExtensions: React_2.ComponentType;
+export const ScaffolderFieldExtensions: React_2.ComponentType<
+  React_2.PropsWithChildren<{}>
+>;
 
 // @public
 export interface ScaffolderGetIntegrationsListOptions {
@@ -318,15 +320,12 @@ export type ScaffolderTaskStatus =
 
 // @public
 export interface ScaffolderUseTemplateSecrets {
+  // (undocumented)
+  secrets: Record<string, string>;
   // (undocumented)
   setSecrets: (input: Record<string, string>) => void;
 }
 
-// @public
-export const SecretsContext: React_2.Context<
-  SecretsContextContents | undefined
->;
-
 // @public
 export type SecretsContextContents = {
   secrets: Record<string, string>;

plugins/scaffolder-react/src/secrets/SecretsContext.test.tsx

@@ -13,12 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useContext } from 'react';
-import {
-  useTemplateSecrets,
-  SecretsContextProvider,
-  SecretsContext,
-} from './SecretsContext';
+import React from 'react';
+import { useTemplateSecrets, SecretsContextProvider } from './SecretsContext';
 import { renderHook, act } from '@testing-library/react-hooks';
 
 describe('SecretsContext', () => {
@@ -26,7 +22,6 @@ describe('SecretsContext', () => {
     const { result } = renderHook(
       () => ({
         hook: useTemplateSecrets(),
-        context: useContext(SecretsContext),
       }),
       {
         wrapper: ({ children }) => (
@@ -34,10 +29,10 @@ describe('SecretsContext', () => {
         ),
       },
     );
-    expect(result.current.context?.secrets.foo).toEqual(undefined);
+    expect(result.current.hook?.secrets.foo).toEqual(undefined);
 
     act(() => result.current.hook.setSecrets({ foo: 'bar' }));
 
-    expect(result.current.context?.secrets.foo).toEqual('bar');
+    expect(result.current.hook?.secrets.foo).toEqual('bar');
   });
 });

plugins/scaffolder-react/src/secrets/SecretsContext.tsx

@@ -13,16 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import {
+  createVersionedContext,
+  createVersionedValueMap,
+} from '@backstage/version-bridge';
 import React, {
   useState,
   useCallback,
   useContext,
-  createContext,
   PropsWithChildren,
 } from 'react';
 
 /**
- * The contents of the {@link SecretsContext}.
+ * The contents of the `SecretsContext`
  * @public
  */
 export type SecretsContextContents = {
@@ -32,11 +35,10 @@ export type SecretsContextContents = {
 
 /**
  * The context to hold the Secrets.
- * @public
  */
-export const SecretsContext = createContext<SecretsContextContents | undefined>(
-  undefined,
-);
+const SecretsContext = createVersionedContext<{
+  1: SecretsContextContents;
+}>('secrets-context');
 
 /**
  * The Context Provider that holds the state for the secrets.
@@ -46,7 +48,9 @@ export const SecretsContextProvider = ({ children }: PropsWithChildren<{}>) => {
   const [secrets, setSecrets] = useState<Record<string, string>>({});
 
   return (
-    <SecretsContext.Provider value={{ secrets, setSecrets }}>
+    <SecretsContext.Provider
+      value={createVersionedValueMap({ 1: { secrets, setSecrets } })}
+    >
       {children}
     </SecretsContext.Provider>
   );
@@ -58,6 +62,7 @@ export const SecretsContextProvider = ({ children }: PropsWithChildren<{}>) => {
  */
 export interface ScaffolderUseTemplateSecrets {
   setSecrets: (input: Record<string, string>) => void;
+  secrets: Record<string, string>;
 }
 
 /**
@@ -66,14 +71,15 @@ export interface ScaffolderUseTemplateSecrets {
  * @public
  */
 export const useTemplateSecrets = (): ScaffolderUseTemplateSecrets => {
-  const value = useContext(SecretsContext);
+  const value = useContext(SecretsContext)?.atVersion(1);
+
   if (!value) {
     throw new Error(
       'useTemplateSecrets must be used within a SecretsContextProvider',
     );
   }
 
-  const { setSecrets: updateSecrets } = value;
+  const { setSecrets: updateSecrets, secrets = {} } = value;
 
   const setSecrets = useCallback(
     (input: Record<string, string>) => {
@@ -82,5 +88,5 @@ export const useTemplateSecrets = (): ScaffolderUseTemplateSecrets => {
     [updateSecrets],
   );
 
-  return { setSecrets };
+  return { setSecrets, secrets };
 };

plugins/scaffolder-react/src/secrets/index.ts

@@ -15,7 +15,6 @@
  */
 export {
   useTemplateSecrets,
-  SecretsContext,
   SecretsContextProvider,
   type ScaffolderUseTemplateSecrets,
   type SecretsContextContents,

plugins/scaffolder/api-report.md

@@ -118,9 +118,9 @@ export type EntityPickerUiOptions =
 export const EntityTagsPickerFieldExtension: FieldExtensionComponent_2<
   string[],
   {
-    helperText?: string | undefined;
-    kinds?: string[] | undefined;
     showCounts?: boolean | undefined;
+    kinds?: string[] | undefined;
+    helperText?: string | undefined;
   }
 >;
 
@@ -128,9 +128,9 @@ export const EntityTagsPickerFieldExtension: FieldExtensionComponent_2<
 export const EntityTagsPickerFieldSchema: FieldSchema<
   string[],
   {
-    helperText?: string | undefined;
-    kinds?: string[] | undefined;
     showCounts?: boolean | undefined;
+    kinds?: string[] | undefined;
+    helperText?: string | undefined;
   }
 >;
 

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

@@ -16,13 +16,13 @@
 import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
 import qs from 'qs';
-import React, { ComponentType, useCallback, useContext, useState } from 'react';
+import React, { ComponentType, useCallback, useState } from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import {
   FieldExtensionOptions,
-  SecretsContext,
   scaffolderApiRef,
+  useTemplateSecrets,
 } from '@backstage/plugin-scaffolder-react';
 import { MultistepJsonForm } from '../MultistepJsonForm';
 import { createValidator } from './createValidator';
@@ -72,7 +72,7 @@ export const TemplatePage = ({
   headerOptions,
 }: Props) => {
   const apiHolder = useApiHolder();
-  const secretsContext = useContext(SecretsContext);
+  const secretsContext = useTemplateSecrets();
   const errorApi = useApi(errorApiRef);
   const scaffolderApi = useApi(scaffolderApiRef);
   const { templateName, namespace } = useRouteRefParams(

plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useContext } from 'react';
+import React from 'react';
 import { RepoUrlPicker } from './RepoUrlPicker';
 import Form from '@rjsf/core';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
@@ -26,9 +26,9 @@ import {
 
 import {
   SecretsContextProvider,
-  SecretsContext,
   scaffolderApiRef,
   ScaffolderApi,
+  useTemplateSecrets,
 } from '@backstage/plugin-scaffolder-react';
 import { act, fireEvent } from '@testing-library/react';
 
@@ -119,8 +119,10 @@ describe('RepoUrlPicker', () => {
   describe('requestUserCredentials', () => {
     it('should call the scmAuthApi with the correct params', async () => {
       const SecretsComponent = () => {
-        const value = useContext(SecretsContext);
-        return <div data-testid="current-secrets">{JSON.stringify(value)}</div>;
+        const { secrets } = useTemplateSecrets();
+        return (
+          <div data-testid="current-secrets">{JSON.stringify({ secrets })}</div>
+        );
       };
       const { getAllByRole, getByTestId } = await renderInTestApp(
         <TestApiProvider

plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import {
   Page,
   Header,
@@ -31,14 +31,16 @@ import {
   useRouteRef,
   useRouteRefParams,
 } from '@backstage/core-plugin-api';
-import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
+import {
+  scaffolderApiRef,
+  useTemplateSecrets,
+} from '@backstage/plugin-scaffolder-react';
 import useAsync from 'react-use/lib/useAsync';
 import { makeStyles } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 import {
   Stepper,
   NextFieldExtensionOptions,
-  SecretsContext,
 } from '@backstage/plugin-scaffolder-react';
 import { JsonValue } from '@backstage/types';
 import { FormProps } from '../types';
@@ -76,7 +78,7 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
   const styles = useStyles();
   const rootRef = useRouteRef(nextRouteRef);
   const taskRoute = useRouteRef(scaffolderTaskRouteRef);
-  const { secrets } = useContext(SecretsContext) ?? {};
+  const { secrets } = useTemplateSecrets();
   const scaffolderApi = useApi(scaffolderApiRef);
   const navigate = useNavigate();
   const { templateName, namespace } = useRouteRefParams(