React CCM Service Client

OpenAPI -> OA

TypeScript -> TS

OpenAPI + TypeScript -> OATS

This React API client stores a collection of Harness CCM (Cloud Cost Management) Service APIs and interface contracts generated from an OpenAPI spec using OATS CLI. APIs are exposed as hooks built on @tanstack/react-query.

Build

yarn build

Initializing the Client

Before using any hook, initialize CCMServiceAPIClient with your auth and URL configuration:

import { CCMServiceAPIClient } from '@harnessio/react-ccm-service-client';

new CCMServiceAPIClient({
  urlInterceptor: (url) => `${window.apiUrl}/${url}`,
  getRequestHeaders: () => ({
    Authorization: `Bearer ${yourToken}`,
    'Harness-Account': accountId,
  }),
  requestInterceptor: (request) => {
    // optionally modify the Request object before it is sent
    return request;
  },
  responseInterceptor: (res) => {
    if (res.status === 401) {
      window.dispatchEvent(new CustomEvent('PROMISE_API_RESPONSE', { detail: { response: res } }));
    }
    return res;
  },
});

Updating Headers at Runtime

The client instance exposes updateHeaders to patch headers after initialization (e.g. after a token refresh):

const client = new CCMServiceAPIClient({ ... })

// later, when the token changes:
client.updateHeaders({ Authorization: `Bearer ${newToken}` })

CCM UI Integration

CCM UI uses restful-react today. To adopt this package you need three one-time changes:

| Change | Where | Required | | ------------------------------------- | ---------------------------- | ---------------------------------- | | yarn add @tanstack/react-query | CCM UI package.json | Yes — peer dependency | | Wrap app with <QueryClientProvider> | App.tsx or bootstrap.tsx | Yes — hooks won't work without it | | Call new CCMServiceAPIClient(...) | App init / bootstrap | Yes — fetcher throws if not called |

Minimal bootstrap example

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { CCMServiceAPIClient } from '@harnessio/react-ccm-service-client';

new CCMServiceAPIClient({
  urlInterceptor: (url) => `${window.apiUrl}/${url}`,
  getRequestHeaders: () => ({ Authorization: `Bearer ${token}`, 'Harness-Account': accountId }),
  responseInterceptor: (res) => {
    window.dispatchEvent(new CustomEvent('PROMISE_API_RESPONSE', { detail: { response: res } }));
    return res;
  },
});

const queryClient = new QueryClient();

export default function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

Local Development with yalc

Use yalc to test local changes in CCM UI before publishing.

Step 1 — Build and publish to the local yalc store:

cd packages/ccm-service
yarn build
yalc publish

Step 2 — Add to CCM UI:

cd /path/to/ccm-ui
yalc add @harnessio/react-ccm-service-client
yarn install
yarn add @tanstack/react-query   # if not already present

Step 3 — Sync after rebuilding:

# in packages/ccm-service:
yarn build && yalc push

Remove the yalc link when done:

cd /path/to/ccm-ui
yalc remove @harnessio/react-ccm-service-client
yarn install

Versioning

Versioning is driven by the OpenAPI spec. Do not manually edit files under src/services/ — run yarn generate after updating openapi.json.

License

MIT. Copyright(c) Harness Inc