From 3dedbc25ef0066f451d363a98f74f7c481a2453e Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 24 Apr 2024 14:04:35 +0200 Subject: [PATCH 1/8] 367: Change style of subscription productblock when its outside the subscription boundary --- .../WfoSubscriptionProductBlock.tsx | 13 ++++++++++++- .../WfoSubscriptionProductBlock/styles.ts | 6 ++++++ .../src/hooks/useWithOrchestratorTheme.ts | 5 +++-- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx index f7b07626e..b27ca2caf 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx @@ -31,6 +31,7 @@ interface WfoSubscriptionProductBlockProps { productBlockInstanceValues: FieldValue[]; inUseByRelations: InUseByRelation[]; id: number; + outsideSubscriptionBoundary?: boolean; } export const HIDDEN_KEYS = ['title', 'name', 'label']; @@ -40,6 +41,7 @@ export const WfoSubscriptionProductBlock = ({ subscriptionInstanceId, productBlockInstanceValues, inUseByRelations, + outsideSubscriptionBoundary = false, }: WfoSubscriptionProductBlockProps) => { const router = useRouter(); const subscriptionId = router.query['subscriptionId']; @@ -49,6 +51,7 @@ export const WfoSubscriptionProductBlock = ({ const { iconStyle, panelStyle, + panelStyleOutsideSubscriptionBoundary, leftColumnStyle, rightColumnStyle, rowStyle, @@ -59,7 +62,15 @@ export const WfoSubscriptionProductBlock = ({ return ( <> - +
diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts index fb24c2990..374246f95 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts @@ -16,6 +16,11 @@ export const getStyles = ({ theme, toSecondaryColor }: WfoTheme) => { backgroundColor: theme.colors.lightestShade, }); + const panelStyleOutsideSubscriptionBoundary = css({ + backgroundColor: toSecondaryColor(theme.colors.lightestShade), + border: `dashed 1px ${theme.colors.lightShade}`, + }); + const rowStyle = css({ '&:first-child': { borderTop: `solid 1px ${theme.colors.lightShade}`, @@ -45,5 +50,6 @@ export const getStyles = ({ theme, toSecondaryColor }: WfoTheme) => { leftColumnStyle, rightColumnStyle, rowStyle, + panelStyleOutsideSubscriptionBoundary, }; }; diff --git a/packages/orchestrator-ui-components/src/hooks/useWithOrchestratorTheme.ts b/packages/orchestrator-ui-components/src/hooks/useWithOrchestratorTheme.ts index 3e88f5abf..6d34552b9 100644 --- a/packages/orchestrator-ui-components/src/hooks/useWithOrchestratorTheme.ts +++ b/packages/orchestrator-ui-components/src/hooks/useWithOrchestratorTheme.ts @@ -1,7 +1,8 @@ import { WfoTheme, useOrchestratorTheme } from './useOrchestratorTheme'; export function useWithOrchestratorTheme( - getStylesFunction: (wfoTheme: WfoTheme) => T, + getStylesFunction: (theme: WfoTheme) => T, ) { - return getStylesFunction(useOrchestratorTheme()); + const { theme } = useOrchestratorTheme(); + return getStylesFunction(theme); } From 778fc1bf7607cea6c31a2a944e5baedada25f80d Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 24 Apr 2024 14:05:41 +0200 Subject: [PATCH 2/8] 367: Add outsideSubscriptionBoundary property to ProductBlockInstance type --- packages/orchestrator-ui-components/src/types/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/orchestrator-ui-components/src/types/types.ts b/packages/orchestrator-ui-components/src/types/types.ts index 30d89f7cf..578229acb 100644 --- a/packages/orchestrator-ui-components/src/types/types.ts +++ b/packages/orchestrator-ui-components/src/types/types.ts @@ -36,6 +36,7 @@ export type ProductBlockInstance = { parent: Nullable; productBlockInstanceValues: FieldValue[]; inUseByRelations: InUseByRelation[]; + outsideSubscriptionBoundary?: boolean; }; export interface ResourceTypeDefinition { From 4e3d6e6135a4509fe1d8a32e1815eec82229f420 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 24 Apr 2024 14:51:24 +0200 Subject: [PATCH 3/8] 367: Change tree style when oustide subscription boundary --- .../WfoSubscriptionDetailTree.tsx | 4 +++ .../src/components/WfoTree/WfoTreeNode.tsx | 30 ++++++++++++------- .../src/components/WfoTree/styles.ts | 9 +++++- 3 files changed, 32 insertions(+), 11 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx index 45afe9cc2..67c96d26f 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx @@ -144,6 +144,7 @@ export const WfoSubscriptionDetailTree = ({ selectedIds.map((id, index) => { const block = productBlockInstances[selectedIds[index]]; + return ( ); diff --git a/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx b/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx index a1549a41b..9a565e41a 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx @@ -12,17 +12,12 @@ import { import { TreeContext, TreeContextType } from '@/contexts'; import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks'; +import { TreeBlock } from '@/types'; import { getStyles } from './styles'; -type Item = { - id: number; - icon: string; - label: string | number | boolean; -}; - type WfoTreeNodeProps = { - item: Item; + item: TreeBlock; hasChildren: boolean; level: number; }; @@ -33,8 +28,11 @@ export const WfoTreeNode: FC = ({ level, }) => { const { theme } = useOrchestratorTheme(); - const { expandIconContainerStyle, treeContainerStyle } = - useWithOrchestratorTheme(getStyles); + const { + expandIconContainerStyle, + treeContainerStyle, + treeItemOutsideSubscriptionBoundaryStyle, + } = useWithOrchestratorTheme(getStyles); const t = useTranslations('common'); const { expandedIds, @@ -83,13 +81,25 @@ export const WfoTreeNode: FC = ({ 'aria-label': t('deselect'), alwaysShow: true, }} + css={ + item.outsideSubscriptionBoundary + ? treeItemOutsideSubscriptionBoundaryStyle + : {} + } /> ) : ( toggleSelectedId(item.id)} label={item.label} isActive={selected} - style={{ borderRadius: 6 }} + style={{ + borderRadius: 6, + }} + css={ + item.outsideSubscriptionBoundary + ? treeItemOutsideSubscriptionBoundaryStyle + : {} + } /> )} diff --git a/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts b/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts index e73d1867c..44bc2d482 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts +++ b/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts @@ -1,6 +1,7 @@ import { WfoTheme } from '@/hooks'; -export const getStyles = ({ theme }: WfoTheme) => { +export const getStyles = (wfoTheme: WfoTheme) => { + const { theme, toSecondaryColor } = wfoTheme; const expandIconContainerStyle = { cursor: 'pointer', }; @@ -11,8 +12,14 @@ export const getStyles = ({ theme }: WfoTheme) => { marginRight: `-${theme.size.s}`, }; + const treeItemOutsideSubscriptionBoundaryStyle = { + backgroundColor: toSecondaryColor(theme.colors.lightestShade), + border: `thin dashed ${theme.colors.lightShade}`, + }; + return { expandIconContainerStyle: expandIconContainerStyle, treeContainerStyle: treeContainerStyle, + treeItemOutsideSubscriptionBoundaryStyle, }; }; From 2e257213a501cd3fedea62e7f253f599a720d324 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 24 Apr 2024 15:00:51 +0200 Subject: [PATCH 4/8] Add changeset --- .changeset/shiny-trainers-juggle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/shiny-trainers-juggle.md diff --git a/.changeset/shiny-trainers-juggle.md b/.changeset/shiny-trainers-juggle.md new file mode 100644 index 000000000..af0b95397 --- /dev/null +++ b/.changeset/shiny-trainers-juggle.md @@ -0,0 +1,5 @@ +--- +"@orchestrator-ui/orchestrator-ui-components": minor +--- + +Adds a different style if a productblock is outside the subscription boundary From e35c429220ffdfd132d48ffdc5564bd65cc4a6a5 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 24 Apr 2024 15:08:28 +0200 Subject: [PATCH 5/8] 367: Code style fixes --- .../WfoSubscriptionProductBlock/styles.ts | 5 +++-- .../src/components/WfoTree/WfoTreeNode.tsx | 10 ++++------ .../src/components/WfoTree/styles.ts | 2 +- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts index 374246f95..6c70fc388 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts @@ -1,8 +1,9 @@ import { css } from '@emotion/react'; -import { WfoTheme } from '@/hooks'; +import type { WfoTheme } from '@/hooks'; -export const getStyles = ({ theme, toSecondaryColor }: WfoTheme) => { +export const getStyles = (wfoTheme: WfoTheme) => { + const { theme, toSecondaryColor } = wfoTheme; const iconStyle = css({ width: 45, height: 45, diff --git a/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx b/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx index 9a565e41a..fd54b91c6 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx @@ -82,9 +82,8 @@ export const WfoTreeNode: FC = ({ alwaysShow: true, }} css={ - item.outsideSubscriptionBoundary - ? treeItemOutsideSubscriptionBoundaryStyle - : {} + item.outsideSubscriptionBoundary && + treeItemOutsideSubscriptionBoundaryStyle } /> ) : ( @@ -96,9 +95,8 @@ export const WfoTreeNode: FC = ({ borderRadius: 6, }} css={ - item.outsideSubscriptionBoundary - ? treeItemOutsideSubscriptionBoundaryStyle - : {} + item.outsideSubscriptionBoundary && + treeItemOutsideSubscriptionBoundaryStyle } /> )} diff --git a/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts b/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts index 44bc2d482..b4fb6f874 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts +++ b/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts @@ -1,4 +1,4 @@ -import { WfoTheme } from '@/hooks'; +import type { WfoTheme } from '@/hooks'; export const getStyles = (wfoTheme: WfoTheme) => { const { theme, toSecondaryColor } = wfoTheme; From 23805b366109264f1767937adeda814cad790ae3 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 8 May 2024 13:08:21 +0200 Subject: [PATCH 6/8] 367: Remove references to subscriptionBoundary, replce with isOutsideCurrentSubscription --- apps/wfo-ui | 2 +- .../WfoSubscription/WfoSubscription.tsx | 1 + .../WfoSubscriptionDetailTree.tsx | 20 +++++++++++++------ .../WfoSubscriptionProductBlock.tsx | 10 +++++----- .../WfoSubscriptionProductBlock/styles.ts | 4 ++-- .../src/components/WfoTree/WfoTreeNode.tsx | 10 +++++----- .../src/components/WfoTree/styles.ts | 4 ++-- .../src/components/WfoTree/treeUtils.spec.ts | 5 +++++ .../src/hooks/useWithOrchestratorTheme.ts | 7 ++++--- .../src/types/types.ts | 2 +- 10 files changed, 40 insertions(+), 25 deletions(-) diff --git a/apps/wfo-ui b/apps/wfo-ui index 854d788c7..6999cb6bb 160000 --- a/apps/wfo-ui +++ b/apps/wfo-ui @@ -1 +1 @@ -Subproject commit 854d788c7a8acce956d3892163a80655c9bb1c1f +Subproject commit 6999cb6bb154f6bb624ad9461ea8ee611b89ddf7 diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx index c24014d8c..987ab18c5 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx @@ -109,6 +109,7 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => { productBlockInstances={ subscriptionDetail.productBlockInstances } + subscriptionId={subscriptionId} /> )} {selectedTab === SubscriptionDetailTab.GENERAL_TAB && ( diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx index 67c96d26f..d15e9db1f 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx @@ -5,9 +5,14 @@ import { useTranslations } from 'next-intl'; import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; import { WfoLoading, WfoTextAnchor } from '@/components'; +import { TreeContext, TreeContextType } from '@/contexts'; +import { + ProductBlockInstance, + Subscription, + TreeBlock, + WfoTreeNodeMap, +} from '@/types'; -import { TreeContext, TreeContextType } from '../../contexts'; -import { ProductBlockInstance, TreeBlock, WfoTreeNodeMap } from '../../types'; import { getTokenName } from '../../utils/getTokenName'; import { WfoTree } from '../WfoTree'; import { getWfoTreeNodeDepth } from '../WfoTree'; @@ -16,10 +21,12 @@ import { getProductBlockTitle } from './utils'; interface WfoSubscriptionDetailTreeProps { productBlockInstances: ProductBlockInstance[]; + subscriptionId: Subscription['subscriptionId']; } export const WfoSubscriptionDetailTree = ({ productBlockInstances, + subscriptionId, }: WfoSubscriptionDetailTreeProps) => { const t = useTranslations('subscriptions.detail'); const [, setSelectedTreeNode] = useState(-1); @@ -39,6 +46,8 @@ export const WfoSubscriptionDetailTree = ({ label: '', callback: () => {}, children: [], + outsideCurrentSubscription: + productBlockInstance.ownerSubscriptionId !== subscriptionId, }; // Does this node have a parent? @@ -142,8 +151,7 @@ export const WfoSubscriptionDetailTree = ({ )} {selectedIds.length !== 0 && selectedIds.map((id, index) => { - const block = - productBlockInstances[selectedIds[index]]; + const block = idToNodeMap[selectedIds[index]]; return ( diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx index b27ca2caf..dc87e1bc4 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx @@ -31,7 +31,7 @@ interface WfoSubscriptionProductBlockProps { productBlockInstanceValues: FieldValue[]; inUseByRelations: InUseByRelation[]; id: number; - outsideSubscriptionBoundary?: boolean; + outsideCurrentSubscription?: boolean; } export const HIDDEN_KEYS = ['title', 'name', 'label']; @@ -41,7 +41,7 @@ export const WfoSubscriptionProductBlock = ({ subscriptionInstanceId, productBlockInstanceValues, inUseByRelations, - outsideSubscriptionBoundary = false, + outsideCurrentSubscription = false, }: WfoSubscriptionProductBlockProps) => { const router = useRouter(); const subscriptionId = router.query['subscriptionId']; @@ -51,7 +51,7 @@ export const WfoSubscriptionProductBlock = ({ const { iconStyle, panelStyle, - panelStyleOutsideSubscriptionBoundary, + panelStyleOutsideCurrentSubscription, leftColumnStyle, rightColumnStyle, rowStyle, @@ -66,8 +66,8 @@ export const WfoSubscriptionProductBlock = ({ color="transparent" hasShadow={false} css={ - outsideSubscriptionBoundary - ? panelStyleOutsideSubscriptionBoundary + outsideCurrentSubscription + ? panelStyleOutsideCurrentSubscription : panelStyle } > diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts index 6c70fc388..797650d9a 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts @@ -17,7 +17,7 @@ export const getStyles = (wfoTheme: WfoTheme) => { backgroundColor: theme.colors.lightestShade, }); - const panelStyleOutsideSubscriptionBoundary = css({ + const panelStyleOutsideCurrentSubscription = css({ backgroundColor: toSecondaryColor(theme.colors.lightestShade), border: `dashed 1px ${theme.colors.lightShade}`, }); @@ -51,6 +51,6 @@ export const getStyles = (wfoTheme: WfoTheme) => { leftColumnStyle, rightColumnStyle, rowStyle, - panelStyleOutsideSubscriptionBoundary, + panelStyleOutsideCurrentSubscription, }; }; diff --git a/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx b/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx index fd54b91c6..175b693cc 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx @@ -31,7 +31,7 @@ export const WfoTreeNode: FC = ({ const { expandIconContainerStyle, treeContainerStyle, - treeItemOutsideSubscriptionBoundaryStyle, + treeItemOtherSubscriptionStyle, } = useWithOrchestratorTheme(getStyles); const t = useTranslations('common'); const { @@ -82,8 +82,8 @@ export const WfoTreeNode: FC = ({ alwaysShow: true, }} css={ - item.outsideSubscriptionBoundary && - treeItemOutsideSubscriptionBoundaryStyle + item.outsideCurrentSubscription && + treeItemOtherSubscriptionStyle } /> ) : ( @@ -95,8 +95,8 @@ export const WfoTreeNode: FC = ({ borderRadius: 6, }} css={ - item.outsideSubscriptionBoundary && - treeItemOutsideSubscriptionBoundaryStyle + item.outsideCurrentSubscription && + treeItemOtherSubscriptionStyle } /> )} diff --git a/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts b/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts index b4fb6f874..396bb84f7 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts +++ b/packages/orchestrator-ui-components/src/components/WfoTree/styles.ts @@ -12,7 +12,7 @@ export const getStyles = (wfoTheme: WfoTheme) => { marginRight: `-${theme.size.s}`, }; - const treeItemOutsideSubscriptionBoundaryStyle = { + const treeItemOtherSubscriptionStyle = { backgroundColor: toSecondaryColor(theme.colors.lightestShade), border: `thin dashed ${theme.colors.lightShade}`, }; @@ -20,6 +20,6 @@ export const getStyles = (wfoTheme: WfoTheme) => { return { expandIconContainerStyle: expandIconContainerStyle, treeContainerStyle: treeContainerStyle, - treeItemOutsideSubscriptionBoundaryStyle, + treeItemOtherSubscriptionStyle, }; }; diff --git a/packages/orchestrator-ui-components/src/components/WfoTree/treeUtils.spec.ts b/packages/orchestrator-ui-components/src/components/WfoTree/treeUtils.spec.ts index 4219ecc46..ba6bc2637 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTree/treeUtils.spec.ts +++ b/packages/orchestrator-ui-components/src/components/WfoTree/treeUtils.spec.ts @@ -13,6 +13,7 @@ describe('getWfoTreeNodeDepth', () => { callback: jest.fn(), productBlockInstanceValues: [field], inUseByRelations: [], + outsideCurrentSubscription: false, children: [ { id: 2, @@ -25,6 +26,7 @@ describe('getWfoTreeNodeDepth', () => { productBlockInstanceValues: [field], inUseByRelations: [], children: [], + outsideCurrentSubscription: false, }, { id: 3, @@ -36,6 +38,7 @@ describe('getWfoTreeNodeDepth', () => { callback: jest.fn(), productBlockInstanceValues: [field], inUseByRelations: [], + outsideCurrentSubscription: false, children: [ { id: 4, @@ -48,6 +51,7 @@ describe('getWfoTreeNodeDepth', () => { productBlockInstanceValues: [field], inUseByRelations: [], children: [], + outsideCurrentSubscription: false, }, ], }, @@ -91,6 +95,7 @@ describe('getWfoTreeNodeDepth', () => { productBlockInstanceValues: [field], inUseByRelations: [], children: [], + outsideCurrentSubscription: false, }; expect(() => diff --git a/packages/orchestrator-ui-components/src/hooks/useWithOrchestratorTheme.ts b/packages/orchestrator-ui-components/src/hooks/useWithOrchestratorTheme.ts index 6d34552b9..4f34bfecb 100644 --- a/packages/orchestrator-ui-components/src/hooks/useWithOrchestratorTheme.ts +++ b/packages/orchestrator-ui-components/src/hooks/useWithOrchestratorTheme.ts @@ -1,8 +1,9 @@ -import { WfoTheme, useOrchestratorTheme } from './useOrchestratorTheme'; +import { useOrchestratorTheme } from './useOrchestratorTheme'; +import type { WfoTheme } from './useOrchestratorTheme'; export function useWithOrchestratorTheme( getStylesFunction: (theme: WfoTheme) => T, ) { - const { theme } = useOrchestratorTheme(); - return getStylesFunction(theme); + const wfoTheme = useOrchestratorTheme(); + return getStylesFunction(wfoTheme); } diff --git a/packages/orchestrator-ui-components/src/types/types.ts b/packages/orchestrator-ui-components/src/types/types.ts index 578229acb..daddb45b1 100644 --- a/packages/orchestrator-ui-components/src/types/types.ts +++ b/packages/orchestrator-ui-components/src/types/types.ts @@ -36,7 +36,6 @@ export type ProductBlockInstance = { parent: Nullable; productBlockInstanceValues: FieldValue[]; inUseByRelations: InUseByRelation[]; - outsideSubscriptionBoundary?: boolean; }; export interface ResourceTypeDefinition { @@ -93,6 +92,7 @@ export interface TreeBlock extends ProductBlockInstance { label: string | number | boolean; callback: () => void; children: TreeBlock[]; + outsideCurrentSubscription: boolean; } export interface ProductDefinition { From 9e21e410efbab4ef769cc0686c9aecad6312edd1 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 8 May 2024 13:19:05 +0200 Subject: [PATCH 7/8] 367: Refactor using router to get subscription id to using isOutsideCurrentSubscription prop --- .../WfoSubscriptionProductBlock.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx index dc87e1bc4..5d82d7ff3 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { useTranslations } from 'next-intl'; -import { useRouter } from 'next/router'; import { EuiBadge, @@ -43,9 +42,6 @@ export const WfoSubscriptionProductBlock = ({ inUseByRelations, outsideCurrentSubscription = false, }: WfoSubscriptionProductBlockProps) => { - const router = useRouter(); - const subscriptionId = router.query['subscriptionId']; - const t = useTranslations('subscriptions.detail'); const { theme } = useOrchestratorTheme(); const { @@ -129,8 +125,7 @@ export const WfoSubscriptionProductBlock = ({ {t('ownerSubscriptionId')} - {subscriptionId === - ownerSubscriptionId ? ( + {!outsideCurrentSubscription ? ( <> {t('self')} From 40e0cb6a6624373d2f85a1b461552daa61ebfa79 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Tue, 14 May 2024 15:53:48 +0200 Subject: [PATCH 8/8] 367: Refactor variable name outside.. to isOutside.. --- .../WfoSubscription/WfoSubscriptionDetailTree.tsx | 6 +++--- .../WfoSubscriptionProductBlock.tsx | 8 ++++---- .../src/components/WfoTree/WfoTreeNode.tsx | 4 ++-- .../src/components/WfoTree/treeUtils.spec.ts | 10 +++++----- packages/orchestrator-ui-components/src/types/types.ts | 2 +- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx index d15e9db1f..11d74f016 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx @@ -46,7 +46,7 @@ export const WfoSubscriptionDetailTree = ({ label: '', callback: () => {}, children: [], - outsideCurrentSubscription: + isOutsideCurrentSubscription: productBlockInstance.ownerSubscriptionId !== subscriptionId, }; @@ -166,8 +166,8 @@ export const WfoSubscriptionDetailTree = ({ block.productBlockInstanceValues } inUseByRelations={block.inUseByRelations} - outsideCurrentSubscription={ - block.outsideCurrentSubscription + isOutsideCurrentSubscription={ + block.isOutsideCurrentSubscription } id={id} /> diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx index 5d82d7ff3..687f599f9 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx @@ -30,7 +30,7 @@ interface WfoSubscriptionProductBlockProps { productBlockInstanceValues: FieldValue[]; inUseByRelations: InUseByRelation[]; id: number; - outsideCurrentSubscription?: boolean; + isOutsideCurrentSubscription?: boolean; } export const HIDDEN_KEYS = ['title', 'name', 'label']; @@ -40,7 +40,7 @@ export const WfoSubscriptionProductBlock = ({ subscriptionInstanceId, productBlockInstanceValues, inUseByRelations, - outsideCurrentSubscription = false, + isOutsideCurrentSubscription = false, }: WfoSubscriptionProductBlockProps) => { const t = useTranslations('subscriptions.detail'); const { theme } = useOrchestratorTheme(); @@ -62,7 +62,7 @@ export const WfoSubscriptionProductBlock = ({ color="transparent" hasShadow={false} css={ - outsideCurrentSubscription + isOutsideCurrentSubscription ? panelStyleOutsideCurrentSubscription : panelStyle } @@ -125,7 +125,7 @@ export const WfoSubscriptionProductBlock = ({ {t('ownerSubscriptionId')} - {!outsideCurrentSubscription ? ( + {!isOutsideCurrentSubscription ? ( <> {t('self')} diff --git a/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx b/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx index 175b693cc..e4a8c642d 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx @@ -82,7 +82,7 @@ export const WfoTreeNode: FC = ({ alwaysShow: true, }} css={ - item.outsideCurrentSubscription && + item.isOutsideCurrentSubscription && treeItemOtherSubscriptionStyle } /> @@ -95,7 +95,7 @@ export const WfoTreeNode: FC = ({ borderRadius: 6, }} css={ - item.outsideCurrentSubscription && + item.isOutsideCurrentSubscription && treeItemOtherSubscriptionStyle } /> diff --git a/packages/orchestrator-ui-components/src/components/WfoTree/treeUtils.spec.ts b/packages/orchestrator-ui-components/src/components/WfoTree/treeUtils.spec.ts index ba6bc2637..b94c2bc24 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTree/treeUtils.spec.ts +++ b/packages/orchestrator-ui-components/src/components/WfoTree/treeUtils.spec.ts @@ -13,7 +13,7 @@ describe('getWfoTreeNodeDepth', () => { callback: jest.fn(), productBlockInstanceValues: [field], inUseByRelations: [], - outsideCurrentSubscription: false, + isOutsideCurrentSubscription: false, children: [ { id: 2, @@ -26,7 +26,7 @@ describe('getWfoTreeNodeDepth', () => { productBlockInstanceValues: [field], inUseByRelations: [], children: [], - outsideCurrentSubscription: false, + isOutsideCurrentSubscription: false, }, { id: 3, @@ -38,7 +38,7 @@ describe('getWfoTreeNodeDepth', () => { callback: jest.fn(), productBlockInstanceValues: [field], inUseByRelations: [], - outsideCurrentSubscription: false, + isOutsideCurrentSubscription: false, children: [ { id: 4, @@ -51,7 +51,7 @@ describe('getWfoTreeNodeDepth', () => { productBlockInstanceValues: [field], inUseByRelations: [], children: [], - outsideCurrentSubscription: false, + isOutsideCurrentSubscription: false, }, ], }, @@ -95,7 +95,7 @@ describe('getWfoTreeNodeDepth', () => { productBlockInstanceValues: [field], inUseByRelations: [], children: [], - outsideCurrentSubscription: false, + isOutsideCurrentSubscription: false, }; expect(() => diff --git a/packages/orchestrator-ui-components/src/types/types.ts b/packages/orchestrator-ui-components/src/types/types.ts index daddb45b1..7351af346 100644 --- a/packages/orchestrator-ui-components/src/types/types.ts +++ b/packages/orchestrator-ui-components/src/types/types.ts @@ -92,7 +92,7 @@ export interface TreeBlock extends ProductBlockInstance { label: string | number | boolean; callback: () => void; children: TreeBlock[]; - outsideCurrentSubscription: boolean; + isOutsideCurrentSubscription: boolean; } export interface ProductDefinition {