feat(apicp): refine API Control Plane UI: API key dialog, Swagger-consistent resource rows, project and gateway listings

portals/api-control-plane/src/components/SwaggerOperationsView/MethodBadge.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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 { Box } from '@wso2/oxygen-ui';
+
+import { methodPalette } from './methodPalette';
+
+/** Solid, fixed-size HTTP verb label. */
+
+/** Fits the longest verb: `OPTIONS`. */
+const WIDTH = 64;
+const HEIGHT = 30;
+
+export function MethodBadge({ method }: { method: string }) {
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        bgcolor: methodPalette(method).badge,
+        borderRadius: 0.5,
+        color: 'common.white',
+        display: 'inline-flex',
+        flexShrink: 0,
+        fontSize: 12,
+        fontWeight: 700,
+        height: HEIGHT,
+        justifyContent: 'center',
+        letterSpacing: 0.35,
+        minWidth: WIDTH,
+        px: 1.25,
+        textTransform: 'uppercase',
+      }}
+    >
+      {method}
+    </Box>
+  );
+}

portals/api-control-plane/src/components/SwaggerOperationsView/PolicyIndicator.test.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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 { describe, expect, it } from 'vitest';
+
+import { renderWithProviders, screen } from '@/test/utils';
+import { PolicyIndicator, policyColor, policyInitials } from './PolicyIndicator';
+
+describe('policyInitials', () => {
+  it('initials the words after the namespace, not the namespace itself', () => {
+    // Every `mediation.*` policy would otherwise read "ME".
+    expect(policyInitials('mediation.rewrite_resource_path')).toBe('RR');
+    expect(policyInitials('mediation.set_header')).toBe('SH');
+  });
+
+  it('takes two letters from a single-word name', () => {
+    expect(policyInitials('cors')).toBe('CO');
+  });
+
+  it('splits on spaces, hyphens and camelCase alike', () => {
+    expect(policyInitials('Rate Limiting')).toBe('RL');
+    expect(policyInitials('rate-limiting')).toBe('RL');
+    expect(policyInitials('rateLimiting')).toBe('RL');
+  });
+
+  it('degrades to a placeholder rather than throwing on an empty name', () => {
+    expect(policyInitials('')).toBe('?');
+  });
+});
+
+describe('policyColor', () => {
+  it('is stable for a name, so one policy is one colour everywhere', () => {
+    expect(policyColor('mediation.cors')).toBe(policyColor('mediation.cors'));
+  });
+
+  it('does not depend on position in a list', () => {
+    // The regression this guards: colouring by index recoloured every circle
+    // when a policy was attached above it.
+    const before = ['a.one', 'b.two'].map(policyColor);
+    const after = ['c.three', 'a.one', 'b.two'].map(policyColor);
+    expect(after.slice(1)).toEqual(before);
+  });
+});
+
+describe('PolicyIndicator', () => {
+  it('renders nothing when no policies are attached', () => {
+    const { container } = renderWithProviders(<PolicyIndicator policies={[]} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('draws one initialled circle per attached policy', () => {
+    renderWithProviders(
+      <PolicyIndicator
+        policies={[
+          { name: 'mediation.cors', version: 'v1' },
+          { name: 'mediation.rate_limit', version: 'v2' },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('CO')).toBeInTheDocument();
+    expect(screen.getByText('RL')).toBeInTheDocument();
+  });
+
+  it('collapses the tail into one +N circle so a long list cannot crowd the row', () => {
+    renderWithProviders(
+      <PolicyIndicator
+        policies={['one', 'two', 'three', 'four', 'five', 'six'].map((name) => ({
+          name: `mediation.${name}`,
+          version: 'v1',
+        }))}
+      />,
+    );
+
+    expect(screen.getByText('+2')).toBeInTheDocument();
+    // The first four are drawn; the fifth is only named in the overflow tooltip.
+    expect(screen.getByText('ON')).toBeInTheDocument();
+    expect(screen.getByText('FO')).toBeInTheDocument();
+    expect(screen.queryByText('FI')).not.toBeInTheDocument();
+  });
+});

portals/api-control-plane/src/components/SwaggerOperationsView/PolicyIndicator.tsx

@@ -0,0 +1,186 @@
+/*
+ * 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 { Box, Tooltip, Typography } from '@wso2/oxygen-ui';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  overflow: {
+    id: 'apiControlPlane.components.SwaggerOperationsView.PolicyIndicator.overflow',
+    defaultMessage: '{count, plural, one {# more policy} other {# more policies}}: {names}',
+    description:
+      'Tooltip on the "+N" circle standing for policies too numerous to draw. {names} is a comma-separated list of policy names, which are not translated.',
+  },
+  overflowCount: {
+    id: 'apiControlPlane.components.SwaggerOperationsView.PolicyIndicator.overflowCount',
+    defaultMessage: '+{count}',
+    description:
+      'Label inside the circle standing for policies too numerous to draw, e.g. "+3". Kept short enough to fit a 28px circle.',
+  },
+  policy: {
+    id: 'apiControlPlane.components.SwaggerOperationsView.PolicyIndicator.policy',
+    defaultMessage: '{name} · {version}',
+    description:
+      'Tooltip on one policy circle. {name} is a policy name and {version} its version; neither is translated.',
+  },
+});
+
+/** Attached policies shown as overlapping, initialled circles. */
+
+/** Circle diameter, and how much of the previous circle each one covers. */
+const SIZE = 28;
+const OVERLAP = 6;
+
+/** Ring separating overlapping circles, matching the surface behind the cluster. */
+const RING_WIDTH = 2;
+
+/** Beyond this, the rest collapse into a single "+N" circle. */
+const MAX_VISIBLE = 4;
+
+/** Identity palette; colours stay distinct from semantic theme roles. */
+const IDENTITY_COLORS = [
+  '#FF6B35',
+  '#1976D2',
+  '#9C27B0',
+  '#2E7D32',
+  '#C62828',
+  '#00838F',
+  '#EF6C00',
+  '#4527A0',
+];
+
+/** The "+N" circle is deliberately outside the identity palette — it names no one policy. */
+const OVERFLOW_COLOR = '#78909C';
+
+/** Extracts initial-bearing words from a namespaced policy name. */
+const wordsOf = (name: string): string[] =>
+  name
+    .split('.')
+    .pop()!
+    .split(/[\s_-]+|(?<=[a-z0-9])(?=[A-Z])/)
+    .filter(Boolean);
+
+/** Up to two letters standing for a policy. */
+export const policyInitials = (name: string): string => {
+  const words = wordsOf(name);
+  if (words.length === 0) return '?';
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return (words[0][0] + words[1][0]).toUpperCase();
+};
+
+/** Stable identity colour derived from the policy name, not its position. */
+export const policyColor = (name: string): string => {
+  let hash = 0;
+  for (let i = 0; i < name.length; i += 1) {
+    hash = (hash * 31 + name.charCodeAt(i)) | 0;
+  }
+  return IDENTITY_COLORS[Math.abs(hash) % IDENTITY_COLORS.length];
+};
+
+/** One circle. `offset` is its index in the drawn row, not in the policy list. */
+function Circle({
+  color,
+  label,
+  offset,
+  stackSize,
+  title,
+}: {
+  color: string;
+  label: string;
+  offset: number;
+  stackSize: number;
+  title: string;
+}) {
+  return (
+    <Tooltip arrow title={title}>
+      <Box
+        sx={(theme) => ({
+          alignItems: 'center',
+          bgcolor: color,
+          border: `${RING_WIDTH}px ${theme.border.style}`,
+          borderColor: 'background.paper',
+          borderRadius: '50%',
+          cursor: 'default',
+          display: 'inline-flex',
+          height: SIZE,
+          justifyContent: 'center',
+          ml: offset === 0 ? 0 : `-${OVERLAP}px`,
+          width: SIZE,
+          // Earlier circles sit on top, so the cluster reads left-to-right.
+          zIndex: stackSize - offset,
+        })}
+      >
+        <Typography
+          sx={{
+            color: 'common.white',
+            fontSize: 10,
+            fontWeight: 700,
+            lineHeight: 1,
+            userSelect: 'none',
+          }}
+        >
+          {label}
+        </Typography>
+      </Box>
+    </Tooltip>
+  );
+}
+
+export type PolicyIndicatorPolicy = {
+  name: string;
+  version: string;
+};
+
+export function PolicyIndicator({ policies }: { policies: PolicyIndicatorPolicy[] }) {
+  const intl = useIntl();
+  if (policies.length === 0) return null;
+
+  const visible = policies.slice(0, MAX_VISIBLE);
+  const hidden = policies.slice(MAX_VISIBLE);
+  const stackSize = visible.length + (hidden.length > 0 ? 1 : 0);
+
+  return (
+    <Box sx={{ alignItems: 'center', display: 'flex', flexShrink: 0 }}>
+      {visible.map((policy, index) => (
+        <Circle
+          color={policyColor(policy.name)}
+          key={`${policy.name}-${index}`}
+          label={policyInitials(policy.name)}
+          offset={index}
+          stackSize={stackSize}
+          title={intl.formatMessage(messages.policy, {
+            name: policy.name,
+            version: policy.version,
+          })}
+        />
+      ))}
+      {hidden.length > 0 && (
+        <Circle
+          color={OVERFLOW_COLOR}
+          label={intl.formatMessage(messages.overflowCount, { count: hidden.length })}
+          offset={visible.length}
+          stackSize={stackSize}
+          title={intl.formatMessage(messages.overflow, {
+            count: hidden.length,
+            names: hidden.map((policy) => policy.name).join(', '),
+          })}
+        />
+      )}
+    </Box>
+  );
+}