@orchestrator-ui/orchestrator-ui-components 0.2.4 → 0.2.5

package/jest.config.cjs

@@ -2,6 +2,5 @@ const base = require('@orchestrator-ui/jest-config/jest-base.config.js');
 
 module.exports = {
     ...base,
-    name: 'orchestrator-ui-components',
     displayName: 'Orchestrator UI Components Tests',
 };

package/package.json

@@ -1,27 +1,38 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.2.4",
+    "version": "0.2.5",
     "license": "MIT",
     "scripts": {
         "test": "jest",
-        "build": "tsup src/index.ts --format esm --dts",
+        "build": "tsup src/index.ts --format esm --dts --tsconfig tsconfig.build.json",
         "tsc": "tsc --noEmit",
         "lint": "eslint \"src/**/*.ts*\"",
         "dev": "yarn build -- --watch",
         "storybook": "storybook dev -p 6006",
-        "build-storybook": "storybook build"
+        "build-storybook": "storybook build",
+        "reset": "rm -rf node_modules"
     },
     "dependencies": {
         "@graphql-typed-document-node/core": "3.2.0",
+        "axios": "^0.24.0",
+        "invariant": "^2.2.4",
         "moment": "2.29.4",
+        "moment-timezone": "^0.5.43",
+        "object-hash": "^2.1.1",
+        "react-select": "^5.8.0",
+        "scroll-into-view": "^1.16.2",
+        "uniforms": "^3.8.1",
+        "uniforms-bridge-json-schema": "^3.8.1",
+        "uniforms-unstyled": "^3.8.1",
         "use-query-params": "2.2.1"
     },
     "peerDependencies": {
-        "@elastic/eui": "77.2.2",
+        "@elastic/eui": "^88.1.0",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.1",
         "graphql-request": "5.2.0",
         "next": "^13.4.1",
+        "next-auth": "^4.23.1",
         "next-intl": "2.19.0",
         "next-query-params": "4.2.2",
         "react": "^18.2.0",
@@ -42,15 +53,20 @@
         "@testing-library/react": "^14.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^14.4.3",
-        "@types/jest": "^27.4.0",
+        "@types/invariant": "^2.2.33",
+        "@types/jest": "^29.5.8",
+        "@types/object-hash": "^2.1.0",
+        "@types/scroll-into-view": "^1.16.3",
         "esbuild": "^0.14.10",
         "esbuild-jest": "^0.5.0",
-        "jest": "^27.4.7",
-        "jest-watch-typeahead": "^1.0.0",
+        "jest": "^29.7.0",
+        "jest-watch-typeahead": "^2.2.2",
+        "jest-environment-jsdom": "^29.7.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "storybook": "^7.2.1",
-        "tsup": "^7.1.0"
+        "tsup": "^7.2.0",
+        "uniforms-bridge-simple-schema-2": "^3.8.1"
     },
     "type": "module",
     "main": "./dist/index.js",

package/src/api/axios.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2020-2021 SURF.
+ * Licensed 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 axios, { AxiosRequestConfig } from 'axios';
+
+// basic configuration for axios.
+// the 'Authorization' header is set in
+// index.ts:setUser
+export const getAxiosInstance = (apiPath: string) => {
+    const axiosRequestConfig: AxiosRequestConfig = {
+        baseURL: apiPath,
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+    };
+    return axios.create(axiosRequestConfig);
+};
+
+// export function setUser(_user: User | null) {
+//     // @ts-ignore
+//     axiosInstance.defaults.headers.common["Authorization"] = `${_user?.token_type} ${_user?.access_token}`;
+// }

package/src/api/index.ts

@@ -0,0 +1,170 @@
+/*
+ * Copyright 2019-2023 SURF.
+ * Licensed 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 { AxiosInstance } from 'axios';
+
+import {
+    IpBlock,
+    IpPrefix,
+} from '../components/WfoForms/formFields/surf/types';
+import { ProductDefinition } from '../types';
+import { getAxiosInstance } from './axios';
+
+const FORMS_ENDPOINT = 'surf/forms/';
+const PROCESS_ENDPOINT = 'processes/';
+const PRODUCTS_ENDPOINT = 'products/';
+
+export class BaseApiClient {
+    private _axiosInstance: AxiosInstance;
+
+    constructor(apiPath: string) {
+        this._axiosInstance = getAxiosInstance(apiPath);
+    }
+
+    axiosFetch = <R = object>(
+        path: string,
+        options = {},
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        headers = {},
+        showErrorDialog = true,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        result = true,
+    ): Promise<R> => {
+        // preset the config with the relative URL and a GET type.
+        // presets can be overridden with `options`.
+        return this._axiosInstance({ url: path, method: 'GET', ...options })
+            .then((res) => res.data)
+            .catch((err) => {
+                if (showErrorDialog) {
+                    console.debug(
+                        `Show error dialog for GET ${path} returning ${err?.response?.status}`,
+                    );
+                    setTimeout(() => {
+                        throw err;
+                    }, 250);
+                }
+                throw err;
+            });
+    };
+
+    catchErrorStatus = <T>(
+        promise: Promise<unknown>,
+        status: number,
+        callback: (json: T) => void,
+    ) => {
+        return promise.catch((err) => {
+            if (err.response && err.response.status === status) {
+                callback(err.response.data);
+            } else {
+                throw err;
+            }
+        });
+    };
+
+    fetchJson = <R = object>(
+        path: string,
+        options = {},
+        headers = {},
+        showErrorDialog = true,
+        result = true,
+    ): Promise<R> => {
+        return this.axiosFetch(path, options, headers, showErrorDialog, result);
+    };
+
+    fetchJsonWithCustomErrorHandling = <R = object>(
+        path: string,
+    ): Promise<R> => {
+        return this.fetchJson(path, {}, {}, false, true);
+    };
+
+    postPutJson = <R = object>(
+        path: string,
+        processInput: object,
+        method: string,
+        showErrorDialog = true,
+        result = true,
+    ): Promise<R> => {
+        return this.axiosFetch(
+            path,
+            { method: method, data: processInput },
+            {},
+            showErrorDialog,
+            result,
+        );
+    };
+}
+
+abstract class ApiClientInterface extends BaseApiClient {
+    abstract cimStartForm: (
+        formKey: string,
+        userInputs: object[],
+    ) => Promise<object>;
+}
+
+export class ApiClient extends ApiClientInterface {
+    startProcess = (
+        workflowName: string,
+        processInput: object,
+    ): Promise<unknown> => {
+        return this.postPutJson<unknown>(
+            `${PROCESS_ENDPOINT}${workflowName}`,
+            processInput,
+            'post',
+            false,
+            true,
+        );
+    };
+    products = (): Promise<ProductDefinition[]> => {
+        return this.fetchJson<ProductDefinition[]>(PRODUCTS_ENDPOINT);
+    };
+    productById = (productId: string): Promise<ProductDefinition> => {
+        return this.fetchJson(`${PRODUCTS_ENDPOINT}${productId}`);
+    };
+    cimStartForm = (
+        formKey: string,
+        userInputs: object[],
+    ): Promise<{ id: string }> => {
+        return this.postPutJson(
+            `${FORMS_ENDPOINT}${formKey}`,
+            userInputs,
+            'post',
+            false,
+            true,
+        );
+    };
+    prefix_filters = (): Promise<IpPrefix[]> => {
+        return this.fetchJson('surf/ipam/prefix_filters');
+    };
+    ip_blocks = (parentPrefix: number): Promise<IpBlock[]> => {
+        return this.fetchJson('surf/ipam/ip_blocks/' + parentPrefix);
+    };
+    free_subnets = (
+        subnet: string,
+        netmask: number,
+        prefixlen: number,
+    ): Promise<string[]> => {
+        return this.fetchJson(
+            'surf/ipam/free_subnets/' +
+                subnet +
+                '/' +
+                netmask +
+                '/' +
+                prefixlen,
+        );
+    };
+}
+
+export function getApiClient(apiEndPoint: string) {
+    return new ApiClient(apiEndPoint);
+}

package/src/components/WfoAuth/WfoAuth.tsx

@@ -0,0 +1,22 @@
+import React, { JSX, useContext } from 'react';
+
+import { useSession } from 'next-auth/react';
+
+import { OrchestratorConfigContext } from '../../contexts';
+import { WfoLoading } from '../WfoLoading';
+
+interface AuthProps {
+    children: JSX.Element;
+}
+
+export const WfoAuth = ({ children }: AuthProps): JSX.Element => {
+    const { authActive } = useContext(OrchestratorConfigContext);
+    const { status } = useSession({
+        required: authActive,
+    });
+
+    if (status === 'loading') {
+        return <WfoLoading />;
+    }
+    return children;
+};

package/src/components/WfoAuth/index.ts

@@ -0,0 +1 @@
+export * from './WfoAuth';

package/src/components/{WFOBadges/WFOBadge/WFOBadge.stories.tsx → WfoBadges/WfoBadge/WfoBadge.stories.tsx}

@@ -1,9 +1,10 @@
 import type { Meta } from '@storybook/react';
-import { WFOBadge } from './WFOBadge';
 
-const Story: Meta<typeof WFOBadge> = {
-    component: WFOBadge,
-    title: 'Badges/WFOBadge',
+import { WfoBadge } from './WfoBadge';
+
+const Story: Meta<typeof WfoBadge> = {
+    component: WfoBadge,
+    title: 'Badges/WfoBadge',
 };
 export default Story;
 

package/src/components/{WFOBadges/WFOBadge/WFOBadge.tsx → WfoBadges/WfoBadge/WfoBadge.tsx}

@@ -1,14 +1,15 @@
 import React from 'react';
-import { EuiBadge, EuiBadgeProps, EuiText } from '@elastic/eui';
 import { FC, ReactNode } from 'react';
+
+import { EuiBadge, EuiBadgeProps, EuiText } from '@elastic/eui';
 import { TextColor } from '@elastic/eui/src/components/text/text_color';
 
-export type WFOBadgeProps = EuiBadgeProps & {
+export type WfoBadgeProps = EuiBadgeProps & {
     textColor: TextColor | string;
     children: ReactNode;
 };
 
-export const WFOBadge: FC<WFOBadgeProps> = ({
+export const WfoBadge: FC<WfoBadgeProps> = ({
     textColor,
     children,
     ...restProps

package/src/components/WfoBadges/WfoBadge/index.ts

@@ -0,0 +1 @@
+export * from './WfoBadge';

package/src/components/{WFOBadges/WFOEngineStatusBadge/WFOEngineStatusBadge.stories.tsx → WfoBadges/WfoEngineStatusBadge/WfoEngineStatusBadge.stories.tsx}

@@ -1,14 +1,16 @@
 import React from 'react';
+
 import type { Meta } from '@storybook/react';
-import { WFOEngineStatusBadge } from './WFOEngineStatusBadge';
 
-const Story: Meta<typeof WFOEngineStatusBadge> = {
+import { WfoEngineStatusBadge } from './WfoEngineStatusBadge';
+
+const Story: Meta<typeof WfoEngineStatusBadge> = {
     component: (args) => (
         <div style={{ display: 'flex' }}>
-            <WFOEngineStatusBadge {...args} />
+            <WfoEngineStatusBadge {...args} />
         </div>
     ),
-    title: 'Badges/WFOEngineStatusBadge',
+    title: 'Badges/WfoEngineStatusBadge',
     parameters: {
         mockData: [
             {

package/src/components/{WFOBadges/WFOEngineStatusBadge/WFOEngineStatusBadge.tsx → WfoBadges/WfoEngineStatusBadge/WfoEngineStatusBadge.tsx}

@@ -1,10 +1,11 @@
 import React from 'react';
-import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { WFOHeaderBadge } from '../WFOHeaderBadge';
+
 import { useEngineStatusQuery } from '../../../hooks/useEngineStatusQuery';
-import { WFOStatusDotIcon } from '../../../icons/WFOStatusDotIcon';
+import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
+import { WfoStatusDotIcon } from '../../../icons/WfoStatusDotIcon';
+import { WfoHeaderBadge } from '../WfoHeaderBadge';
 
-export const WFOEngineStatusBadge = () => {
+export const WfoEngineStatusBadge = () => {
     const { theme } = useOrchestratorTheme();
     const { data: engineStatus } = useEngineStatusQuery();
 
@@ -12,13 +13,18 @@ export const WFOEngineStatusBadge = () => {
         ? `Engine is ${engineStatus.global_status}`
         : 'Engine status is unavailable';
 
+    const engineColor =
+        engineStatus?.global_status === 'RUNNING'
+            ? theme.colors.success
+            : theme.colors.warning;
+
     return (
-        <WFOHeaderBadge
+        <WfoHeaderBadge
             color={theme.colors.emptyShade}
             textColor={theme.colors.shadow}
-            iconType={() => <WFOStatusDotIcon color={theme.colors.success} />}
+            iconType={() => <WfoStatusDotIcon color={engineColor} />}
         >
             {engineStatusText}
-        </WFOHeaderBadge>
+        </WfoHeaderBadge>
     );
 };

package/src/components/WfoBadges/WfoEngineStatusBadge/index.ts

@@ -0,0 +1 @@
+export * from './WfoEngineStatusBadge';

package/src/components/{WFOBadges/WFOEnvironmentBadge/WFOEnvironmentBadge.stories.tsx → WfoBadges/WfoEnvironmentBadge/WfoEnvironmentBadge.stories.tsx}

@@ -1,14 +1,16 @@
 import React from 'react';
+
 import type { Meta } from '@storybook/react';
-import { WFOEnvironmentBadge } from './WFOEnvironmentBadge';
 
-const Story: Meta<typeof WFOEnvironmentBadge> = {
+import { WfoEnvironmentBadge } from './WfoEnvironmentBadge';
+
+const Story: Meta<typeof WfoEnvironmentBadge> = {
     component: (args) => (
         <div style={{ display: 'flex' }}>
-            <WFOEnvironmentBadge {...args} />
+            <WfoEnvironmentBadge {...args} />
         </div>
     ),
-    title: 'Badges/WFOEnvironmentBadge',
+    title: 'Badges/WfoEnvironmentBadge',
 };
 export default Story;
 

package/src/components/{WFOBadges/WFOEnvironmentBadge/WFOEnvironmentBadge.tsx → WfoBadges/WfoEnvironmentBadge/WfoEnvironmentBadge.tsx}

@@ -1,27 +1,28 @@
 import React, { useContext } from 'react';
-import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { WFOHeaderBadge } from '../WFOHeaderBadge/WFOHeaderBadge';
+
 import { OrchestratorConfigContext } from '../../../contexts/OrchestratorConfigContext';
 import { Environment } from '../../../hooks/useOrchestratorConfig';
+import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
+import { WfoHeaderBadge } from '../WfoHeaderBadge/WfoHeaderBadge';
 
-export const WFOEnvironmentBadge = () => {
+export const WfoEnvironmentBadge = () => {
     const { environmentName } = useContext(OrchestratorConfigContext);
     const { theme, toSecondaryColor } = useOrchestratorTheme();
 
     if (environmentName !== Environment.PRODUCTION) {
         return (
-            <WFOHeaderBadge color="warning" textColor={theme.colors.shadow}>
+            <WfoHeaderBadge color="warning" textColor={theme.colors.shadow}>
                 {environmentName}
-            </WFOHeaderBadge>
+            </WfoHeaderBadge>
         );
     }
 
     return (
-        <WFOHeaderBadge
+        <WfoHeaderBadge
             color={toSecondaryColor(theme.colors.primary)}
             textColor={theme.colors.primary}
         >
             {environmentName}
-        </WFOHeaderBadge>
+        </WfoHeaderBadge>
     );
 };

package/src/components/WfoBadges/WfoEnvironmentBadge/index.ts

@@ -0,0 +1 @@
+export * from './WfoEnvironmentBadge';

package/src/components/WfoBadges/WfoFailedTasksBadge/WfoFailedTasksBadge.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoFailedTasksBadge } from './WfoFailedTasksBadge';
+
+const Story: Meta<typeof WfoFailedTasksBadge> = {
+    component: WfoFailedTasksBadge,
+    title: 'Badges/WfoFailedTasksBadge',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/components/WfoBadges/WfoFailedTasksBadge/WfoFailedTasksBadge.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiToolTip } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
+import {
+    ProcessStatusCounts,
+    useProcessStatusCountsQuery,
+} from '../../../hooks/useProcessStatusCountsQuery';
+import { WfoCheckmarkCircleFill } from '../../../icons';
+import { WfoXCircleFill } from '../../../icons/WfoXCircleFill';
+import { WfoHeaderBadge } from '../WfoHeaderBadge';
+
+type TaskCountsSummary = {
+    failed: number;
+    inconsistentData: number;
+    apiUnavailable: number;
+    total: number;
+};
+
+const getTaskCountsSummary = (
+    processStatusCounts?: ProcessStatusCounts,
+): TaskCountsSummary => {
+    const failed = processStatusCounts?.task_counts.failed || 0;
+    const inconsistentData =
+        processStatusCounts?.task_counts.inconsistent_data || 0;
+    const apiUnavailable =
+        processStatusCounts?.task_counts.api_unavailable || 0;
+    return {
+        failed,
+        inconsistentData,
+        apiUnavailable,
+        total: failed + inconsistentData + apiUnavailable,
+    };
+};
+
+export const WfoFailedTasksBadge = () => {
+    const t = useTranslations('common');
+    const { theme } = useOrchestratorTheme();
+    const { data: processStatusCounts } = useProcessStatusCountsQuery();
+    const taskCountsSummary = getTaskCountsSummary(processStatusCounts);
+
+    if (taskCountsSummary.total != 0) {
+        return (
+            <EuiToolTip
+                position="bottom"
+                content={
+                    <>
+                        <div>Failed: {taskCountsSummary.failed}</div>
+                        <div>
+                            Inconsistent data:{' '}
+                            {taskCountsSummary.inconsistentData}
+                        </div>
+                        <div>
+                            API unavailable: {taskCountsSummary.apiUnavailable}
+                        </div>
+                    </>
+                }
+            >
+                <WfoHeaderBadge
+                    color={theme.colors.emptyShade}
+                    textColor={theme.colors.shadow}
+                    iconType={() => (
+                        <WfoXCircleFill color={theme.colors.danger} />
+                    )}
+                >
+                    {taskCountsSummary.total}
+                </WfoHeaderBadge>
+            </EuiToolTip>
+        );
+    } else {
+        return (
+            <EuiToolTip
+                position="bottom"
+                content={
+                    <>
+                        <div>{t('noFailedTasks')}</div>
+                    </>
+                }
+            >
+                <WfoHeaderBadge
+                    color={theme.colors.emptyShade}
+                    textColor={theme.colors.shadow}
+                    iconType={() => (
+                        <WfoCheckmarkCircleFill color={theme.colors.success} />
+                    )}
+                >
+                    {taskCountsSummary.total}
+                </WfoHeaderBadge>
+            </EuiToolTip>
+        );
+    }
+};

package/src/components/WfoBadges/WfoFailedTasksBadge/index.ts

@@ -0,0 +1 @@
+export * from './WfoFailedTasksBadge';

package/src/components/{WFOBadges/WFOHeaderBadge/WFOHeaderBadge.stories.tsx → WfoBadges/WfoHeaderBadge/WfoHeaderBadge.stories.tsx}

@@ -1,14 +1,16 @@
 import React from 'react';
+
 import type { Meta } from '@storybook/react';
-import { WFOHeaderBadge } from './WFOHeaderBadge';
 
-const Story: Meta<typeof WFOHeaderBadge> = {
+import { WfoHeaderBadge } from './WfoHeaderBadge';
+
+const Story: Meta<typeof WfoHeaderBadge> = {
     component: (args) => (
         <div style={{ display: 'flex' }}>
-            <WFOHeaderBadge {...args} />
+            <WfoHeaderBadge {...args} />
         </div>
     ),
-    title: 'Badges/WFOHeaderBadge',
+    title: 'Badges/WfoHeaderBadge',
 };
 export default Story;
 

package/src/components/{WFOBadges/WFOHeaderBadge/WFOHeaderBadge.tsx → WfoBadges/WfoHeaderBadge/WfoHeaderBadge.tsx}

@@ -1,14 +1,16 @@
 import React, { FC, ReactNode } from 'react';
+
 import { EuiBadgeProps } from '@elastic/eui';
-import { WFOBadge } from '../WFOBadge/WFOBadge';
 import { TextColor } from '@elastic/eui/src/components/text/text_color';
 
+import { WfoBadge } from '../WfoBadge/WfoBadge';
+
 export type HeaderBadgeProps = EuiBadgeProps & {
     textColor: TextColor | string;
     children: ReactNode;
 };
 
-export const WFOHeaderBadge: FC<HeaderBadgeProps> = ({
+export const WfoHeaderBadge: FC<HeaderBadgeProps> = ({
     children,
     ...restProps
 }) => {
@@ -24,8 +26,8 @@ export const WFOHeaderBadge: FC<HeaderBadgeProps> = ({
           };
 
     return (
-        <WFOBadge {...restProps} css={css}>
+        <WfoBadge {...restProps} css={css}>
             {children}
-        </WFOBadge>
+        </WfoBadge>
     );
 };

package/src/components/WfoBadges/WfoHeaderBadge/index.ts

@@ -0,0 +1 @@
+export * from './WfoHeaderBadge';

package/src/components/{WFOBadges/WFOProcessStatusBadge/WFOProcessStatusBadge.tsx → WfoBadges/WfoProcessStatusBadge/WfoProcessStatusBadge.tsx}

@@ -1,12 +1,14 @@
 import React, { FC } from 'react';
-import { ProcessStatus, useOrchestratorTheme } from '../../../hooks';
-import { WFOBadge } from '../WFOBadge';
 
-export type WFOProcessStatusBadgeProps = {
+import { useOrchestratorTheme } from '../../../hooks';
+import { ProcessStatus } from '../../../types';
+import { WfoBadge } from '../WfoBadge';
+
+export type WfoProcessStatusBadgeProps = {
     processStatus: ProcessStatus;
 };
 
-export const WFOProcessStatusBadge: FC<WFOProcessStatusBadgeProps> = ({
+export const WfoProcessStatusBadge: FC<WfoProcessStatusBadgeProps> = ({
     processStatus,
 }) => {
     const { theme, toSecondaryColor } = useOrchestratorTheme();
@@ -64,8 +66,8 @@ export const WFOProcessStatusBadge: FC<WFOProcessStatusBadgeProps> = ({
         getBadgeColorFromProcessStatus(processStatus);
 
     return (
-        <WFOBadge textColor={textColor} color={badgeColor}>
+        <WfoBadge textColor={textColor} color={badgeColor}>
             {processStatus.toLowerCase()}
-        </WFOBadge>
+        </WfoBadge>
     );
 };