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

package/src/components/{WFOPageTemplate/WFOBreadcrumbs/WFOBreadcrumbs.tsx → WfoPageTemplate/WfoBreadcrumbs/WfoBreadcrumbs.tsx}

@@ -1,9 +1,12 @@
 import React from 'react';
-import { EuiBreadcrumb, EuiBreadcrumbs, EuiSpacer } from '@elastic/eui';
+
 import { useRouter } from 'next/router';
+
+import { EuiBreadcrumb, EuiBreadcrumbs, EuiSpacer } from '@elastic/eui';
+
 import { isUuid4, removeSuffix, upperCaseFirstChar } from '../../../utils';
 
-export const WFOBreadcrumbs = () => {
+export const WfoBreadcrumbs = () => {
     const router = useRouter();
     // Setup initial breadcrumbs with navigation to home
     const breadcrumbs: EuiBreadcrumb[] = [

package/src/components/WfoPageTemplate/WfoBreadcrumbs/index.ts

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

package/src/components/{WFOPageTemplate/WFOPageHeader/WFOPageHeader.stories.tsx → WfoPageTemplate/WfoPageHeader/WfoPageHeader.stories.tsx}

@@ -1,11 +1,13 @@
+import React, { ReactElement } from 'react';
+
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import type { Meta } from '@storybook/react';
-import React, { ReactElement } from 'react';
-import { WFOPageHeader } from './WFOPageHeader';
 
-const Story: Meta<typeof WFOPageHeader> = {
-    component: WFOPageHeader,
-    title: 'PageTemplate/WFOPageHeader',
+import { WfoPageHeader } from './WfoPageHeader';
+
+const Story: Meta<typeof WfoPageHeader> = {
+    component: WfoPageHeader,
+    title: 'PageTemplate/WfoPageHeader',
 };
 export default Story;
 

package/src/components/{WFOPageTemplate/WFOPageHeader/WFOPageHeader.tsx → WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx}

@@ -1,4 +1,5 @@
 import React, { FC, ReactElement } from 'react';
+
 import {
     EuiBadgeGroup,
     EuiButtonIcon,
@@ -7,22 +8,25 @@ import {
     EuiHeaderSection,
     EuiHeaderSectionItem,
 } from '@elastic/eui';
+
 import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { WFOFailedTasksBadge } from '../../WFOBadges/WFOFailedTasksBadge';
-import { WFOEngineStatusBadge } from '../../WFOBadges/WFOEngineStatusBadge';
-import { WFOEnvironmentBadge } from '../../WFOBadges/WFOEnvironmentBadge';
-import { WFOLogoutIcon } from '../../../icons/WFOLogoutIcon';
+import { WfoLogoutIcon } from '../../../icons/WfoLogoutIcon';
+import { WfoEngineStatusBadge } from '../../WfoBadges/WfoEngineStatusBadge';
+import { WfoEnvironmentBadge } from '../../WfoBadges/WfoEnvironmentBadge';
+import { WfoFailedTasksBadge } from '../../WfoBadges/WfoFailedTasksBadge';
 
-export interface WFOPageHeaderProps {
+export interface WfoPageHeaderProps {
     // todo: should be part of theme!
     navigationHeight: number;
     getAppLogo: (navigationHeight: number) => ReactElement;
+    handleSideMenuClick: () => void;
     handleLogoutClick: () => void;
 }
 
-export const WFOPageHeader: FC<WFOPageHeaderProps> = ({
+export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
     navigationHeight,
     getAppLogo,
+    handleSideMenuClick,
     handleLogoutClick,
 }) => {
     const { theme, multiplyByBaseUnit } = useOrchestratorTheme();
@@ -40,26 +44,37 @@ export const WFOPageHeader: FC<WFOPageHeaderProps> = ({
                     />
                 </EuiHeaderSectionItem>
                 <EuiHeaderSectionItem>
-                    <WFOEnvironmentBadge />
+                    <WfoEnvironmentBadge />
                 </EuiHeaderSectionItem>
+
+                <EuiButtonIcon
+                    aria-label="Logout"
+                    display="empty"
+                    iconType={() => (
+                        <WfoLogoutIcon color={theme.colors.emptyShade} />
+                    )}
+                    css={{ width: 48, height: 48, marginLeft: 10 }}
+                    color="ghost"
+                    onClick={handleSideMenuClick}
+                />
             </EuiHeaderSection>
 
             <EuiHeaderSection>
                 <EuiHeaderSectionItem>
                     <EuiBadgeGroup css={{ marginRight: multiplyByBaseUnit(2) }}>
-                        <WFOEngineStatusBadge />
-                        <WFOFailedTasksBadge />
+                        <WfoEngineStatusBadge />
+                        <WfoFailedTasksBadge />
                     </EuiBadgeGroup>
 
                     <EuiButtonIcon
                         aria-label="Logout"
                         display="empty"
                         iconType={() => (
-                            <WFOLogoutIcon color={theme.colors.emptyShade} />
+                            <WfoLogoutIcon color={theme.colors.emptyShade} />
                         )}
                         css={{ width: 48, height: 48 }}
                         color="ghost"
-                        onClick={() => handleLogoutClick()}
+                        onClick={handleLogoutClick}
                     />
                 </EuiHeaderSectionItem>
             </EuiHeaderSection>

package/src/components/WfoPageTemplate/WfoPageHeader/index.ts

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

package/src/components/{WFOPageTemplate/WFOPageTemplate/WFOPageTemplate.stories.tsx → WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.stories.tsx}

@@ -1,11 +1,13 @@
-import type { Meta } from '@storybook/react';
-import { WFOPageTemplate } from './WFOPageTemplate';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { ReactElement } from 'react';
 
-const Story: Meta<typeof WFOPageTemplate> = {
-    component: WFOPageTemplate,
-    title: 'PageTemplate/WFOPageTemplate',
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import type { Meta } from '@storybook/react';
+
+import { WfoPageTemplate } from './WfoPageTemplate';
+
+const Story: Meta<typeof WfoPageTemplate> = {
+    component: WfoPageTemplate,
+    title: 'PageTemplate/WfoPageTemplate',
 };
 export default Story;
 

package/src/components/{WFOPageTemplate/WFOPageTemplate/WFOPageTemplate.tsx → WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx}

@@ -1,18 +1,27 @@
 import React, { FC, ReactElement, ReactNode, useState } from 'react';
+
+import { signOut } from 'next-auth/react';
+
 import { EuiPageTemplate } from '@elastic/eui';
-import { WFOPageHeader } from '../WFOPageHeader';
-import { WFOSidebar } from '../WFOSidebar';
+import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
+
 import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { WFOBreadcrumbs } from '../WFOBreadcrumbs';
+import { WfoBreadcrumbs } from '../WfoBreadcrumbs';
+import { WfoPageHeader } from '../WfoPageHeader';
+import { WfoSidebar } from '../WfoSidebar';
 
-export interface WFOPageTemplateProps {
+export interface WfoPageTemplateProps {
     getAppLogo: (navigationHeight: number) => ReactElement;
+    overrideMenuItems?: (
+        defaultMenuItems: EuiSideNavItemType<object>[],
+    ) => EuiSideNavItemType<object>[];
     children: ReactNode;
 }
 
-export const WFOPageTemplate: FC<WFOPageTemplateProps> = ({
+export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
     children,
     getAppLogo,
+    overrideMenuItems,
 }) => {
     const { theme, multiplyByBaseUnit } = useOrchestratorTheme();
     const [isSideMenuVisible, setIsSideMenuVisible] = useState(true);
@@ -21,12 +30,13 @@ export const WFOPageTemplate: FC<WFOPageTemplateProps> = ({
 
     return (
         <>
-            <WFOPageHeader
+            <WfoPageHeader
                 getAppLogo={getAppLogo}
                 navigationHeight={navigationHeight}
-                handleLogoutClick={() =>
-                    setIsSideMenuVisible(!isSideMenuVisible)
+                handleSideMenuClick={() =>
+                    setIsSideMenuVisible((prevState) => !prevState)
                 }
+                handleLogoutClick={signOut}
             />
 
             {/* Sidebar and content area */}
@@ -43,7 +53,7 @@ export const WFOPageTemplate: FC<WFOPageTemplateProps> = ({
                             backgroundColor: theme.colors.body,
                         }}
                     >
-                        <WFOSidebar />
+                        <WfoSidebar overrideMenuItems={overrideMenuItems} />
                     </EuiPageTemplate.Sidebar>
                 )}
                 <EuiPageTemplate.Section
@@ -51,7 +61,7 @@ export const WFOPageTemplate: FC<WFOPageTemplateProps> = ({
                         backgroundColor: theme.colors.emptyShade,
                     }}
                 >
-                    <WFOBreadcrumbs />
+                    <WfoBreadcrumbs />
                     {children}
                 </EuiPageTemplate.Section>
             </EuiPageTemplate>

package/src/components/WfoPageTemplate/WfoPageTemplate/index.ts

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

package/src/components/{WFOPageTemplate/WFOSidebar/WFOSidebar.stories.tsx → WfoPageTemplate/WfoSidebar/WfoSidebar.stories.tsx}

@@ -1,14 +1,16 @@
 import React from 'react';
+
 import type { Meta } from '@storybook/react';
-import { WFOSidebar } from './WFOSidebar';
 
-const Story: Meta<typeof WFOSidebar> = {
+import { WfoSidebar } from './WfoSidebar';
+
+const Story: Meta<typeof WfoSidebar> = {
     component: (args) => (
         <div style={{ width: '250px', backgroundColor: '#F1F5F9' }}>
-            <WFOSidebar {...args} />
+            <WfoSidebar {...args} />
         </div>
     ),
-    title: 'PageTemplate/WFOSidebar',
+    title: 'PageTemplate/WfoSidebar',
 };
 export default Story;
 

package/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx

@@ -0,0 +1,161 @@
+import React, { FC, useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/router';
+
+import { EuiSideNav, EuiSpacer } from '@elastic/eui';
+import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
+
+import {
+    PATH_METADATA,
+    PATH_METADATA_PRODUCTS,
+    PATH_METADATA_PRODUCT_BLOCKS,
+    PATH_METADATA_RESOURCE_TYPES,
+    PATH_METADATA_WORKFLOWS,
+    PATH_PROCESSES,
+    PATH_SETTINGS,
+    PATH_START,
+    PATH_SUBSCRIPTIONS,
+    PATH_TASKS,
+} from '../paths';
+import { WfoStartCreateWorkflowButtonComboBox } from './WfoStartCreateWorkflowButtonComboBox';
+
+export type WfoSidebarProps = {
+    overrideMenuItems?: (
+        defaultMenuItems: EuiSideNavItemType<object>[],
+    ) => EuiSideNavItemType<object>[];
+};
+
+export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
+    const t = useTranslations('main');
+    const router = useRouter();
+    const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
+
+    const toggleMobile = () => {
+        setIsSideNavOpenOnMobile((openState) => !openState);
+    };
+
+    const defaultMenuItems: EuiSideNavItemType<object>[] = [
+        {
+            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);
+            },
+            items: [
+                {
+                    name: 'Products',
+                    id: '5.1',
+                    isSelected: router.pathname === PATH_METADATA_PRODUCTS,
+                    onClick: (e) => {
+                        e.preventDefault();
+                        router.push(PATH_METADATA_PRODUCTS);
+                    },
+                },
+                {
+                    name: 'Product blocks',
+                    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,
+        },
+    ];
+
+    const defaultMenu: EuiSideNavItemType<object>[] = [
+        {
+            renderItem: () => (
+                <>
+                    <WfoStartCreateWorkflowButtonComboBox />
+                    <EuiSpacer size="m" />
+                </>
+            ),
+            name: 'Menu',
+            id: '1',
+            items: overrideMenuItems
+                ? overrideMenuItems(defaultMenuItems)
+                : defaultMenuItems,
+        },
+    ];
+
+    return (
+        <EuiSideNav
+            mobileTitle={t('mobileTitle')}
+            toggleOpenOnMobile={toggleMobile}
+            isOpenOnMobile={isSideNavOpenOnMobile}
+            items={defaultMenu}
+        />
+    );
+};

package/src/components/WfoPageTemplate/WfoSidebar/WfoStartCreateWorkflowButtonComboBox.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/router';
+
+import { GET_WORKFLOWS_FOR_DROPDOWN_LIST_GRAPHQL_QUERY } from '../../../graphqlQueries/workflows/workflowsQueryForDropdownList';
+import { useQueryWithGraphql } from '../../../hooks';
+import {
+    WfoButtonComboBox,
+    WorkflowComboBoxOption,
+} from '../../WfoButtonComboBox/WfoButtonComboBox';
+import { PATH_START_WORKFLOW } from '../paths';
+
+export const WfoStartCreateWorkflowButtonComboBox = () => {
+    const router = useRouter();
+    const t = useTranslations('common');
+
+    const { data } = useQueryWithGraphql(
+        GET_WORKFLOWS_FOR_DROPDOWN_LIST_GRAPHQL_QUERY,
+        {
+            // Avoiding pagination by fetching an unrealistic amount of items
+            first: 1000,
+            after: 0,
+            filterBy: [{ field: 'target', value: 'CREATE' }],
+        },
+        'createWorkflows',
+    );
+
+    const productList: WorkflowComboBoxOption[] =
+        data?.workflows.page
+            .flatMap(({ name: workflowName, products }) =>
+                products.map(({ productId, name: productName }) => ({
+                    label: productName,
+                    data: {
+                        workflowName,
+                        productId,
+                    },
+                })),
+            )
+            .sort((a, b) => a.label.localeCompare(b.label)) ?? [];
+
+    const handleOptionChange = (selectedProduct: WorkflowComboBoxOption) => {
+        const { workflowName, productId } = selectedProduct.data;
+        router.push({
+            pathname: `${PATH_START_WORKFLOW}/${workflowName}`,
+            query: { productId },
+        });
+    };
+
+    return (
+        <WfoButtonComboBox
+            buttonText={t('newSubscription')}
+            options={productList}
+            onOptionChange={handleOptionChange}
+            isProcess
+        />
+    );
+};

package/src/components/WfoPageTemplate/WfoSidebar/index.ts

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

package/src/components/WfoPageTemplate/index.ts

@@ -0,0 +1,4 @@
+export * from './WfoPageHeader';
+export * from './WfoPageTemplate';
+export * from './WfoSidebar';
+export * from './paths';

package/src/components/{WFOPageTemplate → WfoPageTemplate}/paths.ts

@@ -1,5 +1,5 @@
 export const PATH_START = '/';
-export const PATH_NEW_PROCESS = '/new-process';
+export const PATH_START_WORKFLOW = '/start-workflow';
 export const PATH_PROCESSES = '/processes';
 export const PATH_SUBSCRIPTIONS = '/subscriptions';
 export const PATH_METADATA = '/metadata';