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

@@ -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.

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.

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}
       />,
     );
 

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 */