From 5bcf13d84b7c8e4bdce2db84e224433889cadfd9 Mon Sep 17 00:00:00 2001 From: ifielker Date: Wed, 2 Oct 2024 11:32:33 -0400 Subject: [PATCH] Adding SDK-created extensions support (#1052) * Adding SDK-created extensions support --- .../DetailCard/Tabs/ParamList.test.tsx | 48 ++++++++++++-- .../Details/DetailCard/Tabs/ParamList.tsx | 55 ++++++++++------ .../Extensions/List/ExtensionsCallout.tsx | 4 +- .../ExtensionsTable/ExtensionTableRow.tsx | 5 ++ .../internal/useExtensionBackends.test.tsx | 6 +- .../api/internal/useExtensionsData.test.tsx | 64 ++++++++++++++++++- .../api/internal/useExtensionsData.tsx | 15 +++-- .../Extensions/api/useExtensions.test.tsx | 18 +++++- .../Extensions/api/useExtensions.tsx | 7 ++ src/components/Extensions/models.ts | 3 + src/components/Extensions/testing/utils.ts | 23 ++++++- 11 files changed, 210 insertions(+), 38 deletions(-) diff --git a/src/components/Extensions/Details/DetailCard/Tabs/ParamList.test.tsx b/src/components/Extensions/Details/DetailCard/Tabs/ParamList.test.tsx index d098b6625..3c1493702 100644 --- a/src/components/Extensions/Details/DetailCard/Tabs/ParamList.test.tsx +++ b/src/components/Extensions/Details/DetailCard/Tabs/ParamList.test.tsx @@ -27,7 +27,7 @@ describe('ParamList', () => { const PARAM = 'pirojok-the-param'; const LABEL = 'pirojok-the-label'; const VALUE = 'pirojok-the-value'; - const extension: Extension = { + const staticExtension: Extension = { id, params: [ { @@ -39,6 +39,28 @@ describe('ParamList', () => { ], } as Extension; + const dynId = 'dyn-pirojok'; + const DYN_DESCRIPTION = 'dyn-pirojok-the-description'; + const DYN_PARAM = 'dyn-pirojok-the-param'; + const DYN_LABEL = 'dyn-pirojok-the-label'; + const DYN_VALUE = 'dyn-pirojok-the-value'; + const LABELS: Record = { + createdBy: 'SDK', + codebase: 'default', + }; + const dynamicExtension: Extension = { + id: dynId, + params: [ + { + param: DYN_PARAM, + label: DYN_LABEL, + value: DYN_VALUE, + description: DYN_DESCRIPTION, + }, + ], + labels: LABELS, + } as Extension; + function setup(extension: Extension, id: string) { return render( @@ -47,15 +69,22 @@ describe('ParamList', () => { ); } - it('renders list of parameters', () => { - const { getByText } = setup(extension, id); + it('renders list of parameters for static extensions', () => { + const { getByText } = setup(staticExtension, id); expect(getByText(new RegExp(LABEL))).not.toBeNull(); expect(getByText(new RegExp(VALUE))).not.toBeNull(); }); - it('displays param description on expansion in markdown', () => { - const { getByText } = setup(extension, id); + it('renders list of parameters for dynamic extensions', () => { + const { getByText } = setup(dynamicExtension, dynId); + + expect(getByText(new RegExp(DYN_LABEL))).not.toBeNull(); + expect(getByText(new RegExp(DYN_VALUE))).not.toBeNull(); + }); + + it('displays param description on expansion in markdown for static', () => { + const { getByText } = setup(staticExtension, id); act(() => { getByText(new RegExp(LABEL)).click(); @@ -63,4 +92,13 @@ describe('ParamList', () => { expect(getByText(new RegExp(DESCRIPTION))).not.toBeNull(); expect(getByText(new RegExp(DESCRIPTION))).not.toBeNull(); }); + + it('displays param description on expansion in markdown for dynamic', () => { + const { getByText } = setup(dynamicExtension, dynId); + + act(() => { + getByText(new RegExp(DYN_LABEL)).click(); + }); + expect(getByText(new RegExp(DYN_DESCRIPTION))).not.toBeNull(); + }); }); diff --git a/src/components/Extensions/Details/DetailCard/Tabs/ParamList.tsx b/src/components/Extensions/Details/DetailCard/Tabs/ParamList.tsx index 7b059683c..acc1732ec 100644 --- a/src/components/Extensions/Details/DetailCard/Tabs/ParamList.tsx +++ b/src/components/Extensions/Details/DetailCard/Tabs/ParamList.tsx @@ -21,36 +21,51 @@ import { Callout } from '../../../../common/Callout'; import { DOCS_BASE } from '../../../../common/links/DocsLink'; import { Markdown } from '../../../../common/Markdown'; import { useExtension } from '../../../api/useExtension'; +import { isDynamicExtension } from '../../../api/useExtensions'; import { EventsConfig } from './EventsConfig'; import styles from './ParamList.module.scss'; import { ParamValue } from './ParamValue'; function ParamList() { const extension = useExtension()!; + const isDynamic = isDynamicExtension(extension); + const docSuffix = isDynamic + ? 'extensions/manage-installed-extensions?interface=sdk#reconfigure' + : 'extensions/manifest'; + + const dynamicFragment = ( + + Reconfigure is not available in the emulator. You can reconfigure + parameters by updating them in the code. + + ); + + const staticFragment = ( + <> + + Reconfigure is not available in the emulator. You can reconfigure + parameters by updating your .env files with: + +
+ firebase ext:configure {extension.id} --local) + + ); + return (
- - Reconfigure is not available in the emulator. You can - reconfigure parameters by updating your .env files with: - - } - > - firebase ext:configure {extension.id} --local - - + {isDynamic ? dynamicFragment : staticFragment} +
{(extension.params || []).map((param) => { diff --git a/src/components/Extensions/List/ExtensionsCallout.tsx b/src/components/Extensions/List/ExtensionsCallout.tsx index 5f98ab730..2b32b3e0b 100644 --- a/src/components/Extensions/List/ExtensionsCallout.tsx +++ b/src/components/Extensions/List/ExtensionsCallout.tsx @@ -30,12 +30,12 @@ export const ExtensionCallout: React.FC< actions={
- Learn how to manage your extensions manifest + Learn how to manage your extensions
diff --git a/src/components/Extensions/List/ExtensionsTable/ExtensionTableRow.tsx b/src/components/Extensions/List/ExtensionsTable/ExtensionTableRow.tsx index 77d364d50..ebe72a2a0 100644 --- a/src/components/Extensions/List/ExtensionsTable/ExtensionTableRow.tsx +++ b/src/components/Extensions/List/ExtensionsTable/ExtensionTableRow.tsx @@ -65,6 +65,11 @@ export const ExtensionsTableRow: React.FC< {extension.ref}
+
+ + {extension.id} + +