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

package/src/components/WFOSubscription/WFOSubscriptionActions.tsx

@@ -1,138 +0,0 @@
-import React, { FC, useState } from 'react';
-import {
-    EuiButton,
-    EuiContextMenuItem,
-    EuiContextMenuPanel,
-    EuiPanel,
-    EuiAvatar,
-    EuiTitle,
-    EuiPopover,
-} from '@elastic/eui';
-import { useTranslations } from 'next-intl';
-import { useSubscriptionActions } from '../../hooks/useSubscriptionActions';
-
-type MenuItemProps = {
-    key: string;
-    icon: string;
-    description: string;
-    index: number;
-};
-
-const MenuItem: FC<MenuItemProps> = ({ icon, description, key }) => (
-    <EuiContextMenuItem key={key} icon={<EuiAvatar name={icon} size="s" />}>
-        {description}
-    </EuiContextMenuItem>
-);
-
-type MenuBlockProps = {
-    title: string;
-};
-const MenuBlock: FC<MenuBlockProps> = ({ title }) => (
-    <EuiTitle size="xxxs">
-        <h3>{title}</h3>
-    </EuiTitle>
-);
-
-export type SubscriptionActionsProps = {
-    subscriptionId: string;
-};
-
-export const WFOSubscriptionActions: FC<SubscriptionActionsProps> = ({
-    subscriptionId,
-}) => {
-    const t = useTranslations('subscriptions.detail.workflow');
-    const [isPopoverOpen, setPopover] = useState(false);
-    const { data: subscriptionActions } =
-        useSubscriptionActions(subscriptionId);
-
-    const onButtonClick = () => {
-        setPopover(!isPopoverOpen);
-    };
-
-    const closePopover = () => {
-        setPopover(false);
-    };
-
-    const button = (
-        <EuiButton
-            iconType="arrowDown"
-            iconSide="right"
-            onClick={onButtonClick}
-        >
-            Actions
-        </EuiButton>
-    );
-
-    return (
-        <EuiPopover
-            id="subscriptionActionPopover"
-            button={button}
-            isOpen={isPopoverOpen}
-            closePopover={closePopover}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-        >
-            <EuiContextMenuPanel>
-                <EuiPanel color="transparent" paddingSize="s">
-                    {subscriptionActions && subscriptionActions.create && (
-                        <>
-                            <MenuBlock title={t('create')}></MenuBlock>
-                            {subscriptionActions.create.map((item, index) => (
-                                <MenuItem
-                                    key={`c_${index}`}
-                                    icon={'CreateLong'}
-                                    description={item.description}
-                                    index={index}
-                                />
-                            ))}
-                        </>
-                    )}
-
-                    {subscriptionActions && subscriptionActions.modify && (
-                        <>
-                            <MenuBlock title={t('modify')}></MenuBlock>
-                            {subscriptionActions.modify.map((item, index) => (
-                                <MenuItem
-                                    key={`m_${index}`}
-                                    icon={'M'}
-                                    description={item.description}
-                                    index={index}
-                                />
-                            ))}
-                        </>
-                    )}
-
-                    {subscriptionActions && subscriptionActions.system && (
-                        <>
-                            <MenuBlock title={t('system')}></MenuBlock>
-                            {subscriptionActions.system.map((item, index) => (
-                                <MenuItem
-                                    key={`s_${index}`}
-                                    icon={'System'}
-                                    description={item.description}
-                                    index={index}
-                                />
-                            ))}
-                        </>
-                    )}
-
-                    {subscriptionActions && subscriptionActions.terminate && (
-                        <>
-                            <MenuBlock title={t('terminate')}></MenuBlock>
-                            {subscriptionActions.terminate.map(
-                                (item, index) => (
-                                    <MenuItem
-                                        key={`t_${index}`}
-                                        icon={'Terminate'}
-                                        description={item.description}
-                                        index={index}
-                                    />
-                                ),
-                            )}
-                        </>
-                    )}
-                </EuiPanel>
-            </EuiContextMenuPanel>
-        </EuiPopover>
-    );
-};

package/src/components/WFOSubscription/WFOSubscriptionBlock.tsx

@@ -1,109 +0,0 @@
-import React from 'react';
-
-import {
-    EuiButtonEmpty,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiSpacer,
-    EuiText,
-} from '@elastic/eui';
-import { useTranslations } from 'next-intl';
-import { WFOCheckmarkCircleFill, WFOMinusCircleOutline } from '../../icons';
-import { WFOSubscriptionStatusBadge } from '../WFOBadges';
-import {
-    subscriptionDefinitionCellStyle,
-    subscriptionTableRowStyle,
-    subscriptionValueCellStyle,
-} from './styles';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const RenderField = (field: string, data: any) => {
-    if (field === 'status')
-        return <WFOSubscriptionStatusBadge status={data[field]} />;
-    else if (field === 'insync')
-        return (
-            <div style={{ position: 'relative', top: 5 }}>
-                {data[field] ? (
-                    <WFOCheckmarkCircleFill color="#007832" />
-                ) : (
-                    <WFOMinusCircleOutline color="#BD271F" />
-                )}
-            </div>
-        );
-    else if (field === 'product.name') return <div>{data.product.name}</div>;
-    return <div>{data[field]}</div>;
-};
-
-export const WFOSubscriptionBlock = (title: string, data: object) => {
-    const t = useTranslations('common');
-    const keys = [];
-    for (const key in data) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (typeof data[key] !== 'object') {
-            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>
-                        <EuiFlexItem grow={false}>
-                            <EuiButtonEmpty size={'s'} iconType={'starEmpty'}>
-                                {t('addToFavorites')}
-                            </EuiButtonEmpty>
-                        </EuiFlexItem>
-                    </EuiFlexGroup>
-
-                    <EuiSpacer size={'s'}></EuiSpacer>
-                    <table width="100%">
-                        <tbody>
-                            <tr key={0} css={subscriptionTableRowStyle}>
-                                <td
-                                    valign={'top'}
-                                    css={subscriptionDefinitionCellStyle}
-                                >
-                                    <b>{t('product')}</b>
-                                </td>
-                                <td css={subscriptionValueCellStyle}>
-                                    {/*
-                                    @typescript-eslint/ban-ts-comment
-                                    @ts-ignore */}
-                                    {data.product.name}
-                                </td>
-                            </tr>
-                            {keys.map((k, i) => (
-                                <tr
-                                    key={i}
-                                    style={{
-                                        backgroundColor:
-                                            i % 2 ? '#F1F5F9' : '#FFF',
-                                    }}
-                                >
-                                    <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/WFOSubscriptionDetailTree.tsx

@@ -1,184 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { ProductBlockBase, ResourceTypeBase, TreeBlock } from '../../types';
-import { WFOProductBlock } from './WFOProductBlock';
-import {
-    SubscriptionContext,
-    SubscriptionContextType,
-} from '../../contexts/SubscriptionContext';
-import { WFOTree } from '../WFOTree/WFOTree';
-import { TreeContext, TreeContextType } from '../../contexts/TreeContext';
-
-import {
-    EuiButtonIcon,
-    EuiCallOut,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiLoadingContent,
-    EuiSearchBar,
-    EuiText,
-} from '@elastic/eui';
-
-import { getTokenName } from '../../utils/getTokenName';
-
-interface TreeBlockOptional extends ProductBlockBase {
-    icon?: string;
-    label?: string;
-    callback?: () => void;
-    children?: TreeBlock;
-}
-
-type NodeMap = { [key: number]: TreeBlock | TreeBlockOptional };
-
-const MAX_LABEL_LENGTH = 45;
-const MAX_EXPAND_ALL = 100;
-
-function getProductBlockTitle(resourceType: ResourceTypeBase): string {
-    if (!resourceType.title) return resourceType.name;
-    return resourceType.title?.length > MAX_LABEL_LENGTH
-        ? `${resourceType.title.substring(0, MAX_LABEL_LENGTH)}...`
-        : resourceType.title;
-}
-
-export const WFOSubscriptionDetailTree = () => {
-    const t = useTranslations('subscriptions.detail');
-    const [expandAllActive, setExpandAllActive] = useState(false);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [selectedTreeNode, setSelectedTreeNode] = useState(-1);
-
-    const { subscriptionData, loadingStatus } = React.useContext(
-        SubscriptionContext,
-    ) as SubscriptionContextType;
-
-    const { selectedIds, collapseAll, expandAll, resetSelection } =
-        React.useContext(TreeContext) as TreeContextType;
-
-    const toggleExpandAll = () => {
-        if (expandAllActive) {
-            collapseAll();
-        } else {
-            expandAll(MAX_EXPAND_ALL);
-        }
-        setExpandAllActive(!expandAllActive);
-    };
-
-    let tree: TreeBlock | null = null;
-    if (loadingStatus > 0) {
-        const idToNodeMap: NodeMap = {}; // Keeps track of nodes using id as key, for fast lookup
-
-        // loop over data
-        subscriptionData.productBlocks.forEach((productBlock) => {
-            const shallowCopy: TreeBlockOptional = { ...productBlock };
-
-            // Each node will have children, so let's give it a "children" property
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            shallowCopy.children = [];
-
-            // Add an entry for this node to the map so that any future children can lookup the parent
-            idToNodeMap[shallowCopy.id] = shallowCopy;
-
-            // Does this node have a parent?
-            if (shallowCopy.parent === null) {
-                // Doesn't look like it, so this node is the root of the tree
-                shallowCopy.label = shallowCopy.resourceTypes.name;
-                shallowCopy.callback = () =>
-                    setSelectedTreeNode(shallowCopy.id);
-
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                tree = shallowCopy as TreeBlock;
-            } else {
-                // This node has a parent, so let's look it up using the id
-                const parentNode = idToNodeMap[shallowCopy.parent];
-                shallowCopy.label = getProductBlockTitle(
-                    shallowCopy.resourceTypes,
-                );
-                shallowCopy.callback = () =>
-                    setSelectedTreeNode(shallowCopy.id);
-
-                if (
-                    !subscriptionData.productBlocks.find(
-                        (i) => i.parent === shallowCopy.id,
-                    )
-                ) {
-                    shallowCopy.icon = getTokenName(shallowCopy.label);
-                }
-
-                // Let's add the current node as a child of the parent node.
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                parentNode.children?.push(shallowCopy);
-            }
-        });
-    }
-
-    if (!tree) return null;
-
-    return (
-        <EuiFlexGroup style={{ marginTop: 15 }}>
-            <EuiFlexItem style={{ maxWidth: 450, width: 450 }}>
-                <EuiFlexGroup direction={'column'}>
-                    <EuiFlexItem grow={false}>
-                        <EuiFlexGroup>
-                            <EuiFlexItem grow={false}>
-                                <EuiText>
-                                    <h3>{t('productBlocks')}</h3>
-                                </EuiText>
-                            </EuiFlexItem>
-                            <EuiFlexItem grow={false}>
-                                <EuiButtonIcon
-                                    iconType={
-                                        expandAllActive ? 'minimize' : 'expand'
-                                    }
-                                    onClick={toggleExpandAll}
-                                />
-                            </EuiFlexItem>
-                            <EuiFlexItem grow={true}>
-                                {selectedIds.length > 0 && (
-                                    <EuiButtonIcon
-                                        iconType="error"
-                                        onClick={resetSelection}
-                                    />
-                                )}
-                            </EuiFlexItem>
-                        </EuiFlexGroup>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={true}>
-                        {!tree && <EuiLoadingContent />}
-                        {tree && <WFOTree data={[tree]} />}
-                    </EuiFlexItem>
-                </EuiFlexGroup>
-            </EuiFlexItem>
-            <EuiFlexItem grow={true}>
-                <div>
-                    <EuiSearchBar />
-                    {selectedIds.length === 0 && (
-                        <EuiCallOut
-                            style={{
-                                marginTop: 15,
-                                minHeight: 600,
-                            }}
-                            size="m"
-                            title={t('noProductBlockSelected')}
-                            iconType="inspect"
-                        >
-                            <p>{t('ctaSelectProductBlock')} </p>
-                        </EuiCallOut>
-                    )}
-                    {selectedIds.length !== 0 &&
-                        selectedIds
-                            .reverse()
-                            .map((id, index) =>
-                                WFOProductBlock(
-                                    subscriptionData.productBlocks[
-                                        selectedIds[index]
-                                    ].resourceTypes,
-                                    id,
-                                ),
-                            )}
-                </div>
-            </EuiFlexItem>
-        </EuiFlexGroup>
-    );
-};

package/src/components/WFOSubscription/WFOSubscriptionGeneral.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import {
-    EuiFlexGrid,
-    EuiFlexItem,
-    EuiLoadingContent,
-    EuiSpacer,
-} from '@elastic/eui';
-// import { useTranslations } from 'next-intl';
-import { SubscriptionContext } from '../../contexts/SubscriptionContext';
-import { WFOSubscriptionBlock } from './WFOSubscriptionBlock';
-import { WFOFixedInputBlock } from './WFOFixedInputBlock';
-
-/** TODO: Adding a useTranslations hook here leads to an hooks error. https://github.com/workfloworchestrator/orchestrator-ui/issues/177 */
-
-export const WFOSubscriptionGeneral = () => {
-    const { subscriptionData, loadingStatus } =
-        React.useContext(SubscriptionContext);
-
-    if (!loadingStatus) {
-        return (
-            <>
-                <EuiSpacer size={'m'} />
-                <EuiLoadingContent />
-            </>
-        );
-    }
-
-    return (
-        <EuiFlexGrid direction={'row'}>
-            <>
-                <EuiFlexItem>
-                    {WFOSubscriptionBlock(
-                        'Subscription details',
-                        subscriptionData,
-                    )}
-                </EuiFlexItem>
-                <EuiFlexItem>
-                    {WFOFixedInputBlock(
-                        'Fixed Inputs',
-                        subscriptionData.fixedInputs,
-                    )}
-                </EuiFlexItem>
-                <EuiFlexItem>
-                    {WFOFixedInputBlock(
-                        'Product Info',
-                        subscriptionData.product,
-                    )}
-                </EuiFlexItem>
-            </>
-        </EuiFlexGrid>
-    );
-};

package/src/components/WFOSubscription/index.ts

@@ -1,7 +0,0 @@
-export * from './WFOFixedInputBlock';
-export * from './WFOProcessesTimeline';
-export * from './WFOProductBlock';
-export * from './WFOSubscriptionActions';
-export * from './WFOSubscriptionBlock';
-export * from './WFOSubscriptionDetailTree';
-export * from './WFOSubscriptionGeneral';

package/src/components/WFOSubscription/styles.ts

@@ -1,18 +0,0 @@
-import { css, SerializedStyles } from '@emotion/react';
-
-export const subscriptionTableRowStyle: SerializedStyles = css({
-    backgroundColor: '#F1F5F9',
-});
-
-export const subscriptionDefinitionCellStyle: SerializedStyles = css({
-    width: 350,
-    padding: 10,
-    borderTopLeftRadius: 8,
-    borderBottomLeftRadius: 8,
-});
-
-export const subscriptionValueCellStyle: SerializedStyles = css({
-    padding: 0,
-    borderTopRightRadius: 8,
-    borderBottomRightRadius: 8,
-});

package/src/components/WFOSubscriptionsList/types.ts

@@ -1,11 +0,0 @@
-export type SubscriptionListItem = {
-    subscriptionId: string;
-    description: string;
-    status: string;
-    insync: boolean;
-    startDate: Date | null;
-    endDate: Date | null;
-    productName: string;
-    tag: string | null;
-    note: string | null;
-};

package/src/components/WFOTable/WFOTable.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { EuiBasicTable, EuiBasicTableColumn, Pagination } from '@elastic/eui';
-import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
-import { WFOTableHeaderCell } from './WFOTableHeaderCell';
-
-import type {
-    WFODataSorting,
-    TableColumnKeys,
-    WFOTableColumns,
-    WFOTableColumnsWithControlColumns,
-} from './utils/columns';
-
-export type WFOTableProps<T> = {
-    data: T[];
-    columns: WFOTableColumnsWithControlColumns<T> | WFOTableColumns<T>;
-    hiddenColumns?: TableColumnKeys<T>;
-    dataSorting?: WFODataSorting<T>;
-    pagination: Pagination;
-    isLoading?: boolean;
-    onCriteriaChange: (criteria: Criteria<T>) => void;
-    onDataSort?: (columnId: keyof T) => void;
-};
-
-export const WFOTable = <T,>({
-    data,
-    columns,
-    hiddenColumns,
-    dataSorting,
-    pagination,
-    isLoading,
-    onCriteriaChange,
-    onDataSort,
-}: WFOTableProps<T>) => (
-    <EuiBasicTable
-        items={data}
-        columns={mapTableColumnsToEuiColumns(
-            columns,
-            hiddenColumns,
-            dataSorting,
-            onDataSort,
-        )}
-        pagination={pagination}
-        onChange={onCriteriaChange}
-        loading={isLoading}
-    />
-);
-
-function mapTableColumnsToEuiColumns<T>(
-    columns: WFOTableColumns<T>,
-    hiddenColumns?: TableColumnKeys<T>,
-    dataSorting?: WFODataSorting<T>,
-    onDataSort?: (columnId: keyof T) => void,
-): EuiBasicTableColumn<T>[] {
-    function isVisibleColumn(columnKey: string) {
-        return !hiddenColumns?.includes(columnKey as keyof T);
-    }
-
-    function mapToEuiColumn(colKey: string): EuiBasicTableColumn<T> {
-        const typedColumnKey = colKey as keyof T;
-        const column = columns[typedColumnKey];
-        const { name } = column;
-
-        const sortDirection =
-            dataSorting?.field === colKey ? dataSorting.sortOrder : undefined;
-
-        const handleClick = () => onDataSort?.(typedColumnKey);
-
-        return {
-            ...column,
-            field: typedColumnKey,
-            name: name && (
-                <WFOTableHeaderCell
-                    sortDirection={sortDirection}
-                    onClick={handleClick}
-                >
-                    {name}
-                </WFOTableHeaderCell>
-            ),
-            truncateText: true,
-            textOnly: true,
-        };
-    }
-
-    return Object.keys(columns).filter(isVisibleColumn).map(mapToEuiColumn);
-}

package/src/components/WFOTable/WFOTableHeaderCell.tsx

@@ -1,30 +0,0 @@
-import React, { FC, ReactNode } from 'react';
-
-import { SortOrder } from '../../types';
-import { WFOSortDirectionIcon } from './WFOSortDirectionIcon';
-
-export type WFOTableHeaderCellProps = {
-    sortDirection?: SortOrder;
-    onClick?: () => void;
-    children: ReactNode;
-};
-
-export const WFOTableHeaderCell: FC<WFOTableHeaderCellProps> = ({
-    sortDirection,
-    children,
-    onClick,
-}) => (
-    <div
-        css={{
-            display: 'flex',
-            alignItems: 'center',
-            cursor: 'pointer',
-        }}
-        onClick={onClick}
-    >
-        <div>{children}</div>
-        {sortDirection ? (
-            <WFOSortDirectionIcon sortDirection={sortDirection} />
-        ) : null}
-    </div>
-);

package/src/components/WFOTable/WFOTableSettingsModal/index.ts

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