refactor(deps)!: remove swagger-ui-react (#13818)

Signed-off-by: Anton Gilgur <[email protected]> Signed-off-by: Mason Malone <[email protected]> Co-authored-by: Mason Malone <[email protected]>
argoproj · Oct 30, 2024 · 3bbec4e · 3bbec4e
1 parent 3df5183
commit 3bbec4e
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 1,167 deletions.
diff --git a/docs/rest-api.md b/docs/rest-api.md
@@ -1,21 +1,8 @@
 # REST API
 
-## Argo Server API
-
 > v2.5 and after
 
-Argo Workflows ships with a server that provides more features and security than before.
-
-The server can be configured with or without client auth (`server --auth-mode client`). When it is disabled, then clients must pass their KUBECONFIG base 64 encoded in the HTTP `Authorization` header:
-
-```bash
-ARGO_TOKEN=$(argo auth token)
-curl -H "Authorization: $ARGO_TOKEN" https://localhost:2746/api/v1/workflows/argo
-```
-
-* Learn more on [how to generate an access token](access-token.md).
-
-API reference docs :
+Argo ships with an API server with [configurable authentication](argo-server-auth-mode.md).
+You can [generate an access token](access-token.md) when `--auth-mode client` is configured and use it to access the API.
 
-* [Latest docs](swagger.md) (maybe incorrect)
-* Interactively in the [Argo Server UI](https://localhost:2746/apidocs). (>= v2.10)
+* View the [API reference](swagger.md)
diff --git a/docs/upgrading.md b/docs/upgrading.md
@@ -99,6 +99,11 @@ Custom metrics, as defined by a workflow, could be defined as one type (say coun
 The Prometheus `/metrics` endpoint now has TLS enabled by default.
 To disable this set `metricsConfig.secure` to `false`.
 
+### Removed Swagger UI
+
+The Swagger UI has been removed from the `/apidocs` page.
+It has been replaced with a link to the [Swagger UI in the versioned documentation](swagger.md) and download links for the OpenAPI spec and JSON schema.
+
 ### JSON templating fix
 
 When returning a map or array in an expression, you would get a Golang representation.

diff --git a/ui/package.json b/ui/package.json
@@ -37,7 +37,6 @@
         "react-router-dom": "^4.2.2",
         "remark-gfm": "^3.0.0",
         "superagent": "^8.1.2",
-        "swagger-ui-react": "^5.17.12",
         "yaml": "^2.5.1"
     },
     "devDependencies": {
@@ -60,7 +59,6 @@
         "@types/react-helmet": "^6.1.11",
         "@types/react-router-dom": "^4.2.3",
         "@types/superagent": "^8.1.1",
-        "@types/swagger-ui-react": "^4.11.0",
         "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^6.18.1",
         "@typescript-eslint/parser": "^6.10.0",

diff --git a/ui/src/api-docs/api-docs.tsx b/ui/src/api-docs/api-docs.tsx
@@ -2,30 +2,40 @@ import {Page} from 'argo-ui/src/components/page/page';
 import * as React from 'react';
 
 import {uiUrl} from '../shared/base';
-import {Loading} from '../shared/components/loading';
+import {ZeroState} from '../shared/components/zero-state';
 import {useCollectEvent} from '../shared/use-collect-event';
 
 export function ApiDocs() {
     useCollectEvent('openedApiDocs');
     return (
-        <Page title='Swagger'>
-            <div className='argo-container'>
-                <SuspenseSwaggerUI url={uiUrl('assets/openapi-spec/swagger.json')} defaultModelExpandDepth={0} />
-            </div>
+        <Page
+            title='Swagger'
+            toolbar={{
+                breadcrumbs: [{title: 'Swagger', path: uiUrl('apidocs')}]
+            }}>
+            <ZeroState title='Swagger'>
+                <p>
+                    Download the{' '}
+                    <a href={uiUrl('assets/openapi-spec/swagger.json')} download>
+                        Open API / Swagger spec
+                    </a>
+                    .
+                </p>
+                <p>
+                    Download the{' '}
+                    <a href={uiUrl('assets/jsonschema/schema.json')} download>
+                        JSON schema
+                    </a>
+                    .
+                </p>
+                <p>
+                    View the interactive Swagger UI{' '}
+                    <a href='https://argo-workflows.readthedocs.io/en/latest/swagger/' target='_blank' rel='noreferrer'>
+                        in the Documentation
+                    </a>
+                    .
+                </p>
+            </ZeroState>
         </Page>
     );
 }
-
-// lazy load SwaggerUI as it is infrequently used and imports very large components (which can be split into a separate bundle)
-const LazySwaggerUI = React.lazy(() => {
-    import(/* webpackChunkName: "swagger-ui-react-css" */ 'swagger-ui-react/swagger-ui.css');
-    return import(/* webpackChunkName: "swagger-ui-react" */ 'swagger-ui-react');
-});
-
-function SuspenseSwaggerUI(props: any) {
-    return (
-        <React.Suspense fallback={<Loading />}>
-            <LazySwaggerUI {...props} />
-        </React.Suspense>
-    );
-}
diff --git a/ui/src/help/help.tsx b/ui/src/help/help.tsx
@@ -1,7 +1,6 @@
 import {Page} from 'argo-ui/src/components/page/page';
 import * as React from 'react';
 
-import {uiUrl} from '../shared/base';
 import {useCollectEvent} from '../shared/use-collect-event';
 
 import './help.scss';
@@ -15,10 +14,10 @@ export function Help() {
                     <div className='help-box'>
                         <div className='help-box__ico help-box__ico--manual' />
                         <h3>Documentation</h3>
-                        <a href='https://argo-workflows.readthedocs.io/en/latest' target='_blank' className='help-box__link' rel='noreferrer'>
+                        <a className='help-box__link' target='_blank' href='https://argo-workflows.readthedocs.io/en/latest' rel='noreferrer'>
                             Online Help
                         </a>
-                        <a className='help-box__link' target='_blank' href={uiUrl('apidocs')} rel='noreferrer'>
+                        <a className='help-box__link' target='_blank' href='https://argo-workflows.readthedocs.io/en/latest/swagger/' rel='noreferrer'>
                             API Docs
                         </a>
                     </div>

diff --git a/ui/src/workflow-event-bindings/workflow-event-bindings.tsx b/ui/src/workflow-event-bindings/workflow-event-bindings.tsx
@@ -116,8 +116,11 @@ export function WorkflowEventBindings({match, location, history}: RouteComponent
                         </code>
                     </p>
                     <p>
-                        You&apos;ll probably find it easiest to experiment and test using the <a href={uiUrl('apidocs')}>graphical interface to the API </a> - look for
-                        &quot;EventService&quot;.
+                        You can also experiment with viewing the{' '}
+                        <a href='https://argo-workflows.readthedocs.io/en/latest/swagger/' target='_blank' rel='noreferrer'>
+                            graphical interface to the API
+                        </a>{' '}
+                        - look for &quot;EventService&quot;.
                     </p>
                     <p>{learnMore}</p>
                 </ZeroState>