Merge pull request #53 from solace-iot-team/ep2-3

Ep2 3

Author: ricardojosegomezulmke

ReleaseNotes.md

@@ -2,6 +2,21 @@
 
 Solace Async API Management.
 
+## Version 0.4.3
+
+* [API-M Admin & Developer Portal](https://github.com/solace-iot-team/async-apim/tree/main/apim-portal): 0.4.3
+* [API-M Server OpenAPI](https://github.com/solace-iot-team/async-apim/blob/main/apim-server/server/common/api.yml): 0.4.0
+* [API-M Server](https://github.com/solace-iot-team/async-apim/tree/main/apim-server): 0.4.1
+* [API-M Connector OpenAPI](https://github.com/solace-iot-team/platform-api): 0.15.0
+
+**New Features:**
+- **App Credentials**
+  - display of array of credentials
+  - Note: management of array of credentials not supported. will always use the first entry in the array instead.
+- **Organization Settings**
+  - added service registry type to general settings
+
+
 ## Version 0.4.2
 
 * [API-M Admin & Developer Portal](https://github.com/solace-iot-team/async-apim/tree/main/apim-portal): 0.4.2

apim-portal/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "async-apim-portal",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Solace Async API Management Portal",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@asyncapi/react-component": "1.0.0-next.33",
-    "@solace-iot-team/apim-connector-openapi-browser": "^0.13.1",
+    "@solace-iot-team/apim-connector-openapi-browser": "^0.15.0",
     "async-mutex": "^0.3.2",
     "base-64": "^1.0.0",
     "dompurify": "^2.3.8",

apim-portal/package.json

@@ -23,21 +23,27 @@ export interface IEditExternalCredentialsFormProps {
 }
 
 export const EditExternalCredentialsForm: React.FC<IEditExternalCredentialsFormProps> = (props: IEditExternalCredentialsFormProps) => {
-  // const ComponentName = 'EditExternalCredentialsForm';
+  const ComponentName = 'EditExternalCredentialsForm';
 
   type TManagedObject = TAPAppDisplay_Credentials;
   type TManagedObjectFormData = {
     consumerKey: string;
     consumerSecret: string;
-  };
+  }; 
   type TManagedObjectFormDataEnvelope = {
     formData: TManagedObjectFormData;
   }
 
   const transform_ManagedObject_To_FormDataEnvelope = (mo: TManagedObject): TManagedObjectFormDataEnvelope => {
+    const funcName = 'transform_ManagedObject_To_FormDataEnvelope';
+    const logName = `${ComponentName}.${funcName}()`;
+    // TODO deal with array
+    if(mo.apAppCredentialsDisplayEnvelope.apAppCredentialsDisplayList.length === 0) throw new Error(`${logName}: mo.apAppCredentialsDisplayEnvelope.apAppCredentialsDisplayList.length === 0`);
+    const consumerKey = mo.apAppCredentialsDisplayEnvelope.apAppCredentialsDisplayList[0].secret.consumerKey;
+    const consumerSecret = mo.apAppCredentialsDisplayEnvelope.apAppCredentialsDisplayList[0].secret.consumerSecret;
     const fd: TManagedObjectFormData = {
-      consumerKey: mo.apAppCredentials.secret.consumerKey,
-      consumerSecret: mo.apAppCredentials.secret.consumerSecret ? mo.apAppCredentials.secret.consumerSecret : '',
+      consumerKey: consumerKey,
+      consumerSecret: consumerSecret ? consumerSecret : '',
     };
     return {
       formData: fd
@@ -49,8 +55,9 @@ export const EditExternalCredentialsForm: React.FC<IEditExternalCredentialsFormP
   }): TManagedObject => {
     const mo: TManagedObject = props.apAppDisplay_Credentials;
     const fd: TManagedObjectFormData = formDataEnvelope.formData;
-    mo.apAppCredentials.secret.consumerKey = fd.consumerKey;
-    mo.apAppCredentials.secret.consumerSecret = fd.consumerSecret;
+    // TODO deal with array
+    mo.apAppCredentialsDisplayEnvelope.apAppCredentialsDisplayList[0].secret.consumerKey = fd.consumerKey;
+    mo.apAppCredentialsDisplayEnvelope.apAppCredentialsDisplayList[0].secret.consumerSecret = fd.consumerSecret;
     return mo;
   }
 

apim-portal/src/admin-portal/components/ManageApps/ManageAccess/EditExternalCredentialsForm.tsx

@@ -107,7 +107,7 @@ export const EditInternalCredentialsForm: React.FC<IEditInternalCredentialsFormP
           <div className="p-mb-4"><b>Current Credentials</b></div>
           <div className="p-mb-6">
             <APDisplayDeveloperPortalAppCredentials
-              appCredentials={mo.apAppCredentials}
+              apAppCredentialsDisplayEnvelope={mo.apAppCredentialsDisplayEnvelope}
               // className={props.contentClassName}
             />
           </div>  

apim-portal/src/admin-portal/components/ManageApps/ManageAccess/EditInternalCredentialsForm.tsx

@@ -157,7 +157,7 @@ export const ViewApp: React.FC<IViewAppProps> = (props: IViewAppProps) => {
           <TabPanel header='General'>
 
             <APDisplayDeveloperPortalAppCredentialsPanel
-              appCredentials={managedObject.apAppCredentials}
+              apAppCredentialsDisplayEnvelope={managedObject.apAppCredentialsDisplayEnvelope}
               componentTitle="Credentials"
               collapsed={true}
             />

apim-portal/src/admin-portal/components/ManageApps/ViewApp.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { TabPanel, TabView } from "primereact/tabview";
 
 import { APComponentHeader } from "../../../../components/APComponentHeader/APComponentHeader";
-import { DisplaySectionHeader_ApiProducts, DisplaySectionHeader_Apps, DisplaySectionHeader_AssetManagement, DisplaySectionHeader_EventPortalServices, DisplaySectionHeader_SempV2Auth, DisplaySectionHeader_SolaceCloudServices, E_DISPLAY_ORGANIZATION_SCOPE } from "../ManageOrganizationsCommon";
+import { DisplaySectionHeader_ApiProducts, DisplaySectionHeader_Apps, DisplaySectionHeader_AssetManagement, DisplaySectionHeader_EventPortalServices, DisplaySectionHeader_SempV2Auth, DisplaySectionHeader_ServiceRegistry, DisplaySectionHeader_SolaceCloudServices, E_DISPLAY_ORGANIZATION_SCOPE } from "../ManageOrganizationsCommon";
 import { IAPSingleOrganizationDisplay } from "../../../../displayServices/APOrganizationsDisplayService/APSingleOrganizationDisplayService";
 import { IAPSystemOrganizationDisplay } from "../../../../displayServices/APOrganizationsDisplayService/APSystemOrganizationsDisplayService";
 import APOrganizationsDisplayService, { 
@@ -34,6 +34,7 @@ import { TApiCallState } from "../../../../utils/ApiCallState";
 
 import '../../../../components/APComponents.css';
 import "../ManageOrganizations.css";
+import { ServiceRegistryType } from "@solace-iot-team/apim-connector-openapi-browser";
 
 export interface IDisplayOrganizationProps {
   apOrganizationDisplay: IAPSystemOrganizationDisplay | IAPSingleOrganizationDisplay;
@@ -266,6 +267,11 @@ export const DisplayOrganization: React.FC<IDisplayOrganizationProps> = (props:
     const logName = `${ComponentName}.${funcName}()`;
     if(managedObject === undefined) throw new Error(`${logName}: managedObject === undefined`);
 
+    const renderServiceRegistryType = (serviceRegistryType: ServiceRegistryType): string => {
+      // TODO: switch and translate e-num values to displayValues
+      return serviceRegistryType;
+    }
+
     const renderAssetIncVersionStrategy = (apsAssetIncVersionStrategy: APSAssetIncVersionStrategy): string => {
       // TODO: switch and translate e-num values to displayValues
       return apsAssetIncVersionStrategy;
@@ -289,6 +295,10 @@ export const DisplayOrganization: React.FC<IDisplayOrganizationProps> = (props:
     const jsxTabPanelList: Array<JSX.Element> = [];
     jsxTabPanelList.push(
       <TabPanel header='General' key={Globals.getUUID()}>
+        <div className="p-mb-2 p-mt-4 ap-display-component-header">{DisplaySectionHeader_ServiceRegistry}:</div>
+        <div className="p-ml-4">
+          <p><b>Service Registry Type: </b>{renderServiceRegistryType(managedObject.apServiceRegistry)}</p>
+        </div>
         <div className="p-mb-2 p-mt-4 ap-display-component-header">{DisplaySectionHeader_AssetManagement}:</div>
         <div className="p-ml-4">
           <p><b>Version Increment Strategy: </b>{renderAssetIncVersionStrategy(managedObject.apAssetIncVersionStrategy)}</p>

apim-portal/src/admin-portal/components/ManageOrganizations/DisplayOrganization/DisplayOrganization.tsx

@@ -11,16 +11,19 @@ import { Dropdown } from "primereact/dropdown";
 import { ApiCallState, TApiCallState } from "../../../../utils/ApiCallState";
 import APDisplayUtils from "../../../../displayServices/APDisplayUtils";
 import { APClientConnectorOpenApi } from "../../../../utils/APClientConnectorOpenApi";
-import { DisplaySectionHeader_ApiProducts, DisplaySectionHeader_Apps, DisplaySectionHeader_AssetManagement, EAction, E_CALL_STATE_ACTIONS } from "../ManageOrganizationsCommon";
+import { DisplaySectionHeader_ApiProducts, DisplaySectionHeader_Apps, DisplaySectionHeader_AssetManagement, DisplaySectionHeader_ServiceRegistry, EAction, E_CALL_STATE_ACTIONS } from "../ManageOrganizationsCommon";
 import { IAPSingleOrganizationDisplay_General } from "../../../../displayServices/APOrganizationsDisplayService/APSingleOrganizationDisplayService";
 import { IAPSystemOrganizationDisplay_General } from "../../../../displayServices/APOrganizationsDisplayService/APSystemOrganizationsDisplayService";
 import APOrganizationsDisplayService from "../../../../displayServices/APOrganizationsDisplayService/APOrganizationsDisplayService";
 import { APSOpenApiFormValidationRules } from "../../../../utils/APSOpenApiFormValidationRules";
 import { APSAssetIncVersionStrategy } from "../../../../_generated/@solace-iot-team/apim-server-openapi-browser";
+import { APConnectorFormValidationRules } from "../../../../utils/APConnectorOpenApiFormValidationRules";
+import { ServiceRegistryType } from "@solace-iot-team/apim-connector-openapi-browser";
+import { ConfigHelper } from "../../../../components/APContextProviders/ConfigContextProvider/ConfigHelper";
+import { ConfigContext } from "../../../../components/APContextProviders/ConfigContextProvider/ConfigContextProvider";
 
 import '../../../../components/APComponents.css';
 import "../ManageOrganizations.css";
-import { APConnectorFormValidationRules } from "../../../../utils/APConnectorOpenApiFormValidationRules";
 
 export interface IEditNewGeneralFormProps {
   action: EAction;
@@ -39,6 +42,8 @@ export const EditNewGeneralForm: React.FC<IEditNewGeneralFormProps> = (props: IE
     id: string;
     displayName: string;
 
+    serviceRegistryType: ServiceRegistryType;
+
     assetIncVersionStrategy: APSAssetIncVersionStrategy;
 
     is_Configured_MaxNumEnvs_Per_ApiProduct: boolean;
@@ -63,6 +68,8 @@ export const EditNewGeneralForm: React.FC<IEditNewGeneralFormProps> = (props: IE
       id: mo.apEntityId.id,
       displayName: mo.apEntityId.displayName,
 
+      serviceRegistryType: mo.apServiceRegistry,
+
       assetIncVersionStrategy: mo.apAssetIncVersionStrategy,
 
       is_Configured_MaxNumEnvs_Per_ApiProduct: mo.apMaxNumEnvs_Per_ApiProduct > APOrganizationsDisplayService.get_DefaultMaxNumEnvs_Per_ApiProduct(),
@@ -89,6 +96,7 @@ export const EditNewGeneralForm: React.FC<IEditNewGeneralFormProps> = (props: IE
     const fd: TManagedObjectFormData = formDataEnvelope.formData;
     if(isNewManagedObject()) mo.apEntityId.id = fd.id;
     mo.apEntityId.displayName = fd.displayName;
+    mo.apServiceRegistry = fd.serviceRegistryType;
     mo.apAssetIncVersionStrategy = fd.assetIncVersionStrategy;
     mo.apMaxNumEnvs_Per_ApiProduct = fd.is_Configured_MaxNumEnvs_Per_ApiProduct ? fd.maxNumEnvs_Per_ApiProduct : APOrganizationsDisplayService.get_DefaultMaxNumEnvs_Per_ApiProduct();
     mo.apMaxNumApis_Per_ApiProduct = fd.is_Configured_MaxNumApis_Per_ApiProduct ? fd.maxNumApis_Per_ApiProduct : APOrganizationsDisplayService.get_DefaultMaxNumApis_Per_ApiProduct();
@@ -103,6 +111,8 @@ export const EditNewGeneralForm: React.FC<IEditNewGeneralFormProps> = (props: IE
   const [managedObjectFormDataEnvelope, setManagedObjectFormDataEnvelope] = React.useState<TManagedObjectFormDataEnvelope>();
   const [apiCallStatus, setApiCallStatus] = React.useState<TApiCallState | null>(null);
   const managedObjectUseForm = useForm<TManagedObjectFormDataEnvelope>();
+  const [configContext] = React.useContext(ConfigContext);
+
 
   // * Api Calls *
 
@@ -358,6 +368,38 @@ export const EditNewGeneralForm: React.FC<IEditNewGeneralFormProps> = (props: IE
               {APDisplayUtils.displayFormFieldErrorMessage(managedObjectUseForm.formState.errors.formData?.displayName)}
             </div>
 
+            <div className="p-mb-4 p-mt-4 ap-display-component-header">{DisplaySectionHeader_ServiceRegistry}:</div>
+            <div className="p-ml-4">
+              {/* service registry */}
+              <div className="p-field">
+                <span className="p-float-label">
+                  <Controller
+                    control={managedObjectUseForm.control}
+                    name="formData.serviceRegistryType"
+                    rules={APConnectorFormValidationRules.isRequired('Select Service Registry Type.', true)}
+                    render={( { field, fieldState }) => {
+                      return(
+                        <Dropdown
+                          id={field.name}
+                          {...field}
+                          options={Object.values(ServiceRegistryType)} 
+                          onChange={(e) => {                           
+                            field.onChange(e.value);
+                            managedObjectUseForm.clearErrors();
+                          }}
+                          className={classNames({ 'p-invalid': fieldState.invalid })}      
+                          // leave it fixed at patch
+                          disabled={!ConfigHelper.isEventPortal20(configContext)}
+                        />                        
+                      );
+                    }}
+                  />
+                  <label className={classNames({ 'p-error': managedObjectUseForm.formState.errors.formData?.assetIncVersionStrategy })}>Service Registry Type*</label>
+                </span>
+                {APDisplayUtils.displayFormFieldErrorMessage(managedObjectUseForm.formState.errors.formData?.assetIncVersionStrategy)}
+              </div>
+            </div>
+
             <div className="p-mb-4 p-mt-4 ap-display-component-header">{DisplaySectionHeader_AssetManagement}:</div>
             <div className="p-ml-4">
               {/* asset inc version strategy */}

apim-portal/src/admin-portal/components/ManageOrganizations/EditNewOrganization/EditNewGeneralForm.tsx

@@ -1,5 +1,6 @@
 import { TAPEntityId } from "../../../utils/APEntityIdsService";
 
+export const DisplaySectionHeader_ServiceRegistry = "Service Registry";
 export const DisplaySectionHeader_AssetManagement = "Asset Management";
 export const DisplaySectionHeader_ApiProducts = "API Products";
 export const DisplaySectionHeader_Apps = "Apps";

apim-portal/src/admin-portal/components/ManageOrganizations/ManageOrganizationsCommon.tsx

@@ -4,12 +4,15 @@ import React from "react";
 import { DataTable } from "primereact/datatable";
 import { Column } from "primereact/column";
 
-import APAppsDisplayService, { TAPAppCredentialsDisplay } from "../../displayServices/APAppsDisplayService/APAppsDisplayService";
+import APAppsDisplayService, { 
+  TAPAppCredentialsDisplay, 
+  TAPAppCredentialsDisplayEnvelope 
+} from "../../displayServices/APAppsDisplayService/APAppsDisplayService";
 
 import "../APComponents.css";
 
 export interface IAPDisplayDeveloperPortalApp_CredentialsProps {
-  appCredentials: TAPAppCredentialsDisplay;
+  apAppCredentialsDisplayEnvelope: TAPAppCredentialsDisplayEnvelope;
   className?: string;
 }
 
@@ -60,7 +63,7 @@ export const APDisplayDeveloperPortalAppCredentials: React.FC<IAPDisplayDevelope
         <DataTable
           className="p-datatable-sm"
           ref={componentDataTableRef}
-          value={[props.appCredentials]}
+          value={props.apAppCredentialsDisplayEnvelope.apAppCredentialsDisplayList}
           autoLayout={true}
           resizableColumns={true}
           columnResizeMode="fit"