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

package/src/components/WfoForms/formFields/utils.spec.ts

@@ -0,0 +1,196 @@
+import type { ProductBlockInstance, SubscriptionDetail } from '../../../types';
+import {
+    ProcessStatus,
+    ProductLifecycleStatus,
+    SubscriptionStatus,
+    WorkflowTarget,
+} from '../../../types';
+import { ProductTag } from './surf/types';
+import {
+    subscriptionHasTaggedPortModeInstanceValue,
+    subscriptionHasTaggedProduct,
+} from './utils';
+
+const testProductBlockInstances: ProductBlockInstance[] = [
+    {
+        id: 1,
+        ownerSubscriptionId: 'ProductBlockInstanceId 1',
+        parent: 0,
+        productBlockInstanceValues: [],
+        subscriptionInstanceId: 'testId',
+        inUseByRelations: [],
+    },
+];
+
+const testSubscriptionDetail: SubscriptionDetail = {
+    subscriptionId: 'testId',
+    description: 'test description',
+    insync: false,
+    note: 'test note',
+    fixedInputs: [],
+    product: {
+        productId: 'testId',
+        createdAt: '999-09-09',
+        name: 'Test product name',
+        status: ProductLifecycleStatus.ACTIVE,
+        description: 'Test product description',
+        tag: '',
+        productType: 'testType',
+        endDate: '2222-02-02',
+    },
+    endDate: '2222-02-02',
+    startDate: '1111-01-01',
+    status: SubscriptionStatus.ACTIVE,
+    productBlockInstances: testProductBlockInstances,
+    processes: {
+        page: [
+            {
+                processId: 'Test process id',
+                lastStatus: ProcessStatus.ABORTED,
+                startedAt: '1111-01-01',
+                createdBy: 'Test',
+                workflowTarget: WorkflowTarget.CREATE,
+                workflowName: 'Test workflow name',
+            },
+        ],
+    },
+};
+
+describe('formField utils', () => {
+    describe('subscriptionHasPortModeInstanceValue()', () => {
+        it('returns false if the subscriptionDetail has no productBlockInstances', () => {
+            const result = subscriptionHasTaggedPortModeInstanceValue(
+                testSubscriptionDetail,
+            );
+            expect(result).toEqual(false);
+        });
+        it('returns false if the subscriptionDetail has no productBlockInstances with no productBlockInstanceValues', () => {
+            const subscriptionDetail: SubscriptionDetail = {
+                ...testSubscriptionDetail,
+                productBlockInstances: [
+                    {
+                        id: 1,
+                        ownerSubscriptionId: 'ProductBlockInstanceId 1',
+                        parent: 0,
+                        productBlockInstanceValues: [],
+                        subscriptionInstanceId: 'testId',
+                        inUseByRelations: [],
+                    },
+                ],
+            };
+            const result =
+                subscriptionHasTaggedPortModeInstanceValue(subscriptionDetail);
+            expect(result).toEqual(false);
+        });
+
+        it('returns false if the subscriptionDetail has no productBlockInstances with productBlockInstanceValues but not with portMode', () => {
+            const subscriptionDetail: SubscriptionDetail = {
+                ...testSubscriptionDetail,
+                productBlockInstances: [
+                    {
+                        id: 1,
+                        ownerSubscriptionId: 'ProductBlockInstanceId 1',
+                        parent: 0,
+                        subscriptionInstanceId: 'testId',
+                        inUseByRelations: [],
+                        productBlockInstanceValues: [
+                            {
+                                field: 'key1',
+                                value: 'value1',
+                            },
+                            {
+                                field: 'key2',
+                                value: 'value2',
+                            },
+                        ],
+                    },
+                ],
+            };
+            const result =
+                subscriptionHasTaggedPortModeInstanceValue(subscriptionDetail);
+            expect(result).toEqual(false);
+        });
+        it('returns false if the subscriptionDetail has no productBlockInstances with productBlockInstanceValues with portMode and value not tagged', () => {
+            const subscriptionDetail: SubscriptionDetail = {
+                ...testSubscriptionDetail,
+                productBlockInstances: [
+                    {
+                        id: 1,
+                        ownerSubscriptionId: 'ProductBlockInstanceId 1',
+                        parent: 0,
+                        subscriptionInstanceId: 'testId',
+                        inUseByRelations: [],
+                        productBlockInstanceValues: [
+                            {
+                                field: 'key1',
+                                value: 'value1',
+                            },
+                            {
+                                field: 'portMode',
+                                value: 'NOTTAGGED',
+                            },
+                        ],
+                    },
+                ],
+            };
+            const result =
+                subscriptionHasTaggedPortModeInstanceValue(subscriptionDetail);
+            expect(result).toEqual(false);
+        });
+        it('returns true if the subscriptionDetail has productBlockInstances with productBlockInstanceValues with field portMode and value = tagged', () => {
+            const subscriptionDetail: SubscriptionDetail = {
+                ...testSubscriptionDetail,
+                productBlockInstances: [
+                    {
+                        id: 1,
+                        ownerSubscriptionId: 'ProductBlockInstanceId 1',
+                        parent: 0,
+                        subscriptionInstanceId: 'testId',
+                        inUseByRelations: [],
+                        productBlockInstanceValues: [
+                            {
+                                field: 'key1',
+                                value: 'value1',
+                            },
+                            {
+                                field: 'portMode',
+                                value: 'tagged',
+                            },
+                        ],
+                    },
+                ],
+            };
+            const result =
+                subscriptionHasTaggedPortModeInstanceValue(subscriptionDetail);
+            expect(result).toEqual(true);
+        });
+    });
+    describe('subscriptionHasTaggedProduct()', () => {
+        it('returns false if the subscriptionDetail.product.tag is undefined', () => {
+            const result = subscriptionHasTaggedProduct(testSubscriptionDetail);
+            expect(result).toEqual(false);
+        });
+        it('returns false if the subscriptionDetail.product.tag is not a tagged product', () => {
+            const subscriptionDetailTest: SubscriptionDetail = {
+                ...testSubscriptionDetail,
+                product: {
+                    ...testSubscriptionDetail.product,
+                    tag: 'RANDOMTAG',
+                },
+            };
+            const result = subscriptionHasTaggedProduct(subscriptionDetailTest);
+            expect(result).toEqual(false);
+        });
+        it('returns true if the subscriptionDetail.product.tag is a tagged product', () => {
+            const subscriptionDetailTest: SubscriptionDetail = {
+                ...testSubscriptionDetail,
+                product: {
+                    ...testSubscriptionDetail.product,
+                    tag: ProductTag.MSC,
+                },
+            };
+            const result = subscriptionHasTaggedProduct(subscriptionDetailTest);
+            expect(result).toEqual(true);
+        });
+    });
+});

package/src/components/WfoForms/formFields/utils.ts

@@ -0,0 +1,65 @@
+import { isDate } from 'moment';
+
+import { ProductBlockInstance, SubscriptionDetail } from '../../../types';
+import { PortMode, ProductTag } from './surf/types';
+
+// NOTE: There might potentially (?) be more productBlockInstances with portMod but we get the last one here
+export const getPortMode = (
+    productBlockInstances: ProductBlockInstance[],
+): PortMode | undefined => {
+    const portMode = productBlockInstances?.reduce(
+        (portMode: PortMode | undefined, productBlockInstance) => {
+            const portModeField =
+                productBlockInstance.productBlockInstanceValues.find(
+                    (productBlockInstanceValue) =>
+                        productBlockInstanceValue.field === 'portMode',
+                );
+            if (portModeField) {
+                return portModeField.value as PortMode;
+            }
+            return portMode;
+        },
+        undefined,
+    );
+
+    return portMode;
+};
+
+export const isEmpty = (obj: unknown) => {
+    if (obj === undefined || obj === null) {
+        return true;
+    }
+    if (isDate(obj)) {
+        return false;
+    }
+    if (Array.isArray(obj)) {
+        return obj.length === 0;
+    }
+    if (typeof obj === 'string') {
+        return obj.trim().length === 0;
+    }
+    if (typeof obj === 'object') {
+        return Object.keys(obj).length === 0;
+    }
+    return false;
+};
+
+export const subscriptionHasTaggedPortModeInstanceValue = (
+    subscriptionDetail: SubscriptionDetail,
+): boolean => {
+    const portMode = getPortMode(subscriptionDetail.productBlockInstances);
+    return portMode && portMode === PortMode.TAGGED ? true : false;
+};
+
+export const subscriptionHasTaggedProduct = (
+    subscriptionDetail: SubscriptionDetail,
+): boolean => {
+    const productsWithTaggedPorts: string[] = [
+        ProductTag.MSC,
+        ProductTag.MSCNL,
+        ProductTag.IRBSP,
+    ];
+    return productsWithTaggedPorts.includes(subscriptionDetail.product.tag)
+        ? true
+        : false;
+};

package/src/components/WfoForms/index.ts

@@ -0,0 +1,5 @@
+export * from './CreateForm';
+export * from './AutoFields';
+export * from './UserInputForm';
+export * from './UserInputFormWizard';
+export * from './formFields';

package/src/components/WfoForms/useAxiosApiClient.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+
+import { ApiClientContext } from '../../contexts';
+
+export const useAxiosApiClient = () => {
+    const { apiClient } = useContext(ApiClientContext);
+    return apiClient;
+};

package/src/components/WfoInsyncIcon/WfoInsyncIcon.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoInsyncIcon } from './WfoInsyncIcon';
+
+const Story: Meta<typeof WfoInsyncIcon> = {
+    component: WfoInsyncIcon,
+    title: 'WfoInsyncIcon',
+};
+export default Story;
+
+export const Default = {
+    args: {
+        inSync: true,
+    },
+};
+
+export const DefaultOutofSync = {
+    args: {
+        inSync: false,
+    },
+};

package/src/components/WfoInsyncIcon/WfoInsyncIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { useOrchestratorTheme } from '../../hooks';
+import { WfoCheckmarkCircleFill, WfoMinusCircleOutline } from '../../icons';
+
+interface WfoInsyncIconProps {
+    inSync: boolean;
+}
+
+export const WfoInsyncIcon = ({ inSync }: WfoInsyncIconProps) => {
+    const { theme } = useOrchestratorTheme();
+
+    return inSync ? (
+        <WfoCheckmarkCircleFill
+            height={20}
+            width={20}
+            color={theme.colors.primary}
+        />
+    ) : (
+        <WfoMinusCircleOutline
+            height={20}
+            width={20}
+            color={theme.colors.mediumShade}
+        />
+    );
+};

package/src/components/WfoInsyncIcon/index.ts

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

package/src/components/WfoJsonCodeBlock/WfoJsonCodeBlock.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { EuiCodeBlock } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '../../hooks';
+import { getStyles } from './styles';
+
+export type WfoJsonCodeBlockProps = {
+    data: object;
+};
+
+export const WfoJsonCodeBlock: FC<WfoJsonCodeBlockProps> = ({ data }) => {
+    const { euiCodeBlockStyle } = useWithOrchestratorTheme(getStyles);
+
+    const json = JSON.stringify(data, null, 4);
+
+    return (
+        <EuiCodeBlock
+            css={euiCodeBlockStyle}
+            isCopyable={true}
+            language="json"
+            lineNumbers={true}
+        >
+            {json}
+        </EuiCodeBlock>
+    );
+};

package/src/components/WfoJsonCodeBlock/styles.ts

@@ -0,0 +1,13 @@
+import { EuiThemeComputed } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const euiCodeBlockStyle = css({
+        marginTop: 10,
+        borderRadius: theme.border.radius.medium,
+    });
+
+    return {
+        euiCodeBlockStyle,
+    };
+};

package/src/components/WfoKeyValueTable/WfoKeyCell.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+
+import { EuiText } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '../../hooks';
+import { getStyles } from './styles';
+
+export type WfoKeyCellProps = {
+    value: string;
+    rowNumber: number;
+};
+
+export const WfoKeyCell: FC<WfoKeyCellProps> = ({ value, rowNumber }) => {
+    const { theme } = useOrchestratorTheme();
+    const { keyColumnStyle, keyCellStyle, getBackgroundColorStyleForRow } =
+        getStyles(theme);
+
+    return (
+        <div css={[getBackgroundColorStyleForRow(rowNumber), keyColumnStyle]}>
+            <EuiText css={keyCellStyle} size="s">
+                {value}
+            </EuiText>
+        </div>
+    );
+};

package/src/components/WfoKeyValueTable/WfoKeyValueTable.tsx

@@ -0,0 +1,41 @@
+import React, { FC, Fragment, ReactNode } from 'react';
+
+import { useOrchestratorTheme } from '../../hooks';
+import { WfoKeyCell } from './WfoKeyCell';
+import { WfoValueCell } from './WfoValueCell';
+import { getStyles } from './styles';
+
+export type WfoKeyValueTableDataType = {
+    key: string;
+    value: ReactNode;
+    textToCopy?: string;
+};
+
+export type WfoKeyValueTableProps = {
+    keyValues: WfoKeyValueTableDataType[];
+    showCopyToClipboardIcon?: boolean;
+};
+
+export const WfoKeyValueTable: FC<WfoKeyValueTableProps> = ({
+    keyValues,
+    showCopyToClipboardIcon = false,
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const { keyValueTable } = getStyles(theme);
+
+    return (
+        <div css={keyValueTable}>
+            {keyValues.map(({ key, value, textToCopy }, rowNumber) => (
+                <Fragment key={key}>
+                    <WfoKeyCell value={key} rowNumber={rowNumber} />
+                    <WfoValueCell
+                        value={value}
+                        textToCopy={textToCopy}
+                        rowNumber={rowNumber}
+                        enableCopyIcon={showCopyToClipboardIcon}
+                    />
+                </Fragment>
+            ))}
+        </div>
+    );
+};

package/src/components/WfoKeyValueTable/WfoValueCell.tsx

@@ -0,0 +1,53 @@
+import React, { FC, ReactNode } from 'react';
+
+import { EuiCopy } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '../../hooks';
+import { WfoClipboardCopy } from '../../icons/WfoClipboardCopy';
+import { getStyles } from './styles';
+
+export type WfoValueCellProps = {
+    value: ReactNode;
+    textToCopy?: string;
+    rowNumber: number;
+    enableCopyIcon: boolean;
+};
+
+export const WfoValueCell: FC<WfoValueCellProps> = ({
+    value,
+    textToCopy,
+    rowNumber,
+    enableCopyIcon,
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const {
+        valueColumnStyle,
+        valueCellStyle,
+        clipboardIconStyle,
+        clickable,
+        getBackgroundColorStyleForRow,
+    } = getStyles(theme);
+
+    const shouldRenderCopyColumn = enableCopyIcon && textToCopy;
+
+    return (
+        <div css={[getBackgroundColorStyleForRow(rowNumber), valueColumnStyle]}>
+            <div css={valueCellStyle}>{value}</div>
+            <div css={clipboardIconStyle}>
+                {shouldRenderCopyColumn && (
+                    <EuiCopy textToCopy={textToCopy}>
+                        {(copy) => (
+                            <div onClick={copy} css={clickable}>
+                                <WfoClipboardCopy
+                                    width={16}
+                                    height={16}
+                                    color={theme.colors.mediumShade}
+                                />
+                            </div>
+                        )}
+                    </EuiCopy>
+                )}
+            </div>
+        </div>
+    );
+};

package/src/components/WfoKeyValueTable/index.ts

@@ -0,0 +1,3 @@
+export * from './WfoKeyCell';
+export * from './WfoValueCell';
+export * from './WfoKeyValueTable';

package/src/components/WfoKeyValueTable/styles.ts

@@ -0,0 +1,77 @@
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const padding = theme.font.baseline * 2.5;
+    const clipboardIconMargin = theme.font.baseline * 2;
+    const keyColumnWidth = theme.base * 12;
+    const radius = theme.border.radius.medium;
+
+    const keyValueTable = css({
+        display: 'grid',
+        gridTemplateColumns: `${keyColumnWidth}px 1fr`,
+    });
+
+    const lightBackground = css({
+        backgroundColor: theme.colors.emptyShade,
+    });
+
+    const darkBackground = css({
+        backgroundColor: theme.colors.lightestShade,
+    });
+
+    const getBackgroundColorStyleForRow = (rowNumber: number) =>
+        rowNumber % 2 ? lightBackground : darkBackground;
+
+    const keyColumnStyle = css({
+        padding: padding,
+        borderTopLeftRadius: radius,
+        borderBottomLeftRadius: radius,
+    });
+
+    const valueColumnStyle = css({
+        padding: padding,
+        borderTopRightRadius: radius,
+        borderBottomRightRadius: radius,
+        display: 'flex',
+
+        '&:hover > div': {
+            visibility: 'visible',
+        },
+    });
+
+    const keyCellStyle = css({
+        fontWeight: theme.font.weight.medium,
+        color: theme.colors.title,
+    });
+
+    const valueCellStyle = css({
+        fontWeight: theme.font.weight.regular,
+        color: theme.colors.text,
+        display: 'flex',
+        alignItems: 'center',
+    });
+
+    const clipboardIconStyle = css({
+        visibility: 'hidden',
+        paddingBottom: 0,
+    });
+
+    const clickable = css({
+        marginLeft: clipboardIconMargin,
+        cursor: 'pointer',
+    });
+
+    return {
+        keyValueTable,
+        keyColumnStyle,
+        valueColumnStyle,
+        keyCellStyle,
+        valueCellStyle,
+        clipboardIconStyle,
+        clickable,
+        lightBackground,
+        darkBackground,
+        getBackgroundColorStyleForRow,
+    };
+};

package/src/components/WfoLoading/WfoLoading.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const WfoLoading = () => <h1>Loading...</h1>;

package/src/components/WfoLoading/index.ts

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

package/src/components/WfoNoResults/WfoNoResults.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+
+import { WfoSearchStrikethrough } from './../../icons';
+import { WfoNoResults } from './WfoNoResults';
+
+const Story: Meta<typeof WfoNoResults> = {
+    component: WfoNoResults,
+    title: 'WfoNoResult',
+};
+export default Story;
+
+export const Default = {
+    args: {
+        icon: <WfoSearchStrikethrough />,
+        text: 'No results text',
+    },
+};

package/src/components/WfoNoResults/WfoNoResults.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+
+import { EuiFlexGroup } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '../../hooks';
+import { getStyles } from './styles';
+
+interface WfoNoResultsProps {
+    text: string;
+    icon: ReactNode;
+}
+
+export const WfoNoResults = ({ text, icon }: WfoNoResultsProps) => {
+    const { theme } = useOrchestratorTheme();
+    const { panelStyle } = getStyles(theme);
+
+    return (
+        <EuiFlexGroup css={panelStyle}>
+            {icon} {text}
+        </EuiFlexGroup>
+    );
+};

package/src/components/WfoNoResults/index.ts

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

package/src/components/WfoNoResults/styles.ts

@@ -0,0 +1,22 @@
+import type { EuiThemeComputed } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const panelStyle = css({
+        display: 'flex',
+        padding: theme.base * 2,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.base / 2,
+        backgroundColor: theme.colors.body,
+        borderRadius: theme.border.radius.medium,
+        color: theme.colors.link,
+        fontFamily: theme.font.family,
+        marginTop: theme.base * 2,
+    });
+
+    return {
+        panelStyle,
+    };
+};

package/src/components/WfoPageHeader/WfoPageHeader.tsx

@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiPageHeader } from '@elastic/eui';
+
+export type WfoPageHeaderProps = {
+    pageTitle: string;
+    children?: ReactNode;
+};
+
+export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
+    pageTitle,
+    children,
+}) => (
+    <EuiFlexGroup>
+        <EuiFlexItem>
+            <EuiPageHeader pageTitle={pageTitle}></EuiPageHeader>
+        </EuiFlexItem>
+
+        {children && (
+            <EuiFlexItem>
+                <EuiFlexGroup justifyContent="flexEnd">{children}</EuiFlexGroup>
+            </EuiFlexItem>
+        )}
+    </EuiFlexGroup>
+);