@cloudsigma/cs-partner-matrixorigin

Initiate

Dependencies

Install dependencies

npm i

Build/Watch

Opens browser tab containing CloudSigma layout and custom component

npm run serve

Component will open at http://local.cloudsigma.com:3000, if you can not access it add this line to your hosts files.

127.0.0.1 local.cloudsigma.com

Checks

CloudSigma session integration

CloudSigma owns SSO refresh and pushes the current token through config.accessToken. The component reads both replaced configs and in-place token updates; the optional getAccessToken callback remains supported as a host-owned current-token source. OmniFabric does not read CloudSigma cookies or call CloudSigma/Keycloak refresh endpoints.

Before sending a request, a JWT within five seconds of expiry waits up to ten seconds for a usable replacement. A gateway 401 (without X-Request-Id) waits for a different token and replays the request once, including POST bodies. Cluster requests retain the separate MO token in Access-Token and the CS token in Authorization. Opaque tokens continue to be validated by the server.

A timeout or rejected replacement displays the session error card. A subsequent usable host token automatically resets failed reads and restores polling while preserving OmniFabric activation and credentials. Recovery does not replay mutations.

Regression checks:

rtk npm run test:unit
rtk proxy npx playwright test tests/e2e/session-recovery.spec.ts --project=chromium

The browser regressions simulate token rotation and delayed delivery; acceptance testing in JHB should also cover real computer sleep beyond the 15-minute token lifetime.

Tests

For tests Playwright is used. You can find tests in tests/e2e folder, to run tests manually execute the following command:

npm test

Package

Checks if package can be build

npm run build

CSS

Styling components can be made only with using inline CSS. For example:

function ComponentWithInlineCss() {
  return (
    <div
      style={{
        width: '10px',
        height: '10px',
        backgroundColor: '#000',
      }}
    >
      Inline CSS
    </div>
  );
}

By following these guidelines, you maintain a clean and isolated styling approach within your components,preventing unintended style conflicts when using external css.

Image Integration

In your component file, use the import statement to bring in the image:

import logo from '../../assets/logo.svg';

Place the imported image in your component's JSX:

 <img src={logo} alt="Logo" />

Organize your images within the project structure. For example:

project-root/
|-- src/
|   |-- component/
|       |-- assets/
|           |-- logo.svg
|-- ...

Icons

For Icons we use Font Awesome version 4.7, you can find icons it provides here

Localisation

You can add custom translations in src/component/locales - [language].js files.

To add translation to component, useTranslation must be imported from react-i18next. For example:

import { useTranslation } from 'react-i18next';

...

function ComponentWithTranslation() {
  const {t} = useTranslation();

  return (
    <h2>
      {t('Translation Key')}
    </h2>
  );
}

You can test different locales by chaning lng: 'en' key in static src/config.jsx file to match desired locale.

i18next Documentation