@orchestrator-ui/orchestrator-ui-components 2.15.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "2.15.0",
+    "version": "3.0.1",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoBadges/WfoProductBlockBadge/WfoProductBlockBadge.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
 
-import { useOrchestratorTheme } from '../../../hooks';
-import { BadgeType } from '../../../types';
+import Link from 'next/link';
+
+import { useOrchestratorTheme } from '@/hooks';
+import { BadgeType } from '@/types';
+
 import { WfoBadge } from '../WfoBadge';
 
 export type WfoProductBlockBadgeProps = {
     children: string;
+    link?: string;
     badgeType: BadgeType;
 };
 
 export function WfoProductBlockBadge({
     children,
+    link,
     badgeType,
 }: WfoProductBlockBadgeProps) {
     const { theme, toSecondaryColor } = useOrchestratorTheme();
@@ -66,7 +71,13 @@ export function WfoProductBlockBadge({
 
     return (
         <WfoBadge textColor={textColor} color={badgeColor}>
-            {children}
+            {link ? (
+                <Link css={{ color: textColor }} href={link}>
+                    {children}
+                </Link>
+            ) : (
+                children
+            )}
         </WfoBadge>
     );
 }

package/src/components/WfoForms/UserInputForm.tsx

@@ -18,6 +18,7 @@ import React, { useContext, useState } from 'react';
 
 import invariant from 'invariant';
 import { JSONSchema6 } from 'json-schema';
+import { isObject } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import { useTranslations } from 'next-intl';
@@ -393,10 +394,16 @@ function fillPreselection(form: JSONSchema6, router: NextRouter) {
         // ipvany preselect
         if (queryParams.prefix && queryParams.prefixlen) {
             if (form && form.properties.ip_prefix) {
-                const ipPrefixInput = form.properties
-                    .ip_prefix as UniformJSONSchemaProperty;
+                const ipPrefix = isObject(form.properties.ip_prefix)
+                    ? form.properties.ip_prefix
+                    : {};
+                const ipPrefixInput = {
+                    ...ipPrefix,
+                    uniforms: { prefixMin: 0 },
+                    default: {},
+                } as UniformJSONSchemaProperty;
                 if (!ipPrefixInput.uniforms) {
-                    ipPrefixInput.uniforms = {};
+                    ipPrefixInput.uniforms = { prefixMin: 0 };
                 }
                 ipPrefixInput.default = `${queryParams.prefix}/${queryParams.prefixlen}`;
                 ipPrefixInput.uniforms.prefixMin = parseInt(
@@ -404,6 +411,13 @@ function fillPreselection(form: JSONSchema6, router: NextRouter) {
                         (queryParams.prefixlen as string),
                     10,
                 );
+                return {
+                    ...form,
+                    properties: {
+                        ...form.properties,
+                        ip_prefix: ipPrefixInput,
+                    },
+                };
             }
         }
     }

package/src/components/WfoInsyncIcon/WfoInsyncIcon.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { useOrchestratorTheme } from '../../hooks';
-import { WfoCheckmarkCircleFill, WfoMinusCircleOutline } from '../../icons';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoCheckmarkCircleFill, WfoMinusCircleFill } from '@/icons';
 
 interface WfoInsyncIconProps {
     inSync: boolean;
@@ -17,10 +17,10 @@ export const WfoInsyncIcon = ({ inSync }: WfoInsyncIconProps) => {
             color={theme.colors.primary}
         />
     ) : (
-        <WfoMinusCircleOutline
+        <WfoMinusCircleFill
             height={20}
             width={20}
-            color={theme.colors.mediumShade}
+            color={theme.colors.danger}
         />
     );
 };

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -104,7 +104,7 @@ export const WfoProcessesList = ({
         workflowName: {
             columnType: ColumnType.DATA,
             label: t('workflowName'),
-            width: '20%',
+            width: '225px',
             renderData: (value, { processId }) => (
                 <Link href={`${PATH_WORKFLOWS}/${processId}`}>{value}</Link>
             ),
@@ -113,46 +113,46 @@ export const WfoProcessesList = ({
         lastStep: {
             columnType: ColumnType.DATA,
             label: t('step'),
-            width: '15%',
+            width: '375px',
         },
         lastStatus: {
             columnType: ColumnType.DATA,
             label: t('status'),
-            width: '100',
             renderData: (cellValue) => (
                 <WfoProcessStatusBadge processStatus={cellValue} />
             ),
+            width: '150px',
         },
         workflowTarget: {
             columnType: ColumnType.DATA,
             label: t('workflowTarget'),
-            width: '100',
             renderData: (target) => <WfoWorkflowTargetBadge target={target} />,
+            width: '100px',
         },
         tag: {
             columnType: ColumnType.DATA,
             label: t('productTag'),
-            width: '100',
+            width: '100px',
         },
         productName: {
             columnType: ColumnType.DATA,
             label: t('product'),
-            width: '10%',
+            width: '275px',
         },
         customer: {
             columnType: ColumnType.DATA,
             label: t('customer'),
-            width: '10%',
+            width: '250px',
         },
         customerAbbreviation: {
             columnType: ColumnType.DATA,
             label: t('customerAbbreviation'),
-            width: '10%',
+            width: '125px',
         },
         subscriptions: {
             columnType: ColumnType.DATA,
             label: t('subscriptions'),
-            width: '15%',
+            width: '425px',
             renderData: ({ page: subscriptions }) => (
                 <WfoProcessListSubscriptionsCell
                     subscriptions={subscriptions}
@@ -176,17 +176,17 @@ export const WfoProcessesList = ({
         createdBy: {
             columnType: ColumnType.DATA,
             label: t('createdBy'),
-            width: '10%',
+            width: '100px',
         },
         assignee: {
             columnType: ColumnType.DATA,
             label: t('assignee'),
-            width: '5%',
+            width: '100px',
         },
         processId: {
             columnType: ColumnType.DATA,
             label: t('processId'),
-            width: '90',
+            width: '90px',
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
             renderTooltip: (value) => value,
@@ -194,7 +194,7 @@ export const WfoProcessesList = ({
         startedAt: {
             columnType: ColumnType.DATA,
             label: t('started'),
-            width: '100',
+            width: '100px',
             renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
             renderDetails: parseDateToLocaleDateTimeString,
             clipboardText: parseDateToLocaleDateTimeString,
@@ -203,7 +203,7 @@ export const WfoProcessesList = ({
         lastModifiedAt: {
             columnType: ColumnType.DATA,
             label: t('lastModified'),
-            width: '100',
+            width: '125px',
             renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
             renderDetails: parseDateToLocaleDateTimeString,
             clipboardText: parseDateToLocaleDateTimeString,

package/src/components/WfoTable/WfoTable/WfoGroupedTable/WfoGroupedTable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC, ReactElement } from 'react';
 
 import { useTranslations } from 'next-intl';
 
@@ -24,6 +24,7 @@ export type WfoGroupedTableProps<T extends object> = Pick<
 > & {
     data: GroupedData<T>;
     groupNameLabel: string;
+    overrideHeaderSection?: (ExpandButton: ReactElement) => React.ReactNode;
 };
 
 export const WfoGroupedTable = <T extends object>({
@@ -31,6 +32,7 @@ export const WfoGroupedTable = <T extends object>({
     columnConfig,
     groupNameLabel,
     isLoading,
+    overrideHeaderSection,
     className,
 }: WfoGroupedTableProps<T>) => {
     const { headerStyle, rowStyle, cellStyle } =
@@ -53,21 +55,27 @@ export const WfoGroupedTable = <T extends object>({
         columnConfig,
     });
 
+    const ExpandCollapseButton: FC = () => (
+        <EuiButtonEmpty
+            size="xs"
+            onClick={() =>
+                isAllGroupsAndSubgroupsExpanded
+                    ? collapseAllRows()
+                    : expandAllRows()
+            }
+        >
+            {isAllGroupsAndSubgroupsExpanded ? t('collapse') : t('expand')}
+        </EuiButtonEmpty>
+    );
+
     return (
         <>
             <EuiFlexGroup justifyContent="flexEnd">
-                <EuiButtonEmpty
-                    size="xs"
-                    onClick={() =>
-                        isAllGroupsAndSubgroupsExpanded
-                            ? collapseAllRows()
-                            : expandAllRows()
-                    }
-                >
-                    {isAllGroupsAndSubgroupsExpanded
-                        ? t('collapse')
-                        : t('expand')}
-                </EuiButtonEmpty>
+                {overrideHeaderSection ? (
+                    overrideHeaderSection(<ExpandCollapseButton />)
+                ) : (
+                    <ExpandCollapseButton />
+                )}
             </EuiFlexGroup>
 
             <EuiSpacer size="xs" />

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.15.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '3.0.1';

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -8,6 +8,8 @@ import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
+    PATH_METADATA_PRODUCT_BLOCKS,
+    PATH_METADATA_RESOURCE_TYPES,
     StoredTableConfig,
     WfoDataSorting,
     WfoDateTime,
@@ -41,6 +43,7 @@ import {
     csvDownloadHandler,
     getConcatenatedResult,
     getCsvFileNameWithDate,
+    getQueryUrl,
     getQueryVariablesForExport,
     parseDateToLocaleDateTimeString,
     parseIsoString,
@@ -95,7 +98,7 @@ export const WfoProductBlocksPage = () => {
         productBlockId: {
             columnType: ColumnType.DATA,
             label: t('id'),
-            width: '90',
+            width: '90px',
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
             renderTooltip: (value) => value,
@@ -103,6 +106,7 @@ export const WfoProductBlocksPage = () => {
         name: {
             columnType: ColumnType.DATA,
             label: t('name'),
+            width: '300px',
             renderData: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.PRODUCT_BLOCK}>
                     {name}
@@ -112,6 +116,7 @@ export const WfoProductBlocksPage = () => {
         tag: {
             columnType: ColumnType.DATA,
             label: t('tag'),
+            width: '120px',
         },
         description: {
             columnType: ColumnType.DATA,
@@ -129,12 +134,16 @@ export const WfoProductBlocksPage = () => {
             label: t('dependingProductBlocks'),
             renderData: (dependsOn) => (
                 <>
-                    {dependsOn.map((productBlock, index) => (
+                    {dependsOn.map(({ name }, index) => (
                         <WfoProductBlockBadge
                             key={index}
+                            link={getQueryUrl(
+                                PATH_METADATA_PRODUCT_BLOCKS,
+                                `name:"${name}"`,
+                            )}
                             badgeType={BadgeType.PRODUCT_BLOCK}
                         >
-                            {productBlock.name}
+                            {name}
                         </WfoProductBlockBadge>
                     ))}
                 </>
@@ -148,26 +157,35 @@ export const WfoProductBlocksPage = () => {
         resourceTypes: {
             columnType: ColumnType.DATA,
             label: t('resourceTypes'),
+            width: '700px',
             renderData: (resourceTypes) => (
                 <>
-                    {resourceTypes.map((resourceType, index) => (
+                    {resourceTypes.map(({ resourceType }, index) => (
                         <WfoProductBlockBadge
                             key={index}
+                            link={getQueryUrl(
+                                PATH_METADATA_RESOURCE_TYPES,
+                                `resourceType:"${resourceType}"`,
+                            )}
                             badgeType={BadgeType.RESOURCE_TYPE}
                         >
-                            {resourceType.resourceType}
+                            {resourceType}
                         </WfoProductBlockBadge>
                     ))}
                 </>
             ),
             renderDetails: (resourceTypes) => (
                 <EuiBadgeGroup gutterSize="s">
-                    {resourceTypes.map((resourceType, index) => (
+                    {resourceTypes.map(({ resourceType }, index) => (
                         <WfoProductBlockBadge
                             key={index}
+                            link={getQueryUrl(
+                                PATH_METADATA_RESOURCE_TYPES,
+                                `resourceType:"${resourceType}"`,
+                            )}
                             badgeType={BadgeType.RESOURCE_TYPE}
                         >
-                            {resourceType.resourceType}
+                            {resourceType}
                         </WfoProductBlockBadge>
                     ))}
                 </EuiBadgeGroup>
@@ -183,6 +201,7 @@ export const WfoProductBlocksPage = () => {
         createdAt: {
             columnType: ColumnType.DATA,
             label: t('createdAt'),
+            width: '120px',
             renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
@@ -191,6 +210,7 @@ export const WfoProductBlocksPage = () => {
         endDate: {
             columnType: ColumnType.DATA,
             label: t('endDate'),
+            width: '120px',
             renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),

package/src/pages/metadata/WfoProductsPage.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import {
+    PATH_METADATA_PRODUCT_BLOCKS,
     WfoDataSorting,
     getPageIndexChangeHandler,
     getPageSizeChangeHandler,
@@ -35,6 +36,7 @@ import type { GraphqlQueryVariables, ProductDefinition } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
     getConcatenatedResult,
+    getQueryUrl,
     getQueryVariablesForExport,
     parseDateToLocaleDateTimeString,
     parseIsoString,
@@ -92,7 +94,7 @@ export const WfoProductsPage = () => {
         productId: {
             columnType: ColumnType.DATA,
             label: t('id'),
-            width: '90',
+            width: '90px',
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
             renderTooltip: (value) => value,
@@ -100,7 +102,7 @@ export const WfoProductsPage = () => {
         name: {
             columnType: ColumnType.DATA,
             label: t('name'),
-            width: '200',
+            width: '200px',
             renderData: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.PRODUCT}>
                     {name}
@@ -110,7 +112,7 @@ export const WfoProductsPage = () => {
         tag: {
             columnType: ColumnType.DATA,
             label: t('tag'),
-            width: '120',
+            width: '120px',
             renderData: (value) => (
                 <WfoProductBlockBadge badgeType={BadgeType.PRODUCT_TAG}>
                     {value}
@@ -120,22 +122,24 @@ export const WfoProductsPage = () => {
         description: {
             columnType: ColumnType.DATA,
             label: t('description'),
-            width: '400',
+            width: '400px',
             renderTooltip: (value) => value,
         },
         productType: {
             columnType: ColumnType.DATA,
             label: t('productType'),
+            width: '250px',
         },
         status: {
             columnType: ColumnType.DATA,
             label: t('status'),
-            width: '90',
+            width: '90px',
             renderData: (value) => <WfoProductStatusBadge status={value} />,
         },
         fixedInputs: {
             columnType: ColumnType.DATA,
             label: t('fixedInputs'),
+            width: '400px',
             renderData: (fixedInputs) => (
                 <>
                     {fixedInputs.map((fixedInput, index) => (
@@ -159,23 +163,27 @@ export const WfoProductsPage = () => {
         productBlocks: {
             columnType: ColumnType.DATA,
             label: t('productBlocks'),
+            width: '250px',
             renderData: (productBlocks) => (
                 <>
-                    {productBlocks.map((block, index) => (
+                    {productBlocks.map(({ name }, index) => (
                         <WfoProductBlockBadge
                             key={index}
+                            link={getQueryUrl(
+                                PATH_METADATA_PRODUCT_BLOCKS,
+                                `name:"${name}"`,
+                            )}
                             badgeType={BadgeType.PRODUCT_BLOCK}
                         >
-                            {block.name}
+                            {name}
                         </WfoProductBlockBadge>
                     ))}
                 </>
             ),
-            renderTooltip: (productBlocks) => {
-                return productBlocks.map((productBlock) => (
+            renderTooltip: (productBlocks) =>
+                productBlocks.map((productBlock) => (
                     <p key={productBlock.name}>- {productBlock.name}</p>
-                ));
-            },
+                )),
         },
         createdAt: {
             columnType: ColumnType.DATA,

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -8,6 +8,7 @@ import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
+    PATH_METADATA_PRODUCT_BLOCKS,
     WfoProductBlockBadge,
     getDataSortHandler,
     getPageIndexChangeHandler,
@@ -37,7 +38,11 @@ import {
     ResourceTypeDefinition,
     SortOrder,
 } from '@/types';
-import { getConcatenatedResult, getQueryVariablesForExport } from '@/utils';
+import {
+    getConcatenatedResult,
+    getQueryUrl,
+    getQueryVariablesForExport,
+} from '@/utils';
 import {
     csvDownloadHandler,
     getCsvFileNameWithDate,
@@ -88,7 +93,7 @@ export const WfoResourceTypesPage = () => {
         resourceTypeId: {
             columnType: ColumnType.DATA,
             label: t('resourceId'),
-            width: '90',
+            width: '90px',
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
             renderTooltip: (value) => value,
@@ -96,7 +101,7 @@ export const WfoResourceTypesPage = () => {
         resourceType: {
             columnType: ColumnType.DATA,
             label: t('type'),
-            width: '200',
+            width: '225px',
             renderData: (value) => (
                 <WfoProductBlockBadge badgeType={BadgeType.RESOURCE_TYPE}>
                     {value}
@@ -106,30 +111,40 @@ export const WfoResourceTypesPage = () => {
         description: {
             columnType: ColumnType.DATA,
             label: t('description'),
+            width: '700px',
         },
         productBlocks: {
             columnType: ColumnType.DATA,
             label: t('usedInProductBlocks'),
+            width: '1000px',
             renderData: (productBlocks) => (
                 <>
-                    {productBlocks.map((productBlock, index) => (
+                    {productBlocks.map(({ name }, index) => (
                         <WfoProductBlockBadge
                             key={index}
+                            link={getQueryUrl(
+                                PATH_METADATA_PRODUCT_BLOCKS,
+                                `name:"${name}"`,
+                            )}
                             badgeType={BadgeType.PRODUCT_BLOCK}
                         >
-                            {productBlock.name}
+                            {name}
                         </WfoProductBlockBadge>
                     ))}
                 </>
             ),
             renderDetails: (productBlocks) => (
                 <EuiBadgeGroup gutterSize="s">
-                    {productBlocks.map((productBlock, index) => (
+                    {productBlocks.map(({ name }, index) => (
                         <WfoProductBlockBadge
                             key={index}
+                            link={getQueryUrl(
+                                PATH_METADATA_PRODUCT_BLOCKS,
+                                `name:"${name}"`,
+                            )}
                             badgeType={BadgeType.PRODUCT_BLOCK}
                         >
-                            {productBlock.name}
+                            {name}
                         </WfoProductBlockBadge>
                     ))}
                 </EuiBadgeGroup>

package/src/pages/metadata/WfoTasksPage.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from 'next-intl';
 import { EuiBadgeGroup } from '@elastic/eui';
 
 import {
+    PATH_METADATA_PRODUCTS,
     WfoWorkflowTargetBadge,
     getPageIndexChangeHandler,
     getPageSizeChangeHandler,
@@ -36,6 +37,7 @@ import { mapRtkErrorToWfoError } from '@/rtk/utils';
 import type { GraphqlQueryVariables, TaskDefinition } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
+    getQueryUrl,
     getQueryVariablesForExport,
     onlyUnique,
     parseDateToLocaleDateTimeString,
@@ -105,21 +107,23 @@ export const WfoTasksPage = () => {
                     {name}
                 </WfoProductBlockBadge>
             ),
+            width: '300px',
         },
         description: {
             columnType: ColumnType.DATA,
             label: t('description'),
-            width: '40%',
+            width: '500px',
         },
         target: {
             columnType: ColumnType.DATA,
             label: t('target'),
             renderData: (target) => <WfoWorkflowTargetBadge target={target} />,
+            width: '100px',
         },
         productTags: {
             columnType: ColumnType.DATA,
             label: t('productTags'),
-            width: '20%',
+            width: '250px',
             renderData: (productTags) => (
                 <>
                     {productTags
@@ -127,6 +131,10 @@ export const WfoTasksPage = () => {
                         .map((productTag, index) => (
                             <WfoProductBlockBadge
                                 key={index}
+                                link={getQueryUrl(
+                                    PATH_METADATA_PRODUCTS,
+                                    `tag:"${productTag}"`,
+                                )}
                                 badgeType={BadgeType.PRODUCT_TAG}
                             >
                                 {productTag}
@@ -141,6 +149,10 @@ export const WfoTasksPage = () => {
                         .map((productTag, index) => (
                             <WfoProductBlockBadge
                                 key={index}
+                                link={getQueryUrl(
+                                    PATH_METADATA_PRODUCTS,
+                                    `tag:"${productTag}"`,
+                                )}
                                 badgeType={BadgeType.PRODUCT_TAG}
                             >
                                 {productTag}
@@ -160,7 +172,7 @@ export const WfoTasksPage = () => {
         createdAt: {
             columnType: ColumnType.DATA,
             label: t('createdAt'),
-            width: '15%',
+            width: '150px',
             renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),