@orchestrator-ui/orchestrator-ui-components 0.3.0 → 0.3.1

package/src/components/WfoSubscriptionsList/index.ts

@@ -1,3 +1,3 @@
-export * from './mapGrapghQlSubscriptionsResultToSubscriptionListItems';
+export * from './mapGraphQlSubscriptionsResultToSubscriptionListItems';
 export * from './subscriptionListTabs';
 export * from './WfoSubscriptionsList';

package/src/components/WfoSubscriptionsList/{mapGrapghQlSubscriptionsResultToSubscriptionListItems.ts → mapGraphQlSubscriptionsResultToSubscriptionListItems.ts}

@@ -9,9 +9,11 @@ export type SubscriptionListItem = Pick<
     endDate: Date | null;
     productName: string;
     tag: string | null;
+    customerFullname: string;
+    customerShortcode: string;
 };
 
-export function mapGrapghQlSubscriptionsResultToSubscriptionListItems(
+export function mapGraphQlSubscriptionsResultToSubscriptionListItems(
     graphqlResponse: SubscriptionsResult,
 ): SubscriptionListItem[] {
     return graphqlResponse.subscriptions.page.map((subscription) => {
@@ -24,9 +26,12 @@ export function mapGrapghQlSubscriptionsResultToSubscriptionListItems(
             status,
             subscriptionId,
             note,
+            customer,
         } = subscription;
 
         const { name: productName, tag } = product;
+        const { fullname: customerFullname, shortcode: customerShortcode } =
+            customer;
 
         return {
             subscriptionId,
@@ -38,6 +43,8 @@ export function mapGrapghQlSubscriptionsResultToSubscriptionListItems(
             note,
             productName,
             tag,
+            customerFullname,
+            customerShortcode,
         };
     });
 }

package/src/components/WfoSubscriptionsList/subscriptionListTabs.ts

@@ -1,19 +1,19 @@
 import { WfoFilterTab } from '../../components';
-import { SubscriptionListItem } from './mapGrapghQlSubscriptionsResultToSubscriptionListItems';
+import { SubscriptionListItem } from './mapGraphQlSubscriptionsResultToSubscriptionListItems';
 
-export enum WfoSubscriptionsTabType {
+export enum WfoSubscriptionListTab {
     ACTIVE = 'ACTIVE',
     TERMINATED = 'TERMINATED',
     TRANSIENT = 'TRANSIENT',
     ALL = 'ALL',
 }
 
-export const defaultSubscriptionsTabs: WfoFilterTab<
-    WfoSubscriptionsTabType,
+export const subscriptionListTabs: WfoFilterTab<
+    WfoSubscriptionListTab,
     SubscriptionListItem
 >[] = [
     {
-        id: WfoSubscriptionsTabType.ACTIVE,
+        id: WfoSubscriptionListTab.ACTIVE,
         translationKey: 'active',
         alwaysOnFilters: [
             {
@@ -23,7 +23,7 @@ export const defaultSubscriptionsTabs: WfoFilterTab<
         ],
     },
     {
-        id: WfoSubscriptionsTabType.TERMINATED,
+        id: WfoSubscriptionListTab.TERMINATED,
         translationKey: 'terminated',
         alwaysOnFilters: [
             {
@@ -33,7 +33,7 @@ export const defaultSubscriptionsTabs: WfoFilterTab<
         ],
     },
     {
-        id: WfoSubscriptionsTabType.TRANSIENT,
+        id: WfoSubscriptionListTab.TRANSIENT,
         translationKey: 'transient',
         alwaysOnFilters: [
             {
@@ -43,29 +43,7 @@ export const defaultSubscriptionsTabs: WfoFilterTab<
         ],
     },
     {
-        id: WfoSubscriptionsTabType.ALL,
+        id: WfoSubscriptionListTab.ALL,
         translationKey: 'all',
     },
 ];
-
-export const getSubscriptionsTabTypeFromString = (
-    tabId?: string,
-): WfoSubscriptionsTabType | undefined => {
-    if (!tabId) {
-        return undefined;
-    }
-
-    switch (tabId.toUpperCase()) {
-        case WfoSubscriptionsTabType.ACTIVE.toString():
-            return WfoSubscriptionsTabType.ACTIVE;
-        case WfoSubscriptionsTabType.TERMINATED.toString():
-            return WfoSubscriptionsTabType.TERMINATED;
-        case WfoSubscriptionsTabType.TRANSIENT.toString():
-            return WfoSubscriptionsTabType.TRANSIENT;
-        case WfoSubscriptionsTabType.ALL.toString():
-            return WfoSubscriptionsTabType.ALL;
-
-        default:
-            return undefined;
-    }
-};

package/src/components/WfoSummary/WfoSummaryCardHeader/WfoSummaryCardHeader.tsx

@@ -0,0 +1,55 @@
+import React, { FC } from 'react';
+
+import {
+    EuiAvatar,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiPanel,
+    EuiText,
+} from '@elastic/eui';
+import { IconType } from '@elastic/eui/src/components/icon';
+
+import { useOrchestratorTheme } from '@/hooks';
+
+import { getWfoSummaryCardHeaderStyles } from './styles';
+
+export type WfoSummaryCardHeaderProps = {
+    text: string;
+    value: number | string;
+    iconType: IconType;
+    iconColor: string | undefined;
+};
+
+export const WfoSummaryCardHeader: FC<WfoSummaryCardHeaderProps> = ({
+    text,
+    value,
+    iconType,
+    iconColor,
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const { avatarStyle, totalSectionStyle, valueStyle } =
+        getWfoSummaryCardHeaderStyles(theme);
+
+    return (
+        <EuiFlexItem grow={0}>
+            <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
+                <EuiFlexGroup>
+                    <EuiAvatar
+                        iconSize="l"
+                        size="xl"
+                        type="space"
+                        name={text}
+                        css={avatarStyle}
+                        iconType={iconType}
+                        iconColor={theme.colors.ghost}
+                        color={iconColor}
+                    />
+                    <div css={totalSectionStyle}>
+                        <EuiText color="subdued">{text}</EuiText>
+                        <EuiText css={valueStyle}>{value}</EuiText>
+                    </div>
+                </EuiFlexGroup>
+            </EuiPanel>
+        </EuiFlexItem>
+    );
+};

package/src/components/WfoSummary/WfoSummaryCardHeader/index.ts

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

package/src/components/WfoSummary/WfoSummaryCardHeader/styles.ts

@@ -0,0 +1,26 @@
+import { EuiThemeComputed } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const getWfoSummaryCardHeaderStyles = (theme: EuiThemeComputed) => {
+    const avatarStyle = css({
+        maxHeight: theme.base * 3,
+        maxWidth: theme.base * 3,
+    });
+
+    const totalSectionStyle = css({
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+    });
+
+    const valueStyle = css({
+        fontSize: theme.size.l,
+        fontWeight: theme.font.weight.semiBold,
+    });
+
+    return {
+        avatarStyle,
+        totalSectionStyle,
+        valueStyle,
+    };
+};

package/src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardList.tsx

@@ -0,0 +1,86 @@
+import React, { FC } from 'react';
+
+import { useRouter } from 'next/router';
+
+import {
+    EuiButton,
+    EuiFlexItem,
+    EuiHorizontalRule,
+    EuiPanel,
+    EuiSkeletonText,
+    EuiSpacer,
+    useEuiScrollBar,
+} from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import {
+    SummaryCardListItem,
+    WfoSummaryCardListItem,
+} from './WfoSummaryCardListItem';
+import { getWfoSummaryCardListStyles } from './styles';
+
+export type SummaryCardButtonConfig = {
+    name: string;
+    url: string;
+};
+
+export type WfoSummaryCardListProps = {
+    title: string;
+    items: SummaryCardListItem[];
+    button?: SummaryCardButtonConfig;
+    isLoading?: boolean;
+};
+
+export const WfoSummaryCardList: FC<WfoSummaryCardListProps> = ({
+    title,
+    items,
+    button,
+    isLoading = false,
+}) => {
+    const router = useRouter();
+    const euiScrollBarStyle = useEuiScrollBar();
+    const { listContainerStyle, listHeaderStyle, listStyle } =
+        useWithOrchestratorTheme(getWfoSummaryCardListStyles);
+
+    return (
+        <EuiFlexItem>
+            <EuiPanel
+                css={listContainerStyle}
+                hasShadow={false}
+                hasBorder={true}
+                paddingSize="l"
+            >
+                <div>
+                    <p css={listHeaderStyle}>{title}</p>
+                    <EuiSpacer size="m" />
+                    <EuiSkeletonText isLoading={isLoading} lines={10}>
+                        <div css={[listStyle, euiScrollBarStyle]}>
+                            {items?.map((item, index) => (
+                                <div key={index}>
+                                    <WfoSummaryCardListItem
+                                        title={item.title}
+                                        value={item.value}
+                                        url={item.url}
+                                    />
+                                    {index === items.length - 1 ? null : (
+                                        <EuiHorizontalRule margin="none" />
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    </EuiSkeletonText>
+                </div>
+                <EuiSpacer size="m" />
+                {button && (
+                    <EuiButton
+                        fullWidth
+                        onClick={() => router.push(button.url)}
+                    >
+                        {button.name}
+                    </EuiButton>
+                )}
+            </EuiPanel>
+        </EuiFlexItem>
+    );
+};

package/src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardListItem.tsx

@@ -0,0 +1,59 @@
+import React, { FC, ReactNode } from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiTextColor } from '@elastic/eui';
+
+import { WfoOptionalLink } from '@/components/WfoOptionalLink';
+import { useOrchestratorTheme } from '@/hooks';
+
+import { getWfoSummaryCardListStyles } from './styles';
+
+export type SummaryCardListItem = {
+    title: string;
+    value: ReactNode;
+    url?: string;
+};
+
+export type WfoSummaryCardListItemProps = {
+    title: string;
+    value: ReactNode;
+    url?: string;
+};
+
+export const WfoSummaryCardListItem: FC<WfoSummaryCardListItemProps> = ({
+    title,
+    value,
+    url,
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const {
+        listItemContainerStyle,
+        listItemTitleStyle,
+        listItemSubtitleStyle,
+        listItemHighlightIconStyle,
+    } = getWfoSummaryCardListStyles(theme);
+
+    return (
+        <WfoOptionalLink href={url}>
+            <EuiFlexGroup css={listItemContainerStyle} gutterSize="none">
+                <EuiFlexItem>
+                    <EuiTextColor
+                        color={url ? theme.colors.link : theme.colors.title}
+                        css={listItemTitleStyle}
+                    >
+                        {title}
+                    </EuiTextColor>
+                    <EuiTextColor css={listItemSubtitleStyle}>
+                        {value}
+                    </EuiTextColor>
+                </EuiFlexItem>
+                <EuiFlexItem
+                    className={url ? 'highlight-icon' : undefined}
+                    grow={false}
+                    css={listItemHighlightIconStyle}
+                >
+                    <EuiIcon type="sortRight" color="primary" />
+                </EuiFlexItem>
+            </EuiFlexGroup>
+        </WfoOptionalLink>
+    );
+};

package/src/components/WfoSummary/WfoSummaryCardList/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoSummaryCardList';
+export * from './WfoSummaryCardListItem';

package/src/components/WfoSummary/WfoSummaryCardList/styles.ts

@@ -0,0 +1,52 @@
+import { EuiThemeComputed } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const getWfoSummaryCardListStyles = (theme: EuiThemeComputed) => {
+    const listContainerStyle = css({
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        flexGrow: 1,
+    });
+
+    const listHeaderStyle = css({
+        fontWeight: theme.font.weight.semiBold,
+    });
+
+    const listStyle = css({
+        height: theme.base * 20,
+        overflow: 'auto',
+    });
+
+    const listItemContainerStyle = css({
+        paddingBlock: theme.size.m,
+        '.highlight-icon': {
+            visibility: 'hidden',
+        },
+        '&:hover .highlight-icon': {
+            visibility: 'visible',
+        },
+    });
+
+    const listItemTitleStyle = css({
+        fontWeight: theme.font.weight.medium,
+    });
+
+    const listItemSubtitleStyle = css({
+        fontWeight: theme.font.weight.regular,
+    });
+
+    const listItemHighlightIconStyle = css({
+        visibility: 'hidden',
+    });
+
+    return {
+        listContainerStyle,
+        listHeaderStyle,
+        listStyle,
+        listItemContainerStyle,
+        listItemTitleStyle,
+        listItemSubtitleStyle,
+        listItemHighlightIconStyle,
+    };
+};

package/src/components/WfoSummary/WfoSummaryCards.tsx

@@ -0,0 +1,111 @@
+import React, { FC } from 'react';
+
+import {
+    EuiFlexGrid,
+    EuiFlexItem,
+    EuiSpacer,
+    useCurrentEuiBreakpoint,
+} from '@elastic/eui';
+
+import {
+    SummaryCardListItem,
+    WfoSummaryCardHeader,
+    WfoSummaryCardHeaderProps,
+} from '@/components/WfoSummary/';
+import { getWfoSummaryCardsStyles } from '@/components/WfoSummary/styles';
+import { useOrchestratorTheme } from '@/hooks';
+
+import {
+    SummaryCardButtonConfig,
+    WfoSummaryCardList,
+} from './WfoSummaryCardList/WfoSummaryCardList';
+import { getNumberOfColumns } from './getNumberOfColumns';
+
+export enum SummaryCardStatus {
+    Success = 'Success',
+    Error = 'Error',
+    Neutral = 'Neutral',
+}
+
+export type SummaryCard = {
+    headerTitle: string;
+    headerValue: string | number;
+    headerStatus: SummaryCardStatus;
+    listTitle: string;
+    listItems: SummaryCardListItem[];
+    button?: SummaryCardButtonConfig;
+    isLoading?: boolean;
+};
+
+export type WfoSummaryCardsProps = {
+    summaryCards: SummaryCard[];
+};
+
+export const WfoSummaryCards: FC<WfoSummaryCardsProps> = ({ summaryCards }) => {
+    const { theme } = useOrchestratorTheme();
+    const { cardContainerStyle } = getWfoSummaryCardsStyles(theme);
+    const currentBreakpoint = useCurrentEuiBreakpoint();
+
+    const getIconTypeAndColorForHeaderStatus = (
+        status: SummaryCardStatus,
+    ): Pick<WfoSummaryCardHeaderProps, 'iconType' | 'iconColor'> => {
+        switch (status) {
+            case SummaryCardStatus.Success:
+                return {
+                    iconType: 'checkInCircleFilled',
+                    iconColor: theme.colors.success,
+                };
+            case SummaryCardStatus.Error:
+                return {
+                    iconType: 'error',
+                    iconColor: theme.colors.danger,
+                };
+            case SummaryCardStatus.Neutral:
+            default:
+                return {
+                    iconType: 'kubernetesPod',
+                    iconColor: theme.colors.primary,
+                };
+        }
+    };
+
+    return (
+        <EuiFlexGrid
+            responsive={false}
+            columns={getNumberOfColumns(currentBreakpoint)}
+            gutterSize="xl"
+        >
+            {summaryCards.map(
+                (
+                    {
+                        headerTitle,
+                        headerValue,
+                        headerStatus,
+                        listTitle,
+                        listItems,
+                        button,
+                        isLoading,
+                    },
+                    index,
+                ) => (
+                    <EuiFlexItem key={index} css={cardContainerStyle}>
+                        <WfoSummaryCardHeader
+                            text={headerTitle}
+                            value={headerValue}
+                            {...getIconTypeAndColorForHeaderStatus(
+                                headerStatus,
+                            )}
+                        />
+                        <EuiSpacer size="m" />
+                        <WfoSummaryCardList
+                            title={listTitle}
+                            items={listItems}
+                            button={button}
+                            isLoading={isLoading}
+                        />
+                    </EuiFlexItem>
+                ),
+            )}
+        </EuiFlexGrid>
+    );
+};

package/src/components/WfoSummary/getNumberOfColumns.ts

@@ -0,0 +1,14 @@
+export const getNumberOfColumns = (currentBreakpoint: string | undefined) => {
+    switch (currentBreakpoint) {
+        case 'xxl':
+            return 3;
+        case 'xl':
+            return 2;
+        case 'l':
+        case 'm':
+        case 's':
+        case 'xs':
+        default:
+            return 1;
+    }
+};

package/src/components/WfoSummary/index.ts

@@ -0,0 +1,4 @@
+export * from './getNumberOfColumns';
+export * from './WfoSummaryCardHeader';
+export * from './WfoSummaryCardList';
+export * from './WfoSummaryCards';

package/src/components/WfoSummary/styles.ts

@@ -0,0 +1,13 @@
+import { EuiThemeComputed } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const getWfoSummaryCardsStyles = (theme: EuiThemeComputed) => {
+    const cardContainerStyle = css({
+        height: theme.base * 36,
+        minWidth: theme.base * 25,
+    });
+
+    return {
+        cardContainerStyle,
+    };
+};

package/src/components/WfoTable/WfoBasicTable/WfoBasicTable.tsx

@@ -2,33 +2,35 @@ import React, { ReactNode } from 'react';
 
 import { EuiBasicTable, EuiBasicTableColumn, Pagination } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
+import { SerializedStyles } from '@emotion/react';
 
-import { useOrchestratorTheme } from '../../../hooks';
-import { SortOrder } from '../../../types';
 import type {
     TableColumnKeys,
     WfoDataSearch,
     WfoDataSorting,
-} from '../utils/columns';
+} from '@/components';
 import {
     WFO_STATUS_COLOR_FIELD,
     WfoTableControlColumnConfig,
     WfoTableDataColumnConfig,
-} from '../utils/columns';
-import { WfoStatusColorField } from './WfoStatusColorField';
-import { WfoTableHeaderCell } from './WfoTableHeaderCell';
-import { getStyles } from './styles';
+} from '@/components';
+import { WfoStatusColorField } from '@/components';
+import { WfoTableHeaderCell } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
+import { SortOrder } from '@/types';
 
-export type WfoBasicTableColumns<T> = {
+import { getWfoBasicTableStyles } from './styles';
+
+export type WfoBasicTableColumns<T extends object> = {
     [Property in keyof T]: WfoTableDataColumnConfig<T, Property> & {
         render?: (cellValue: T[Property], row: T) => ReactNode;
     };
 };
 
-export type WfoBasicTableColumnsWithControlColumns<T> =
+export type WfoBasicTableColumnsWithControlColumns<T extends object> =
     WfoBasicTableColumns<T> & WfoTableControlColumnConfig<T>;
 
-export type WfoBasicTableProps<T> = {
+export type WfoBasicTableProps<T extends object> = {
     data: T[];
     columns:
         | WfoBasicTableColumnsWithControlColumns<T>
@@ -44,9 +46,10 @@ export type WfoBasicTableProps<T> = {
     isExpandable?: boolean;
     itemIdToExpandedRowMap?: Record<string, ReactNode>;
     itemId?: string;
+    customTableStyle?: SerializedStyles;
 };
 
-export const WfoBasicTable = <T,>({
+export const WfoBasicTable = <T extends object>({
     data,
     columns,
     hiddenColumns,
@@ -60,9 +63,10 @@ export const WfoBasicTable = <T,>({
     isExpandable,
     itemIdToExpandedRowMap,
     itemId,
+    customTableStyle,
 }: WfoBasicTableProps<T>) => {
     const { theme } = useOrchestratorTheme();
-    const { basicTableStyle, getStatusColumnStyle } = getStyles(theme);
+    const { basicTableStyle } = getWfoBasicTableStyles(theme);
 
     const statusColorColumn: WfoTableControlColumnConfig<T> = {
         statusColorField: {
@@ -84,9 +88,7 @@ export const WfoBasicTable = <T,>({
         ? { ...statusColorColumn, ...columns }
         : { ...columns };
 
-    const tableStyling = getStatusColorForRow
-        ? [basicTableStyle, getStatusColumnStyle(1)]
-        : basicTableStyle;
+    const tableStyling = customTableStyle ?? basicTableStyle;
 
     return (
         <EuiBasicTable
@@ -111,7 +113,7 @@ export const WfoBasicTable = <T,>({
     );
 };
 
-function mapWfoTableColumnsToEuiColumns<T>(
+function mapWfoTableColumnsToEuiColumns<T extends object>(
     tableColumns: WfoBasicTableColumns<T>,
     hiddenColumns?: TableColumnKeys<T>,
     dataSorting?: WfoDataSorting<T>,

package/src/components/WfoTable/WfoBasicTable/WfoTableHeaderCell.tsx

@@ -14,7 +14,7 @@ import { useWithOrchestratorTheme } from '../../../hooks';
 import { SortOrder } from '../../../types';
 import { WfoSortButtons } from '../WfoSortButtons';
 import { WfoSortDirectionIcon } from './WfoSortDirectionIcon';
-import { getStyles } from './styles';
+import { getWfoBasicTableStyles } from './styles';
 
 export type WfoTableHeaderCellProps = {
     fieldName: string;
@@ -37,7 +37,7 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
         headerCellPopoverHeaderTitleStyle,
         headerCellPopoverContentStyle,
         getHeaderCellButtonStyle,
-    } = useWithOrchestratorTheme(getStyles);
+    } = useWithOrchestratorTheme(getWfoBasicTableStyles);
     const t = useTranslations('common');
 
     const isSortable = !!onSetSortOrder;

package/src/components/WfoTable/WfoBasicTable/index.ts

@@ -2,3 +2,4 @@ export * from './WfoBasicTable';
 export * from './WfoSortDirectionIcon';
 export * from './WfoTableHeaderCell';
 export * from './WfoStatusColorField';
+export * from './styles';