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

package/src/components/WfoProcessesList/WfoProcessList.tsx

@@ -0,0 +1,227 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+import { Pagination } from '@elastic/eui/src/components';
+
+import { GET_PROCESS_LIST_GRAPHQL_QUERY } from '../../graphqlQueries/processListQuery';
+import { DataDisplayParams, useQueryWithGraphql } from '../../hooks';
+import { WfoProcessListSubscriptionsCell } from '../../pages';
+import { Process, SortOrder } from '../../types';
+import { parseDateToLocaleDateTimeString } from '../../utils';
+import { WfoProcessStatusBadge } from '../WfoBadges';
+import { WfoWorkflowTargetBadge } from '../WfoBadges/WfoWorkflowTargetBadge';
+import { WfoDateTime } from '../WfoDateTime/WfoDateTime';
+import { FilterQuery } from '../WfoFilterTabs';
+import { WfoLoading } from '../WfoLoading';
+import {
+    DEFAULT_PAGE_SIZES,
+    TableColumnKeys,
+    WfoDataSorting,
+    WfoTableColumns,
+    WfoTableWithFilter,
+    getDataSortHandler,
+    getEsQueryStringHandler,
+    getPageChangeHandler,
+} from '../WfoTable';
+import { WfoFirstPartUUID } from '../WfoTable/WfoFirstPartUUID';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '../WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
+import {
+    graphQlProcessFilterMapper,
+    graphQlProcessSortMapper,
+    mapGraphQlProcessListResultToProcessListItems,
+} from './processListObjectMappers';
+
+export type ProcessListItem = Pick<
+    Process,
+    | 'workflowName'
+    | 'lastStep'
+    | 'lastStatus'
+    | 'workflowTarget'
+    | 'createdBy'
+    | 'assignee'
+    | 'processId'
+    | 'subscriptions'
+> & {
+    startedAt: Date;
+    lastModifiedAt: Date;
+    productName?: string;
+    productTag?: string;
+    customer: string;
+    customerAbbreviation: string;
+};
+
+export type WfoProcessListProps = {
+    alwaysOnFilters?: FilterQuery<ProcessListItem>[];
+    defaultHiddenColumns: TableColumnKeys<ProcessListItem> | undefined;
+    localStorageKey: string;
+    dataDisplayParams: DataDisplayParams<ProcessListItem>;
+    setDataDisplayParam: <
+        DisplayParamKey extends keyof DataDisplayParams<ProcessListItem>,
+    >(
+        prop: DisplayParamKey,
+        value: DataDisplayParams<ProcessListItem>[DisplayParamKey],
+    ) => void;
+    overrideDefaultTableColumns?: (
+        defaultTableColumns: WfoTableColumns<ProcessListItem>,
+    ) => WfoTableColumns<ProcessListItem>;
+};
+
+export const WfoProcessList: FC<WfoProcessListProps> = ({
+    alwaysOnFilters,
+    defaultHiddenColumns = [],
+    localStorageKey,
+    dataDisplayParams,
+    setDataDisplayParam,
+    overrideDefaultTableColumns,
+}) => {
+    const t = useTranslations('processes.index');
+
+    const defaultTableColumns: WfoTableColumns<ProcessListItem> = {
+        workflowName: {
+            field: 'workflowName',
+            name: t('workflowName'),
+            render: (value, { processId }) => (
+                <Link href={`/processes/${processId}`}>{value}</Link>
+            ),
+        },
+        lastStep: {
+            field: 'lastStep',
+            name: t('step'),
+        },
+        lastStatus: {
+            field: 'lastStatus',
+            name: t('status'),
+            width: '150',
+            render: (cellValue) => (
+                <WfoProcessStatusBadge processStatus={cellValue} />
+            ),
+        },
+        workflowTarget: {
+            field: 'workflowTarget',
+            name: t('workflowTarget'),
+            width: '100',
+            render: (target) => <WfoWorkflowTargetBadge target={target} />,
+        },
+        productTag: {
+            field: 'productTag',
+            name: t('productTag'),
+            width: '100',
+        },
+        productName: {
+            field: 'productName',
+            name: t('product'),
+        },
+        customer: {
+            field: 'customer',
+            name: t('customer'),
+        },
+        customerAbbreviation: {
+            field: 'customerAbbreviation',
+            name: t('customerAbbreviation'),
+        },
+        subscriptions: {
+            field: 'subscriptions',
+            name: t('subscriptions'),
+            width: '400',
+            render: ({ page: subscriptions }) => (
+                <WfoProcessListSubscriptionsCell
+                    subscriptions={subscriptions}
+                    numberOfSubscriptionsToRender={1}
+                />
+            ),
+            renderDetails: ({ page: subscriptions }) => (
+                <WfoProcessListSubscriptionsCell
+                    subscriptions={subscriptions}
+                />
+            ),
+            clipboardText: ({ page: subscriptions }) =>
+                subscriptions
+                    .map(({ subscriptionId }) => subscriptionId)
+                    .join(', '),
+        },
+        createdBy: {
+            field: 'createdBy',
+            name: t('createdBy'),
+        },
+        assignee: {
+            field: 'assignee',
+            name: t('assignee'),
+        },
+        processId: {
+            field: 'processId',
+            name: t('processId'),
+            render: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderDetails: (value) => value,
+        },
+        startedAt: {
+            field: 'startedAt',
+            name: t('started'),
+            width: '100',
+            render: (value) => <WfoDateTime dateOrIsoString={value} />,
+            renderDetails: parseDateToLocaleDateTimeString,
+            clipboardText: parseDateToLocaleDateTimeString,
+        },
+        lastModifiedAt: {
+            field: 'lastModifiedAt',
+            name: t('lastModified'),
+            width: '100',
+            render: (value) => <WfoDateTime dateOrIsoString={value} />,
+            renderDetails: parseDateToLocaleDateTimeString,
+            clipboardText: parseDateToLocaleDateTimeString,
+        },
+    };
+    const tableColumns: WfoTableColumns<ProcessListItem> =
+        overrideDefaultTableColumns
+            ? overrideDefaultTableColumns(defaultTableColumns)
+            : defaultTableColumns;
+
+    const { data, isFetching } = useQueryWithGraphql(
+        GET_PROCESS_LIST_GRAPHQL_QUERY,
+        {
+            first: dataDisplayParams.pageSize,
+            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
+            sortBy: graphQlProcessSortMapper(dataDisplayParams.sortBy),
+            filterBy: graphQlProcessFilterMapper(alwaysOnFilters),
+        },
+        'processList',
+    );
+
+    if (!data) {
+        return <WfoLoading />;
+    }
+    const { totalItems, sortFields, filterFields } = data.processes.pageInfo;
+
+    const pagination: Pagination = {
+        pageSize: dataDisplayParams.pageSize,
+        pageIndex: dataDisplayParams.pageIndex,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        totalItemCount: totalItems ? totalItems : 0,
+    };
+    const dataSorting: WfoDataSorting<ProcessListItem> = {
+        field: dataDisplayParams.sortBy?.field ?? 'lastModified',
+        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+    };
+
+    return (
+        <WfoTableWithFilter<ProcessListItem>
+            esQueryString={dataDisplayParams.esQueryString}
+            data={mapGraphQlProcessListResultToProcessListItems(data)}
+            tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumns,
+                sortFields,
+                filterFields,
+            )}
+            dataSorting={dataSorting}
+            pagination={pagination}
+            isLoading={isFetching}
+            defaultHiddenColumns={defaultHiddenColumns}
+            localStorageKey={localStorageKey}
+            detailModalTitle={'Details - Process'}
+            onUpdateEsQueryString={getEsQueryStringHandler(setDataDisplayParam)}
+            onUpdatePage={getPageChangeHandler(setDataDisplayParam)}
+            onUpdateDataSort={getDataSortHandler(setDataDisplayParam)}
+        />
+    );
+};

package/src/components/WfoProcessesList/processListObjectMappers.ts

@@ -0,0 +1,79 @@
+import {
+    GraphQLSort,
+    GraphqlFilter,
+    Process,
+    ProcessesResult,
+} from '../../types';
+import { ProcessListItem } from './WfoProcessList';
+
+export const mapGraphQlProcessListResultToProcessListItems = (
+    processesResult: ProcessesResult,
+): ProcessListItem[] =>
+    processesResult.processes.page.map((process) => {
+        const {
+            workflowName,
+            lastStep,
+            lastStatus,
+            workflowTarget,
+            createdBy,
+            assignee,
+            processId,
+            startedAt,
+            lastModifiedAt,
+            subscriptions,
+            product,
+            customer,
+        } = process;
+
+        return {
+            workflowName,
+            lastStep,
+            lastStatus,
+            workflowTarget,
+            createdBy,
+            assignee,
+            processId,
+            startedAt: new Date(startedAt),
+            lastModifiedAt: new Date(lastModifiedAt),
+            subscriptions,
+            productName: product?.name,
+            productTag: product?.tag,
+            customer: customer.fullname,
+            customerAbbreviation: customer.shortcode,
+        };
+    });
+
+// Some fields are not a key of Process, however backend still supports them
+// Backend concatenates object name with the key, e.g. product.name becomes productName
+// Todo: typecast is needed until ticket is implemented:
+// https://github.com/workfloworchestrator/orchestrator-ui/issues/290
+const fieldMapper = (field: keyof ProcessListItem): keyof Process => {
+    switch (field) {
+        case 'customer':
+            return 'customerFullname' as keyof Process;
+        case 'customerAbbreviation':
+            return 'customerShortcode' as keyof Process;
+        case 'productName':
+            return 'productName' as keyof Process;
+        case 'productTag':
+            return 'productTag' as keyof Process;
+        default:
+            return field;
+    }
+};
+
+export const graphQlProcessSortMapper = ({
+    field,
+    order,
+}: GraphQLSort<ProcessListItem>): GraphQLSort<Process> => ({
+    field: fieldMapper(field),
+    order,
+});
+
+export const graphQlProcessFilterMapper = (
+    data?: GraphqlFilter<ProcessListItem>[],
+): GraphqlFilter<Process>[] | undefined =>
+    data?.map(({ field, value }) => ({
+        field: fieldMapper(field),
+        value,
+    }));

package/src/components/{WFOSearchBar/WFOSearchField.tsx → WfoSearchBar/WfoSearchField.tsx}

@@ -1,23 +1,24 @@
 import React from 'react';
+
 import {
     EuiFormRow,
     EuiSearchBar,
     EuiSearchBarOnChangeArgs,
 } from '@elastic/eui';
 
-export type WFOSearchFieldProps = {
+export type WfoSearchFieldProps = {
     __filterQuery?: string; // Deprecated Pythia related way of passing querystring
     __setFilterQuery?: (updatedFilterQuery: string) => void; // Deprecated Pythia related way of setting querystring
     esQueryString?: string;
     onUpdateEsQueryString?: (esQueryString: string) => void;
 };
 
-export const WFOSearchField = ({
+export const WfoSearchField = ({
     __filterQuery,
     __setFilterQuery,
     esQueryString,
     onUpdateEsQueryString,
-}: WFOSearchFieldProps) => {
+}: WfoSearchFieldProps) => {
     const queryString = __filterQuery || esQueryString;
     const queryIsValid = true; // Query validation turned of for now until ESQueries can be sent to the backend
 

package/src/components/WfoSearchBar/index.ts

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

package/src/components/WfoSettingsModal/WfoInformationModal.tsx

@@ -0,0 +1,41 @@
+import React, { FC, ReactNode } from 'react';
+
+import {
+    EuiButton,
+    EuiModal,
+    EuiModalBody,
+    EuiModalFooter,
+    EuiModalHeader,
+    EuiModalHeaderTitle,
+    EuiSpacer,
+} from '@elastic/eui';
+
+export type WfoInformationModalProps = {
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+};
+
+export const WfoInformationModal: FC<WfoInformationModalProps> = ({
+    title,
+    onClose,
+    children,
+}) => {
+    return (
+        <EuiModal onClose={onClose}>
+            <EuiModalHeader>
+                <EuiModalHeaderTitle size="xs">{title}</EuiModalHeaderTitle>
+            </EuiModalHeader>
+
+            <EuiSpacer size="s" />
+
+            <EuiModalBody>{children}</EuiModalBody>
+
+            <EuiModalFooter>
+                <EuiButton onClick={onClose} fill>
+                    Close
+                </EuiButton>
+            </EuiModalFooter>
+        </EuiModal>
+    );
+};

package/src/components/{WFOSettingsModal/WFOSettingsModal.tsx → WfoSettingsModal/WfoSettingsModal.tsx}

@@ -1,4 +1,5 @@
 import React, { FC, ReactNode } from 'react';
+
 import {
     EuiButton,
     EuiButtonEmpty,
@@ -11,7 +12,7 @@ import {
     EuiSpacer,
 } from '@elastic/eui';
 
-export type SettingsModalProps = {
+export type WfoSettingsModalProps = {
     title: string;
     onClose: () => void;
     onResetToDefaults: () => void;
@@ -19,7 +20,7 @@ export type SettingsModalProps = {
     children: ReactNode;
 };
 
-export const SettingsModal: FC<SettingsModalProps> = ({
+export const WfoSettingsModal: FC<WfoSettingsModalProps> = ({
     title,
     onClose,
     onResetToDefaults,

package/src/components/WfoSettingsModal/index.tsx

@@ -0,0 +1,2 @@
+export * from './WfoInformationModal';
+export * from './WfoSettingsModal';

package/src/components/{WFOSettingsPage/WFOEngineStatusButton.tsx → WfoSettingsPage/WfoEngineStatusButton.tsx}

@@ -1,13 +1,15 @@
-import { EuiButton } from '@elastic/eui';
 import React, { FC } from 'react';
+
+import { EuiButton } from '@elastic/eui';
+
 import { EngineStatusValue } from '../../types';
 
-interface WFOEngineStatusButtonProps {
+interface WfoEngineStatusButtonProps {
     engineStatus?: EngineStatusValue;
     changeEngineStatus: () => void;
 }
 
-export const WFOEngineStatusButton: FC<WFOEngineStatusButtonProps> = ({
+export const WfoEngineStatusButton: FC<WfoEngineStatusButtonProps> = ({
     engineStatus,
     changeEngineStatus,
 }) => {

package/src/components/{WFOSettingsPage/WFOFlushSettings.tsx → WfoSettingsPage/WfoFlushSettings.tsx}

@@ -1,16 +1,18 @@
+import React, { FunctionComponent, useContext, useState } from 'react';
+
 import {
     EuiButton,
-    EuiSpacer,
+    EuiComboBox,
     EuiPanel,
+    EuiSpacer,
     EuiText,
-    EuiComboBox,
-    EuiGlobalToastList,
 } from '@elastic/eui';
-import React, { FunctionComponent, useContext, useState } from 'react';
-import { useCacheNames } from '../../hooks/DataFetchHooks';
-import { OrchestratorConfigContext } from '../../contexts/OrchestratorConfigContext';
 import { EuiComboBoxOptionOption } from '@elastic/eui/src/components/combo_box/types';
-import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
+
+import { ToastTypes } from '../../contexts';
+import { OrchestratorConfigContext } from '../../contexts/OrchestratorConfigContext';
+import { useToastMessage } from '../../hooks';
+import { useCacheNames } from '../../hooks/DataFetchHooks';
 
 const clearCache = async (apiUrl: string, settingName: string) => {
     const response = await fetch(apiUrl + `/settings/cache/${settingName}`, {
@@ -19,12 +21,12 @@ const clearCache = async (apiUrl: string, settingName: string) => {
     return await response.json();
 };
 
-export const WFOFlushSettings: FunctionComponent = () => {
+export const WfoFlushSettings: FunctionComponent = () => {
     const { orchestratorApiBaseUrl } = useContext(OrchestratorConfigContext);
     const [selectedOptions, setSelected] = useState<EuiComboBoxOptionOption[]>(
         [],
     );
-    const [toasts, setToasts] = useState<Toast[]>([]);
+    const toastMessage = useToastMessage();
 
     const onChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
         setSelected(selectedOptions);
@@ -47,25 +49,17 @@ export const WFOFlushSettings: FunctionComponent = () => {
         }
         const cacheKey = selectedOptions.map((obj) => obj.key).join(', ');
         await clearCache(orchestratorApiBaseUrl, cacheKey).then(() => {
-            addToast({
-                id: crypto.randomUUID(),
-                title: `Cache cleared`,
-                color: 'success',
-                iconType: 'check',
-                text: (
-                    <p>
-                        Cache for cache key &quot;{cacheKey}&quot; flushed
-                        successfully
-                    </p>
-                ),
-            });
+            toastMessage?.addToast(
+                ToastTypes.SUCCESS,
+                <p>
+                    Cache for cache key &quot;{cacheKey}&quot; flushed
+                    successfully
+                </p>,
+                'Cache cleared',
+            );
         });
     };
 
-    const addToast = (toast: Toast) => {
-        setToasts((toasts) => [...toasts, toast]);
-    };
-
     return (
         <EuiPanel
             hasShadow={false}
@@ -90,11 +84,6 @@ export const WFOFlushSettings: FunctionComponent = () => {
             <EuiButton onClick={flushCache} iconType="refresh">
                 Flush
             </EuiButton>
-            <EuiGlobalToastList
-                toasts={toasts}
-                dismissToast={() => setToasts([])}
-                toastLifeTimeMs={5000}
-            />
         </EuiPanel>
     );
 };

package/src/components/{WFOSettingsPage/WFOModifySettings.tsx → WfoSettingsPage/WfoModifySettings.tsx}

@@ -1,14 +1,16 @@
-import { EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 import React, { FC } from 'react';
-import { WFOEngineStatusButton } from './WFOEngineStatusButton';
+
+import { EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
+
 import { EngineStatusValue } from '../../types';
+import { WfoEngineStatusButton } from './WfoEngineStatusButton';
 
-export type WFOModifySettingsProps = {
+export type WfoModifySettingsProps = {
     engineStatus?: EngineStatusValue;
     changeEngineStatus: () => void;
 };
 
-export const WFOModifySettings: FC<WFOModifySettingsProps> = ({
+export const WfoModifySettings: FC<WfoModifySettingsProps> = ({
     engineStatus,
     changeEngineStatus,
 }) => (
@@ -23,7 +25,7 @@ export const WFOModifySettings: FC<WFOModifySettingsProps> = ({
             <p>Stop or start workflows through this menu</p>
         </EuiText>
         <EuiSpacer size="m"></EuiSpacer>
-        <WFOEngineStatusButton
+        <WfoEngineStatusButton
             engineStatus={engineStatus}
             changeEngineStatus={changeEngineStatus}
         />

package/src/components/{WFOSettingsPage/WFOSettings.tsx → WfoSettingsPage/WfoSettings.tsx}

@@ -1,11 +1,13 @@
-import { EuiHorizontalRule, EuiPageHeader, EuiSpacer } from '@elastic/eui';
 import React, { FunctionComponent } from 'react';
-import { WFOFlushSettings } from './WFOFlushSettings';
-import { WFOModifySettings } from './WFOModifySettings';
-import { WFOStatus } from './WFOStatus';
+
+import { EuiHorizontalRule, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+
 import { useEngineStatusMutation, useEngineStatusQuery } from '../../hooks';
+import { WfoFlushSettings } from './WfoFlushSettings';
+import { WfoModifySettings } from './WfoModifySettings';
+import { WfoStatus } from './WfoStatus';
 
-export const WFOSettings: FunctionComponent = () => {
+export const WfoSettings: FunctionComponent = () => {
     const { data: engineStatus } = useEngineStatusQuery();
     const { mutate, data: newEngineStatus } = useEngineStatusMutation();
 
@@ -21,16 +23,18 @@ export const WFOSettings: FunctionComponent = () => {
 
     return (
         <>
+            <EuiSpacer />
+
             <EuiPageHeader pageTitle="Settings" />
             <EuiHorizontalRule />
-            <WFOFlushSettings />
+            <WfoFlushSettings />
             <EuiSpacer />
-            <WFOModifySettings
+            <WfoModifySettings
                 engineStatus={currentEngineStatus}
                 changeEngineStatus={changeEngineStatus}
             />
             <EuiSpacer />
-            <WFOStatus engineStatus={currentEngineStatus} />
+            <WfoStatus engineStatus={currentEngineStatus} />
         </>
     );
 };

package/src/components/{WFOSettingsPage/WFOStatus.tsx → WfoSettingsPage/WfoStatus.tsx}

@@ -1,20 +1,22 @@
+import React, { FC } from 'react';
+
 import {
     EuiFlexGroup,
     EuiFlexItem,
-    EuiSpacer,
     EuiPanel,
+    EuiSpacer,
     EuiText,
 } from '@elastic/eui';
-import React, { FC } from 'react';
-import { WFOStatusDotIcon } from '../../icons';
+
 import { useOrchestratorTheme } from '../../hooks';
+import { WfoStatusDotIcon } from '../../icons';
 import { EngineStatusValue } from '../../types';
 
-export type WFOStatusProps = {
+export type WfoStatusProps = {
     engineStatus?: EngineStatusValue;
 };
 
-export const WFOStatus: FC<WFOStatusProps> = ({ engineStatus }) => {
+export const WfoStatus: FC<WfoStatusProps> = ({ engineStatus }) => {
     const { theme } = useOrchestratorTheme();
     const isRunning = engineStatus === 'RUNNING';
 
@@ -47,7 +49,7 @@ export const WFOStatus: FC<WFOStatusProps> = ({ engineStatus }) => {
                 <EuiFlexItem grow={false}>
                     <EuiFlexGroup gutterSize="xs">
                         <EuiFlexItem>
-                            <WFOStatusDotIcon
+                            <WfoStatusDotIcon
                                 color={
                                     isRunning
                                         ? theme.colors.success

package/src/components/WfoSettingsPage/index.ts

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

package/src/components/{WFOStartPage/WFOFrequentlyUsed.stories.tsx → WfoStartPage/WfoFrequentlyUsed.stories.tsx}

@@ -1,9 +1,10 @@
 import type { Meta } from '@storybook/react';
-import { WFOFrequentlyUsed } from './WFOFrequentlyUsed';
 
-const Story: Meta<typeof WFOFrequentlyUsed> = {
-    component: WFOFrequentlyUsed,
-    title: 'StartPage/WFOFrequentlyUsed',
+import { WfoFrequentlyUsed } from './WfoFrequentlyUsed';
+
+const Story: Meta<typeof WfoFrequentlyUsed> = {
+    component: WfoFrequentlyUsed,
+    title: 'StartPage/WfoFrequentlyUsed',
     tags: ['autodocs'],
 };
 export default Story;

package/src/components/{WFOStartPage/WFOFrequentlyUsed.tsx → WfoStartPage/WfoFrequentlyUsed.tsx}

@@ -1,11 +1,12 @@
-import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { FC } from 'react';
 
-export interface WFOFrequentlyUsedProps {
+import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+export interface WfoFrequentlyUsedProps {
     values: string[];
 }
 
-export const WFOFrequentlyUsed: FC<WFOFrequentlyUsedProps> = ({ values }) => (
+export const WfoFrequentlyUsed: FC<WfoFrequentlyUsedProps> = ({ values }) => (
     <EuiFlexGroup wrap gutterSize="m">
         {values.map((value, index) => (
             <EuiFlexItem key={index} grow={false}>

package/src/components/{WFOStartPage/WFOListItemStartPage.stories.tsx → WfoStartPage/WfoListItemStartPage.stories.tsx}

@@ -1,10 +1,12 @@
 import React from 'react';
+
 import type { Meta } from '@storybook/react';
-import WFOListItemStartPage from './WFOListItemStartPage';
 
-const Story: Meta<typeof WFOListItemStartPage> = {
-    component: WFOListItemStartPage,
-    title: 'StartPage/WFOListItemStartPage',
+import WfoListItemStartPage from './WfoListItemStartPage';
+
+const Story: Meta<typeof WfoListItemStartPage> = {
+    component: WfoListItemStartPage,
+    title: 'StartPage/WfoListItemStartPage',
     tags: ['autodocs'],
     decorators: [
         (Story) => (