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

package/src/components/WFOPageTemplate/WFOSidebar/WFOSidebar.tsx

@@ -1,159 +0,0 @@
-import React, { FC } from 'react';
-import { EuiButton, EuiSideNav, EuiSpacer } from '@elastic/eui';
-import { useRouter } from 'next/router';
-
-const PATH_START = '/';
-const PATH_NEW_PROCESS = '/new-process';
-const PATH_PROCESSES = '/processes';
-const PATH_SUBSCRIPTIONS = '/subscriptions';
-const PATH_METADATA_PRODUCTS = '/metadata/products';
-const PATH_METADATA_PRODUCT_BLOCKS = '/metadata/productblocks';
-const PATH_METADATA_RESOURCE_TYPES = '/metadata/resource-types';
-const PATH_METADATA_WORKFLOWS = '/metadata/workflows';
-const PATH_TASKS = '/tasks';
-const PATH_SETTINGS = '/settings';
-
-export const WFOSidebar: FC = () => {
-    const router = useRouter();
-
-    return (
-        <EuiSideNav
-            mobileTitle="Nav Items"
-            isOpenOnMobile={false}
-            items={[
-                {
-                    renderItem: () => (
-                        <>
-                            <EuiButton
-                                onClick={(
-                                    e: React.MouseEvent<
-                                        HTMLButtonElement | HTMLElement,
-                                        MouseEvent
-                                    >,
-                                ) => {
-                                    e.preventDefault();
-                                    router.push(PATH_NEW_PROCESS);
-                                }}
-                                iconType="plus"
-                                fullWidth
-                            >
-                                New Process
-                            </EuiButton>
-                            <EuiSpacer size="m" />
-                        </>
-                    ),
-                    name: 'Menu',
-                    id: '1',
-                    items: [
-                        {
-                            name: 'Start',
-                            id: '2',
-                            isSelected: router.pathname === PATH_START,
-                            onClick: (e) => {
-                                e.preventDefault();
-                                router.push(PATH_START);
-                            },
-                        },
-                        {
-                            name: 'Processes',
-                            id: '3',
-                            isSelected: router.pathname === PATH_PROCESSES,
-                            href: PATH_PROCESSES,
-                            onClick: (e) => {
-                                e.preventDefault();
-                                router.push(PATH_PROCESSES);
-                            },
-                        },
-                        {
-                            name: 'Subscriptions',
-                            id: '4',
-                            isSelected: router.pathname === PATH_SUBSCRIPTIONS,
-                            href: PATH_SUBSCRIPTIONS,
-                            onClick: (e) => {
-                                e.preventDefault();
-                                router.push(PATH_SUBSCRIPTIONS);
-                            },
-                        },
-                        {
-                            name: 'Metadata',
-                            id: '5',
-                            onClick: () => {
-                                router.push(PATH_METADATA_PRODUCTS);
-                            },
-                            items: [
-                                {
-                                    name: 'Products',
-                                    id: '5.1',
-                                    isSelected:
-                                        router.pathname ===
-                                        PATH_METADATA_PRODUCTS,
-                                    onClick: (e) => {
-                                        e.preventDefault();
-                                        router.push(PATH_METADATA_PRODUCTS);
-                                    },
-                                },
-                                {
-                                    name: 'Productblocks',
-                                    id: '5.2',
-                                    isSelected:
-                                        router.pathname ===
-                                        PATH_METADATA_PRODUCT_BLOCKS,
-                                    onClick: (e) => {
-                                        e.preventDefault();
-                                        router.push(
-                                            PATH_METADATA_PRODUCT_BLOCKS,
-                                        );
-                                    },
-                                },
-                                {
-                                    name: 'Resource types',
-                                    id: '5.3',
-                                    isSelected:
-                                        router.pathname ===
-                                        PATH_METADATA_RESOURCE_TYPES,
-                                    onClick: (e) => {
-                                        e.preventDefault();
-                                        router.push(
-                                            PATH_METADATA_RESOURCE_TYPES,
-                                        );
-                                    },
-                                },
-                                {
-                                    name: 'Workflows',
-                                    id: '5.4',
-                                    isSelected:
-                                        router.pathname ===
-                                        PATH_METADATA_WORKFLOWS,
-                                    onClick: (e) => {
-                                        e.preventDefault();
-                                        router.push(PATH_METADATA_WORKFLOWS);
-                                    },
-                                },
-                            ],
-                        },
-                        {
-                            name: 'Tasks',
-                            isSelected: router.pathname === PATH_TASKS,
-                            id: '6',
-                            onClick: (e) => {
-                                e.preventDefault();
-                                router.push(PATH_TASKS);
-                            },
-                            href: PATH_TASKS,
-                        },
-                        {
-                            name: 'Settings',
-                            isSelected: router.pathname === PATH_SETTINGS,
-                            id: '7',
-                            onClick: (e) => {
-                                e.preventDefault();
-                                router.push(PATH_SETTINGS);
-                            },
-                            href: PATH_SETTINGS,
-                        },
-                    ],
-                },
-            ]}
-        />
-    );
-};

package/src/components/WFOPageTemplate/WFOSidebar/index.ts

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

package/src/components/WFOPageTemplate/index.ts

@@ -1,3 +0,0 @@
-export * from './WFOPageHeader';
-export * from './WFOPageTemplate';
-export * from './WFOSidebar';

package/src/components/WFOSearchBar/index.ts

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

package/src/components/WFOSettingsModal/index.tsx

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

package/src/components/WFOSettingsPage/index.ts

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

package/src/components/WFOStartPage/WFONewProcessPanel.stories.tsx

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

package/src/components/WFOStartPage/WFOStatCards.stories.tsx

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

package/src/components/WFOStartPage/index.ts

@@ -1,6 +0,0 @@
-export * from './WFOFrequentlyUsed';
-export * from './WFOListItemStartPage';
-export * from './WFOListStartPage';
-export * from './WFOMultiListSection';
-export * from './WFONewProcessPanel';
-export * from './WFOStatCards';

package/src/components/WFOSubscription/WFOFixedInputBlock.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
-import { RenderField } from './WFOSubscriptionBlock';
-import {
-    subscriptionDefinitionCellStyle,
-    subscriptionValueCellStyle,
-} from './styles';
-
-export const WFOFixedInputBlock = (title: string, data: object) => {
-    const keys = [];
-    for (const key in data) {
-        keys.push(key);
-    }
-    if (keys.length === 0) return;
-
-    return (
-        <>
-            <EuiSpacer size={'m'}></EuiSpacer>
-            <div>
-                <div style={{ marginTop: 5 }}>
-                    <EuiFlexGroup justifyContent="spaceBetween">
-                        <EuiFlexItem>
-                            <EuiText grow={false}>
-                                <h3>{title}</h3>
-                            </EuiText>
-                        </EuiFlexItem>
-                    </EuiFlexGroup>
-
-                    <EuiSpacer size={'s'}></EuiSpacer>
-                    <table width="100%">
-                        <tbody>
-                            {keys.map((k, i) => (
-                                <tr
-                                    key={i}
-                                    style={{
-                                        backgroundColor:
-                                            i % 2 ? '#FFF' : '#F1F5F9',
-                                    }}
-                                >
-                                    <td
-                                        valign={'top'}
-                                        css={subscriptionDefinitionCellStyle}
-                                    >
-                                        <b>{k}</b>
-                                    </td>
-                                    <td css={subscriptionValueCellStyle}>
-                                        {RenderField(k, data)}
-                                    </td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </>
-    );
-};

package/src/components/WFOSubscription/WFOProcessesTimeline.tsx

@@ -1,105 +0,0 @@
-import React, { FC } from 'react';
-import {
-    EuiAvatar,
-    EuiComment,
-    EuiCommentList,
-    EuiSpacer,
-    EuiLoadingContent,
-} from '@elastic/eui';
-
-import { WFOProcessStatusBadge } from '../WFOBadges';
-import { SubscriptionProcess, useSubscriptionProcesses } from '../../hooks';
-
-/** TODO: Adding a useTranslations hook here leads to an hooks error. https://github.com/workfloworchestrator/orchestrator-ui/issues/177 */
-const WFOCard = (processInfo: SubscriptionProcess) => (
-    <div style={{ marginTop: 5 }}>
-        <table width="100%" bgcolor={'#F1F5F9'}>
-            <tr>
-                <td
-                    valign={'top'}
-                    style={{
-                        width: 250,
-                        padding: 10,
-                        borderBottom: 'solid 1px #ddd',
-                    }}
-                >
-                    <b>ID</b>
-                </td>
-                <td style={{ padding: 10, borderBottom: 'solid 1px #ddd' }}>
-                    <a
-                        href={`https://orchestrator.dev.automation.surf.net/processes/${processInfo.process.pid}`}
-                    >
-                        {processInfo.pid}
-                    </a>
-                </td>
-            </tr>
-            <tr>
-                <td
-                    valign={'top'}
-                    style={{ padding: 10, borderBottom: 'solid 1px #ddd' }}
-                >
-                    <b>Status</b>
-                </td>
-                <td style={{ padding: 10, borderBottom: 'solid 1px #ddd' }}>
-                    <WFOProcessStatusBadge
-                        processStatus={processInfo.process.last_status}
-                    />
-                </td>
-            </tr>
-            <tr>
-                <td
-                    valign={'top'}
-                    style={{ padding: 10, borderBottom: 'solid 1px #ddd' }}
-                >
-                    <b>Started at</b>
-                </td>
-                <td style={{ padding: 10, borderBottom: 'solid 1px #ddd' }}>
-                    2-11-2021 13:47:43 - Duration: 00:00:024
-                </td>
-            </tr>
-            <tr>
-                <td valign={'top'} style={{ padding: 10 }}>
-                    <b>Started by</b>
-                </td>
-                <td style={{ padding: 10 }}>
-                    {processInfo.process.created_by}
-                </td>
-            </tr>
-        </table>
-    </div>
-);
-
-const RenderProcess = (processInfo: SubscriptionProcess) => (
-    <EuiComment
-        username={processInfo.workflow_target ?? ''}
-        timelineAvatarAriaLabel={processInfo.process.workflow}
-        timelineAvatar={<EuiAvatar name="C" />}
-    >
-        {WFOCard(processInfo)}
-    </EuiComment>
-);
-
-export type ProcessesTimelineProps = {
-    subscriptionId: string;
-};
-
-export const ProcessesTimeline: FC<ProcessesTimelineProps> = ({
-    subscriptionId,
-}) => {
-    const { data: subscriptionProcesses } =
-        useSubscriptionProcesses(subscriptionId);
-
-    return (
-        <>
-            <EuiSpacer size={'m'} />
-            {!subscriptionProcesses && <EuiLoadingContent />}
-            <EuiCommentList aria-label="Processes">
-                {subscriptionProcesses && (
-                    <EuiCommentList aria-label="Processes">
-                        {subscriptionProcesses.map((i) => RenderProcess(i))}
-                    </EuiCommentList>
-                )}
-            </EuiCommentList>
-        </>
-    );
-};

package/src/components/WFOSubscription/WFOProductBlock.tsx

@@ -1,186 +0,0 @@
-import React from 'react';
-import { EuiAccordion, EuiCodeBlock } from '@elastic/eui';
-
-import {
-    EuiButtonIcon,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiPanel,
-    EuiSpacer,
-    EuiText,
-} from '@elastic/eui';
-import {
-    TreeContext,
-    TreeContextType,
-    SubscriptionContext,
-} from '../../contexts';
-import { ResourceTypeBase } from '../../types';
-
-export const WFOProductBlock = (
-    resourceTypes: ResourceTypeBase,
-    id: number,
-) => {
-    const { toggleSelectedId } = React.useContext(
-        TreeContext,
-    ) as TreeContextType;
-    const { subscriptionData } = React.useContext(SubscriptionContext);
-
-    const keys = [];
-    for (const key in resourceTypes) {
-        if (typeof resourceTypes[key] !== 'object') {
-            keys.push(key);
-        }
-    }
-    if (keys.length === 0) return;
-
-    const getExternalData = (
-        externalServiceId: string | number,
-        externalServiceKey: string,
-    ) => {
-        // Todo #102: Remove or refactor when Federative GraphQL is ready
-        if (subscriptionData.externalServices !== undefined) {
-            console.log(
-                'externalId: ',
-                externalServiceId,
-                'externalKey: ',
-                externalServiceKey,
-            );
-            const foundObject = subscriptionData.externalServices.find(
-                (item) =>
-                    item.externalServiceId === externalServiceId.toString() &&
-                    item.externalServiceKey === externalServiceKey,
-            );
-            if (foundObject) {
-                return JSON.stringify(
-                    foundObject?.externalServiceData,
-                    null,
-                    2,
-                );
-            } else {
-                return '';
-            }
-        } else return '';
-    };
-
-    return (
-        <>
-            <EuiSpacer size={'m'}></EuiSpacer>
-            <EuiPanel>
-                <div style={{ marginTop: 5 }}>
-                    <EuiFlexGroup justifyContent="spaceBetween">
-                        <EuiFlexItem>
-                            <EuiText grow={false}>
-                                <h3>
-                                    {resourceTypes.title ?? resourceTypes.name}
-                                </h3>
-                            </EuiText>
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={false}>
-                            <EuiButtonIcon
-                                aria-label="Close"
-                                size={'m'}
-                                iconType={'cross'}
-                                onClick={() => toggleSelectedId(id)}
-                            />
-                        </EuiFlexItem>
-                    </EuiFlexGroup>
-
-                    <EuiSpacer size={'xs'}></EuiSpacer>
-                    {
-                        <table
-                            width="100%"
-                            bgcolor={'#F1F5F9'}
-                            style={{
-                                borderCollapse: 'separate',
-                                borderRadius: 8,
-                            }}
-                        >
-                            {keys.map((k, i) =>
-                                !k.startsWith('ims_ci') ? (
-                                    <tr key={i}>
-                                        <td
-                                            valign={'top'}
-                                            style={{
-                                                width: 250,
-                                                padding: 10,
-                                                borderBottom: `solid ${
-                                                    i === keys.length - 1
-                                                        ? 0
-                                                        : 1
-                                                }px #ddd`,
-                                            }}
-                                        >
-                                            <b>{k}</b>
-                                        </td>
-                                        <td
-                                            style={{
-                                                padding: 10,
-                                                borderBottom: `solid ${
-                                                    i === keys.length - 1
-                                                        ? 0
-                                                        : 1
-                                                }px #ddd`,
-                                            }}
-                                        >
-                                            {resourceTypes[k]}
-                                        </td>
-                                    </tr>
-                                ) : (
-                                    <tr key={i}>
-                                        <td
-                                            colSpan={3}
-                                            style={{
-                                                padding: 10,
-                                                borderBottom: `solid ${
-                                                    i === keys.length - 1
-                                                        ? 0
-                                                        : 1
-                                                }px #ddd`,
-                                            }}
-                                        >
-                                            <EuiAccordion
-                                                id={k}
-                                                arrowDisplay="left"
-                                                buttonContent={
-                                                    <div>
-                                                        <td
-                                                            valign={'top'}
-                                                            style={{
-                                                                width: 222,
-                                                            }}
-                                                        >
-                                                            <b>{k}</b>
-                                                        </td>
-                                                        <td>
-                                                            {resourceTypes[k]}
-                                                        </td>
-                                                    </div>
-                                                }
-                                            >
-                                                <EuiPanel color="subdued">
-                                                    <EuiCodeBlock
-                                                        language="json"
-                                                        fontSize="m"
-                                                        lineNumbers
-                                                        isCopyable
-                                                    >
-                                                        {getExternalData(
-                                                            resourceTypes[
-                                                                k
-                                                            ] as string,
-                                                            'ims', // Todo #102: Federative GraphQL
-                                                        )}
-                                                    </EuiCodeBlock>
-                                                </EuiPanel>
-                                            </EuiAccordion>
-                                        </td>
-                                    </tr>
-                                ),
-                            )}
-                        </table>
-                    }
-                </div>
-            </EuiPanel>
-        </>
-    );
-};