536 change tree icon default expanded (#636)

* Use title for root PB and standard icon

* by default open de root PB in a card

* make subscriptionInstanceId smaller font see #456

* Open subscriptions in new tab - see #456

* replace the size s statement

* Create shaggy-squids-kick.md

* replace the size s statement

Author: wouterhhuisman

.changeset/shaggy-squids-kick.md

@@ -0,0 +1,10 @@
+---
+'wfo-ui-surf': patch
+'wfo-ui': patch
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+-   expand the root product block card by default
+-   change tree icon of root product block
+-   open other subscription detail page opens in new tab
+-   use title of root product block in tree like the other product blocks

apps/wfo-ui-surf/components/WfoServiceTicketDetailPage/WfoImpactedCustomersTable.tsx

@@ -68,7 +68,7 @@ export const WfoImpactedCustomersTable = ({
                 name: t('customers'),
                 field: 'customer',
                 render: (customer) => (
-                    <EuiText size={'s'}>
+                    <EuiText size="s">
                         <b>{customer.customer_abbrev}</b>
                     </EuiText>
                 ),

apps/wfo-ui-surf/components/WfoServiceTicketsList/WfoServiceTicketsList.tsx

@@ -137,7 +137,7 @@ export const WfoServiceTicketsList = ({
                         <b>{formatDate(date)}</b>
                     </EuiText>
                 ) : (
-                    <EuiText size={'s'}>{formatDate(date)}</EuiText>
+                    <EuiText size="s">{formatDate(date)}</EuiText>
                 );
             },
         },

packages/orchestrator-ui-components/src/components/WfoSettings/WfoModifySettings.tsx

@@ -25,7 +25,7 @@ export const WfoModifySettings: FC<WfoModifySettingsProps> = ({
             paddingSize="l"
             css={{ width: '50%' }}
         >
-            <EuiText size={'s'}>
+            <EuiText size="s">
                 <h4>{t('modifyEngine')}</h4>
             </EuiText>
             <EuiSpacer size="m"></EuiSpacer>

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

@@ -86,7 +86,10 @@ export const WfoRelatedSubscriptions = ({
             field: 'description',
             name: t('description'),
             render: (value, record) => (
-                <Link href={`/subscriptions/${record.subscriptionId}`}>
+                <Link
+                    target="_blank"
+                    href={`/subscriptions/${record.subscriptionId}`}
+                >
                     {value}
                 </Link>
             ),

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

@@ -12,10 +12,7 @@ import { getTokenName } from '../../utils/getTokenName';
 import { WfoTree } from '../WfoTree';
 import { getWfoTreeNodeDepth } from '../WfoTree';
 import { WfoSubscriptionProductBlock } from './WfoSubscriptionProductBlock';
-import {
-    getFieldFromProductBlockInstanceValues,
-    getProductBlockTitle,
-} from './utils';
+import { getProductBlockTitle } from './utils';
 
 interface WfoSubscriptionDetailTreeProps {
     productBlockInstances: ProductBlockInstance[];
@@ -47,9 +44,8 @@ export const WfoSubscriptionDetailTree = ({
         // Does this node have a parent?
         if (shallowCopy.parent === null) {
             // Doesn't look like it, so this node is the root of the tree
-            shallowCopy.label = getFieldFromProductBlockInstanceValues(
+            shallowCopy.label = getProductBlockTitle(
                 shallowCopy.productBlockInstanceValues,
-                'name',
             );
             shallowCopy.callback = () => setSelectedTreeNode(shallowCopy.id);
             depthList.push(0); // First id is on root

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

@@ -84,7 +84,7 @@ export const WfoSubscriptionProductBlock = ({
                                 )}
                             </h3>
                         </EuiText>
-                        <EuiText>{`${t(
+                        <EuiText size="s">{`${t(
                             'subscriptionInstanceId',
                         )}: ${subscriptionInstanceId}`}</EuiText>
                     </EuiFlexItem>
@@ -131,6 +131,7 @@ export const WfoSubscriptionProductBlock = ({
                                             ) : (
                                                 <a
                                                     href={`${PATH_SUBSCRIPTIONS}/${ownerSubscriptionId}`}
+                                                    target="_blank"
                                                 >
                                                     {ownerSubscriptionId}
                                                 </a>

packages/orchestrator-ui-components/src/components/WfoTree/WfoTreeNode.tsx

@@ -44,10 +44,7 @@ export const WfoTreeNode: FC<WfoTreeNodeProps> = ({
     const expanded = expandedIds.includes(item.id);
     const selected = selectedIds.includes(item.id);
 
-    let expandIcon = expanded ? 'arrowDown' : 'arrowRight';
-    if (item.id === 0) {
-        expandIcon = expanded ? 'folderOpen' : 'folderClosed';
-    }
+    const expandIcon = expanded ? 'arrowDown' : 'arrowRight';
 
     return (
         <div style={{ paddingLeft: `${level * parseInt(theme.size.m)}px` }}>

packages/orchestrator-ui-components/src/contexts/TreeContext.tsx

@@ -23,7 +23,7 @@ export type TreeProviderProps = {
 
 export const TreeProvider: React.FC<TreeProviderProps> = ({ children }) => {
     const [depths, setDepths] = React.useState<number[]>([]);
-    const [selectedIds, setSelectedIds] = React.useState<number[]>([]);
+    const [selectedIds, setSelectedIds] = React.useState<number[]>([0]);
     const [expandedIds, setExpandedIds] = React.useState<number[]>([0]);
 
     const toggleSelectedId = (id: number) => {