Merge pull request #187 from WangLiNaruto/feature/credential_api_doc

show credentials openapi documentation in add/update credentials UI
eclipse-xpanse · Sep 6, 2023 · 32066a8 · 32066a8
2 parents 073a70a + 687c00e
commit 32066a8
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 0 deletions.
diff --git a/src/components/content/credential/AddCredential.tsx b/src/components/content/credential/AddCredential.tsx
@@ -19,6 +19,7 @@ import {
 import { CredentialTip } from './CredentialTip';
 import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
 import { cspMap } from '../order/formElements/CspSelect';
+import { CredentialApiDoc } from './CredentialApiDoc';
 
 function AddCredential({
     credentialsQuery,
@@ -339,6 +340,12 @@ function AddCredential({
 
     return (
         <div className={'credential-from'}>
+            <CredentialApiDoc
+                csp={currentCsp ?? CredentialVariables.csp.HUAWEI}
+                credentialType={currentType ?? CredentialVariables.type.VARIABLES}
+                styleClass={'add-credential-api-doc'}
+            />
+
             <Form
                 form={form}
                 labelCol={{ span: 4 }}

diff --git a/src/components/content/credential/CredentialApiDoc.tsx b/src/components/content/credential/CredentialApiDoc.tsx
@@ -0,0 +1,36 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { LinkOutlined } from '@ant-design/icons';
+import '../../../styles/app.css';
+import { CredentialsManagementService, CredentialVariables, Link } from '../../../xpanse-api/generated';
+
+export function CredentialApiDoc({
+    csp,
+    credentialType,
+    styleClass,
+}: {
+    csp: CredentialVariables.csp;
+    credentialType: CredentialVariables.type;
+    styleClass: string;
+}): JSX.Element {
+    function onclick() {
+        CredentialsManagementService.getCredentialOpenApi(csp, credentialType)
+            .then((link: Link) => {
+                if (link.href !== undefined) {
+                    window.open(link.href);
+                }
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    }
+
+    return (
+        <button className={styleClass} onClick={onclick}>
+            <LinkOutlined /> API Documentation
+        </button>
+    );
+}
diff --git a/src/components/content/credential/UpdateCredential.tsx b/src/components/content/credential/UpdateCredential.tsx
@@ -19,6 +19,7 @@ import '../../../styles/credential.css';
 import { CredentialTip } from './CredentialTip';
 import { useMutation, UseQueryResult } from '@tanstack/react-query';
 import { cspMap } from '../order/formElements/CspSelect';
+import { CredentialApiDoc } from './CredentialApiDoc';
 
 function UpdateCredential({
     createCredential,
@@ -190,6 +191,11 @@ function UpdateCredential({
 
     return (
         <div className={'credential-from'}>
+            <CredentialApiDoc
+                csp={createCredential.csp}
+                credentialType={createCredential.type}
+                styleClass={'update-credential-api-doc'}
+            />
             <Form
                 form={form}
                 labelCol={{ span: 4 }}

diff --git a/src/styles/credential.css b/src/styles/credential.css
@@ -55,3 +55,29 @@
     display: flex;
     justify-content: center;
 }
+
+.add-credential-api-doc{
+    font-size: 6px;
+    font-weight: bold;
+    float: right;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline;
+    padding: 0;
+    margin-top: -27px;
+    margin-right: 240px;
+}
+
+.update-credential-api-doc{
+    font-size: 6px;
+    font-weight: bold;
+    float: right;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline;
+    padding: 0;
+    margin-top: -27px;
+    margin-right: 250px;
+}