Add API Portal Provision UI to API Control Plane

portals/api-control-plane/src/api/ApiClientProvider.tsx

@@ -21,22 +21,26 @@ import { createContext, type ReactNode, useContext } from 'react';
 import {
   createApi,
   createApiKey,
+  createApiPortal,
   createGateway,
   createGatewayToken,
   createProject,
   deleteApi,
+  deleteApiPortal,
   deleteGatewayDeployment,
   deleteProject,
   deployApi,
   getApi,
   getApiDetail,
   getApiProxy,
+  getApiPortal,
   getGateway,
   getOrganization,
   getProject,
   listApiKeys,
   listApis,
   listDeployments,
+  listApiPortals,
   listEnvironments,
   listGatewayDeployments,
   listGateways,
@@ -46,6 +50,7 @@ import {
   revokeApiKey,
   undeployGatewayDeployment,
   updateApi,
+  updateApiPortal,
 } from './mvpApi';
 import {
   getPolicyDefinition,
@@ -79,6 +84,12 @@ export const realApiClient = {
   getGateway,
   createGateway,
   createGatewayToken,
+  // API Portals
+  listApiPortals,
+  getApiPortal,
+  createApiPortal,
+  updateApiPortal,
+  deleteApiPortal,
   // gateway deployments (the deploy path)
   listGatewayDeployments,
   deployApi,

portals/api-control-plane/src/api/adapters.ts

@@ -22,6 +22,9 @@ import type {
   ApiKind,
   ApiStatus,
   Deployment,
+  ApiPortal,
+  ApiPortalAuthType,
+  ApiPortalWorkflowStatus,
   Environment,
   Gateway,
   GatewayDeployment,
@@ -298,6 +301,51 @@ export const toGateway = (value: unknown): Gateway => {
   };
 };
 
+const API_PORTAL_AUTH_TYPES: ApiPortalAuthType[] = [
+  'local',
+  'idp_client_credentials',
+];
+
+const asApiPortalAuthType = (value: unknown): ApiPortalAuthType => {
+  const normalized = asString(value).toLowerCase();
+  return API_PORTAL_AUTH_TYPES.includes(normalized as ApiPortalAuthType)
+    ? (normalized as ApiPortalAuthType)
+    : API_PORTAL_AUTH_TYPES[0];
+};
+
+const API_PORTAL_WORKFLOW_STATUSES: ApiPortalWorkflowStatus[] = [
+  'pending',
+  'active',
+  'failed',
+];
+
+const asApiPortalWorkflowStatus = (value: unknown): ApiPortalWorkflowStatus => {
+  const normalized = asString(value).toLowerCase();
+  return API_PORTAL_WORKFLOW_STATUSES.includes(
+    normalized as ApiPortalWorkflowStatus
+  )
+    ? (normalized as ApiPortalWorkflowStatus)
+    : API_PORTAL_WORKFLOW_STATUSES[0];
+};
+
+export const toApiPortal = (value: unknown): ApiPortal => {
+  const source = asRecord(value);
+  const name = asString(source.name, 'unknown-api-portal');
+  return {
+    id: asString(source.id, name),
+    name,
+    handle: asString(source.handle, name),
+    description: asOptionalString(source.description),
+    url: asOptionalString(source.url),
+    workflowStatus: asApiPortalWorkflowStatus(source.workflowStatus),
+    authType: asApiPortalAuthType(source.authType),
+    createdAt: asOptionalString(source.createdAt),
+    stsTokenUrl: asOptionalString(source.stsTokenUrl),
+    clientId: asOptionalString(source.clientId),
+    organizationId: asOptionalString(source.organizationId),
+  };
+};
+
 const GATEWAY_DEPLOYMENT_STATUSES: GatewayDeploymentStatus[] = [
   'DEPLOYED',
   'UNDEPLOYED',

portals/api-control-plane/src/api/apiportal/apiPortalClient.ts

@@ -0,0 +1,160 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type {
+  CreateApiPortalInput,
+  ApiPortal,
+  UpdateApiPortalInput,
+} from '../../types/domain';
+import { toApiPortal } from '../adapters';
+import { apiPortals, organizations } from '../mocks/data';
+import { delay, useMockApi } from '../shared/apiClientUtils';
+import { ApiError } from '../types/errors';
+
+/**
+ * API Portal management has no platform-api backend yet (console-only feature
+ * for now) — unlike gatewayClient, there is no real REST endpoint to call, so
+ * there's no usePlatformApi() branch. Every method still gates on
+ * useMockApi() so a non-mock deployment gets an explicit error/empty result
+ * instead of silently writing to (and reading back from) the in-memory mock
+ * store as if it were persisted. Swap the `!useMockApi()` branches for a real
+ * client (platformGet/platformPost against ApiPortalResponse) once
+ * platform-api adds one.
+ */
+
+const requireOrganizationId = (orgHandle: string): string => {
+  const organization = organizations.find((item) => item.handle === orgHandle);
+  if (!organization) {
+    throw new ApiError('Organization not found', 'NOT_FOUND', 404);
+  }
+  return organization.id;
+};
+
+export async function listApiPortals(orgHandle: string): Promise<ApiPortal[]> {
+  if (!useMockApi()) {
+    return [];
+  }
+  await delay();
+  const orgId = requireOrganizationId(orgHandle);
+  return apiPortals
+    .filter((item) => item.organizationId === orgId)
+    .map(toApiPortal);
+}
+
+export async function getApiPortal(
+  orgHandle: string,
+  id: string
+): Promise<ApiPortal | undefined> {
+  if (!useMockApi()) {
+    return undefined;
+  }
+  await delay();
+  const orgId = requireOrganizationId(orgHandle);
+  const found = apiPortals.find(
+    (item) => item.id === id && item.organizationId === orgId
+  );
+  return found ? toApiPortal(found) : undefined;
+}
+
+export async function createApiPortal(
+  orgHandle: string,
+  input: CreateApiPortalInput
+): Promise<ApiPortal> {
+  if (!useMockApi()) {
+    throw new ApiError('API Portal creation requires the platform API', 'UNKNOWN');
+  }
+  await delay();
+  const orgId = requireOrganizationId(orgHandle);
+  if (apiPortals.some((item) => item.organizationId === orgId && item.handle === input.handle)) {
+    throw new ApiError(
+      'API Portal handle already exists in organization',
+      'CONFLICT',
+      409
+    );
+  }
+  // Picked explicitly (not `...input`) so `clientSecret` — the one genuinely
+  // write-only field — never ends up on the stored/returned record.
+  // stsTokenUrl/clientId are not secret and are stored/returned normally.
+  const apiPortal: ApiPortal = {
+    id: input.handle,
+    name: input.name,
+    handle: input.handle,
+    description: input.description,
+    url: input.url,
+    authType: input.authType,
+    stsTokenUrl:
+      input.authType === 'idp_client_credentials' ? input.stsTokenUrl : undefined,
+    clientId:
+      input.authType === 'idp_client_credentials' ? input.clientId : undefined,
+    workflowStatus: 'pending',
+    createdAt: new Date().toISOString(),
+    organizationId: orgId,
+  };
+  apiPortals.push(apiPortal);
+  return toApiPortal(apiPortal);
+}
+
+export async function updateApiPortal(
+  orgHandle: string,
+  id: string,
+  input: UpdateApiPortalInput
+): Promise<ApiPortal> {
+  if (!useMockApi()) {
+    throw new ApiError('API Portal update requires the platform API', 'UNKNOWN');
+  }
+  await delay();
+  const orgId = requireOrganizationId(orgHandle);
+  const index = apiPortals.findIndex(
+    (item) => item.id === id && item.organizationId === orgId
+  );
+  if (index < 0) {
+    throw new ApiError('API Portal not found', 'NOT_FOUND', 404);
+  }
+  // Same reasoning as createApiPortal: only clientSecret is excluded.
+  const updated: ApiPortal = {
+    ...apiPortals[index],
+    name: input.name,
+    description: input.description,
+    url: input.url,
+    authType: input.authType,
+    stsTokenUrl:
+      input.authType === 'idp_client_credentials' ? input.stsTokenUrl : undefined,
+    clientId:
+      input.authType === 'idp_client_credentials' ? input.clientId : undefined,
+  };
+  apiPortals[index] = updated;
+  return toApiPortal(updated);
+}
+
+export async function deleteApiPortal(
+  orgHandle: string,
+  id: string
+): Promise<void> {
+  if (!useMockApi()) {
+    throw new ApiError('API Portal deletion requires the platform API', 'UNKNOWN');
+  }
+  await delay();
+  const orgId = requireOrganizationId(orgHandle);
+  const index = apiPortals.findIndex(
+    (item) => item.id === id && item.organizationId === orgId
+  );
+  if (index < 0) {
+    throw new ApiError('API Portal not found', 'NOT_FOUND', 404);
+  }
+  apiPortals.splice(index, 1);
+}

portals/api-control-plane/src/api/hooks/useMvpQueries.ts

@@ -25,11 +25,14 @@ import type {
   ApiDetail,
   CreateApiInput,
   CreateApiKeyInput,
+  CreateApiPortalInput,
   CreateGatewayInput,
   CreateProjectInput,
   DeployApiInput,
+  ApiPortal,
   GatewayDeployment,
   Project,
+  UpdateApiPortalInput,
 } from '../../types/domain';
 import { useApiClient } from '../ApiClientProvider';
 
@@ -58,6 +61,9 @@ export const queryKeys = {
   gateways: (orgHandle: string) => ['gateways', orgHandle] as const,
   gateway: (orgHandle: string, gatewayId: string) =>
     ['gateway', orgHandle, gatewayId] as const,
+  apiPortals: (orgHandle: string) => ['apiPortals', orgHandle] as const,
+  apiPortal: (orgHandle: string, apiPortalId: string) =>
+    ['apiPortal', orgHandle, apiPortalId] as const,
 };
 
 /**
@@ -532,6 +538,97 @@ export const useCreateGatewayToken = (
   });
 };
 
+export const useApiPortals = (orgHandleArg?: string) => {
+  const client = useApiClient();
+  const { orgHandle } = useScopeArgs(orgHandleArg);
+  return useQuery({
+    queryKey: queryKeys.apiPortals(orgHandle || ''),
+    queryFn: () => {
+      if (!orgHandle) {
+        throw new Error('orgHandle is required to list API Portals');
+      }
+      return client.listApiPortals(orgHandle);
+    },
+    enabled: !!orgHandle,
+  });
+};
+
+export const useApiPortal = (orgHandleArg?: string, apiPortalId?: string) => {
+  const client = useApiClient();
+  const { orgHandle } = useScopeArgs(orgHandleArg);
+  return useQuery({
+    queryKey: queryKeys.apiPortal(orgHandle || '', apiPortalId || ''),
+    queryFn: () => {
+      if (!orgHandle) {
+        throw new Error('orgHandle is required to fetch an API Portal');
+      }
+      if (!apiPortalId) {
+        throw new Error('apiPortalId is required to fetch an API Portal');
+      }
+      return client.getApiPortal(orgHandle, apiPortalId);
+    },
+    enabled: !!orgHandle && !!apiPortalId,
+  });
+};
+
+export const useCreateApiPortal = (orgHandleArg?: string) => {
+  const client = useApiClient();
+  const queryClient = useQueryClient();
+  const { orgHandle = '' } = useScopeArgs(orgHandleArg);
+  return useMutation({
+    mutationFn: (input: CreateApiPortalInput) =>
+      client.createApiPortal(orgHandle, input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.apiPortals(orgHandle),
+      });
+    },
+  });
+};
+
+export const useUpdateApiPortal = (
+  orgHandleArg?: string,
+  apiPortalId = ''
+) => {
+  const client = useApiClient();
+  const queryClient = useQueryClient();
+  const { orgHandle = '' } = useScopeArgs(orgHandleArg);
+  return useMutation({
+    mutationFn: (input: UpdateApiPortalInput) =>
+      client.updateApiPortal(orgHandle, apiPortalId, input),
+    onSuccess: (updated) => {
+      // Write the response into the cache synchronously so callers reading
+      // this query (e.g. a dirty-state check) see the saved values
+      // immediately, rather than waiting on the background refetch below.
+      queryClient.setQueryData(
+        queryKeys.apiPortal(orgHandle, updated.id),
+        updated
+      );
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.apiPortal(orgHandle, updated.id),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.apiPortals(orgHandle),
+      });
+    },
+  });
+};
+
+export const useDeleteApiPortal = (orgHandleArg?: string) => {
+  const client = useApiClient();
+  const queryClient = useQueryClient();
+  const { orgHandle = '' } = useScopeArgs(orgHandleArg);
+  return useMutation({
+    mutationFn: (apiPortal: ApiPortal) =>
+      client.deleteApiPortal(orgHandle, apiPortal.id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.apiPortals(orgHandle),
+      });
+    },
+  });
+};
+
 export const useCreateApi = (
   orgHandleArg?: string,
   projectHandlerArg?: string