Add subscriptionPath option for WfoRelatedSubscriptions, WfoSubscriptionDetailTree (#1627)

Author: Georgi2704

.changeset/thick-melons-agree.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+1620 Add subscriptionPath option for WfoRelatedSubscriptions, WfoSubscriptionDetailTree

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx

@@ -52,10 +52,12 @@ export type RelatedSubscriptionListItem = Pick<
 
 interface WfoRelatedSubscriptionsProps {
     subscriptionId: string;
+    subscriptionPath?: string;
 }
 
 export const WfoRelatedSubscriptions = ({
     subscriptionId,
+    subscriptionPath = PATH_SUBSCRIPTIONS,
 }: WfoRelatedSubscriptionsProps) => {
     const [hideTerminatedSubscriptions, setHideTerminatedSubscriptions] =
         useState<boolean>(true);
@@ -109,7 +111,7 @@ export const WfoRelatedSubscriptions = ({
             renderData: (value, record) => (
                 <Link
                     target="_blank"
-                    href={`${PATH_SUBSCRIPTIONS}/${record.subscriptionId}`}
+                    href={`${subscriptionPath}/${record.subscriptionId}`}
                 >
                     {value}
                 </Link>

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from 'next-intl';
 
 import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 
-import { WfoLoading, WfoTextAnchor } from '@/components';
+import { PATH_SUBSCRIPTIONS, WfoLoading, WfoTextAnchor } from '@/components';
 import { TreeContext, TreeContextType } from '@/contexts';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import {
@@ -24,11 +24,13 @@ import { getProductBlockTitle } from './utils';
 interface WfoSubscriptionDetailTreeProps {
     productBlockInstances: ProductBlockInstance[];
     subscriptionId: Subscription['subscriptionId'];
+    subscriptionPath?: string;
 }
 
 export const WfoSubscriptionDetailTree = ({
     productBlockInstances,
     subscriptionId,
+    subscriptionPath = PATH_SUBSCRIPTIONS,
 }: WfoSubscriptionDetailTreeProps) => {
     const t = useTranslations('subscriptions.detail');
     const { theme } = useOrchestratorTheme();
@@ -210,6 +212,7 @@ export const WfoSubscriptionDetailTree = ({
                                     key={id}
                                     subscriptionId={subscriptionId}
                                     productBlock={block}
+                                    subscriptionPath={subscriptionPath}
                                 />
                             );
                         })}

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx

@@ -13,11 +13,7 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import {
-    PATH_SUBSCRIPTIONS,
-    WfoProductBlockKeyValueRow,
-    WfoValueCell,
-} from '@/components';
+import { WfoProductBlockKeyValueRow, WfoValueCell } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { ProductBlockInstance, Subscription } from '@/types';
 import { getFirstUuidPart } from '@/utils';
@@ -32,13 +28,15 @@ import { getStyles } from './styles';
 interface WfoSubscriptionProductBlockProps {
     productBlock: ProductBlockInstance;
     subscriptionId: Subscription['subscriptionId'];
+    subscriptionPath: string;
 }
 
 export const HIDDEN_KEYS = ['title', 'name', 'label', 'inUseByIds'];
 
 export const WfoSubscriptionProductBlock = ({
     productBlock,
     subscriptionId,
+    subscriptionPath,
 }: WfoSubscriptionProductBlockProps) => {
     const t = useTranslations('subscriptions.detail');
     const {
@@ -139,7 +137,7 @@ export const WfoSubscriptionProductBlock = ({
                                             value={
                                                 <>
                                                     <a
-                                                        href={`${PATH_SUBSCRIPTIONS}/${ownerSubscriptionId}`}
+                                                        href={`${subscriptionPath}/${ownerSubscriptionId}`}
                                                         target="_blank"
                                                     >
                                                         {