From 170c02338412919ff9c5596c3beb0b33614421bc Mon Sep 17 00:00:00 2001
From: marmionl <l.marmion+copilot@elsvier.com>
Date: Fri, 12 Jan 2024 13:38:29 +0000
Subject: [PATCH] feat: adding supportedSubmitMethods prop to SwaggerUI
 component

Signed-off-by: marmionl <l.marmion@elsvier.com>
Signed-off-by: marmionl <l.marmion+copilot@elsvier.com>
---
 .changeset/large-frogs-grab.md                |  5 ++
 plugins/api-docs/README.md                    | 53 +++++++++++++++++++
 .../OpenApiDefinition.test.tsx                |  2 +
 .../OpenApiDefinitionWidget.tsx               | 11 ++++
 4 files changed, 71 insertions(+)
 create mode 100644 .changeset/large-frogs-grab.md

diff --git a/.changeset/large-frogs-grab.md b/.changeset/large-frogs-grab.md
new file mode 100644
index 0000000000..2d36de3407
--- /dev/null
+++ b/.changeset/large-frogs-grab.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Adding `supportedSubmitMethods` prop to `api-docs` to pass to the Swagger UI. This allows users to specify which HTTP methods they wish to allow end-users to make requests through the `Try It Out` button on the Swagger UI.
diff --git a/plugins/api-docs/README.md b/plugins/api-docs/README.md
index 4d4342de61..46d9df4628 100644
--- a/plugins/api-docs/README.md
+++ b/plugins/api-docs/README.md
@@ -263,3 +263,56 @@ createApiFactory({
 ```
 
 In the same way as the `requestInterceptor` you can override any property of Swagger UI
+
+### Provide Specific Supported Methods to Swagger UI
+
+This can be done through utilising the
+[supportedSubmitMethods prop](https://github.com/swagger-api/swagger-ui/tree/master/flavors/swagger-ui-react#supportedsubmitmethods-proptypesarrayofproptypesoneofget-put-post-delete-options-head-patch-trace).
+If you wish to limit the HTTP methods available for the `Try It Out` feature of an OpenAPI API
+component, you will need to add the following to your `api.tsx`, listing the permitted methods for
+your API in the `supportedSubmitMethods` parameter:
+
+```tsx
+...
+import {
+  OpenApiDefinitionWidget,
+  apiDocsConfigRef,
+  defaultDefinitionWidgets,
+} from '@backstage/plugin-api-docs';
+import { ApiEntity } from '@backstage/catalog-model';
+
+export const apis: AnyApiFactory[] = [
+...
+  createApiFactory({
+    api: apiDocsConfigRef,
+    deps: {},
+    factory: () => {
+      const supportedSubmitMethods = ['get', 'post', 'put', 'delete'];
+      const definitionWidgets = defaultDefinitionWidgets().map(obj => {
+        if (obj.type === 'openapi') {
+          return {
+            ...obj,
+            component: definition => (
+              <OpenApiDefinitionWidget
+                definition={definition}
+                supportedSubmitMethods={supportedSubmitMethods}
+              />
+            ),
+          };
+        }
+        return obj;
+      });
+
+      return {
+        getApiDefinitionWidget: (apiEntity: ApiEntity) => {
+          return definitionWidgets.find(d => d.type === apiEntity.spec.type);
+        }
+      };
+    }
+  })
+]
+
+```
+
+N.B. if you wish to disable the `Try It Out` feature for your API, you can provide an empty list to
+the `supportedSubmitMethods` parameter.
diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx
index d150525b05..524c416d2d 100644
--- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx
+++ b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx
@@ -97,11 +97,13 @@ paths:
     `;
 
     const requestInterceptor = (req: any) => req;
+    const supportedSubmitMethods = ['get', 'post', 'put', 'delete'];
 
     const { findByRole, getByRole, getByLabelText } = await renderInTestApp(
       <OpenApiDefinition
         definition={definition}
         requestInterceptor={requestInterceptor}
+        supportedSubmitMethods={supportedSubmitMethods}
       />,
     );
 
diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx
index 152f1fd089..7cf8c5816e 100644
--- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx
+++ b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx
@@ -25,10 +25,21 @@ const LazyOpenApiDefinition = React.lazy(() =>
   })),
 );
 
+type HttpMethods =
+  | 'get'
+  | 'put'
+  | 'post'
+  | 'delete'
+  | 'options'
+  | 'head'
+  | 'patch'
+  | 'trace';
+
 /** @public */
 export type OpenApiDefinitionWidgetProps = {
   definition: string;
   requestInterceptor?: (req: any) => any | Promise<any>;
+  supportedSubmitMethods?: HttpMethods[];
 };
 
 /** @public */