From 6f186a6d1b2dd383f43ea7d37baeb91adab474f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrik=20Matias=CC=8Cko?= <patrik.matiasko@gmail.com>
Date: Wed, 24 Apr 2024 14:10:12 +0200
Subject: [PATCH] LinkedHubs - visual update after review

---
 package.json                                  |  1 +
 src/common/hooks/{index.js => index.ts}       |  1 +
 src/common/hooks/use-form.ts                  |  8 +--
 src/common/hooks/useDocumentTitle.ts          | 29 +++++++++++
 .../Atomic/PageLayout/PageLayout.tsx          | 13 +++--
 src/components/Atomic/_theme/siemens.ts       |  6 +++
 src/components/Atomic/_theme/template.ts      |  6 +++
 src/components/Organisms/CaPool/CaPool.tsx    | 21 ++++++--
 .../FullPageWizard/Components.styles.ts       | 26 ++++++++++
 .../Templates/FullPageWizard/Components.tsx   | 52 ++++++++++++++++++-
 .../FullPageWizard/FullPageWizard.tsx         | 10 ++--
 .../FullPageWizard/FullPageWizard.types.ts    |  3 +-
 .../FullPageWizardCommon.styles.ts            |  2 +-
 13 files changed, 155 insertions(+), 23 deletions(-)
 rename src/common/hooks/{index.js => index.ts} (92%)
 create mode 100644 src/common/hooks/useDocumentTitle.ts

diff --git a/package.json b/package.json
index 8429d702..6e0249ea 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,7 @@
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^4.9.5",
     "units-converter": "^1.0.3",
+    "usehooks-ts": "^3.1.0",
     "vm-browserify": "^1.1.2"
   },
   "devDependencies": {
diff --git a/src/common/hooks/index.js b/src/common/hooks/index.ts
similarity index 92%
rename from src/common/hooks/index.js
rename to src/common/hooks/index.ts
index 2364a1b6..cbd24b60 100644
--- a/src/common/hooks/index.js
+++ b/src/common/hooks/index.ts
@@ -11,3 +11,4 @@ export * from './useWindowDimensions'
 export * from './useDebounce'
 export * from './usePersistentState'
 export * from './useCaData'
+export * from './useDocumentTitle'
diff --git a/src/common/hooks/use-form.ts b/src/common/hooks/use-form.ts
index a40043b7..b7d59162 100644
--- a/src/common/hooks/use-form.ts
+++ b/src/common/hooks/use-form.ts
@@ -3,9 +3,9 @@ import { useForm as useFormLib } from 'react-hook-form'
 import { useCallback, useContext, useEffect } from 'react'
 import isFunction from 'lodash/isFunction'
 import cloneDeep from 'lodash/cloneDeep'
+import set from 'lodash/set'
 import { zodResolver } from '@hookform/resolvers/zod'
 
-import { setProperty } from '../../components/Atomic/_utils/utils'
 import { FormContext } from '../context/FormContext'
 
 type UseFormOptionsType = {
@@ -42,10 +42,10 @@ export function useForm<TFieldValues extends FieldValues = FieldValues>(options:
 
             if (asArray) {
                 // @ts-ignore
-                copy[field] = fieldValue
-                updateData(copy)
+
+                updateData(set(copy, field, fieldValue))
             } else {
-                updateData(setProperty(copy, field, fieldValue))
+                updateData(set(copy, field, fieldValue))
             }
         },
         [data, updateData]
diff --git a/src/common/hooks/useDocumentTitle.ts b/src/common/hooks/useDocumentTitle.ts
new file mode 100644
index 00000000..215c765a
--- /dev/null
+++ b/src/common/hooks/useDocumentTitle.ts
@@ -0,0 +1,29 @@
+import { useRef } from 'react'
+
+import { useIsomorphicLayoutEffect, useUnmount } from 'usehooks-ts'
+
+type UseDocumentTitleOptions = {
+    preserveTitleOnUnmount?: boolean
+}
+
+export function useDocumentTitle(title: string, options: UseDocumentTitleOptions = {}): void {
+    const { preserveTitleOnUnmount = true } = options
+    const defaultTitle = useRef<string | null>(null)
+
+    useIsomorphicLayoutEffect(() => {
+        defaultTitle.current = window.document.title
+    }, [])
+
+    useIsomorphicLayoutEffect(() => {
+        if (title) {
+            const titleSuffix = document.body.getAttribute('data-plgd-title-suffix')
+            window.document.title = titleSuffix ? `${title} | ${titleSuffix}` : title
+        }
+    }, [title])
+
+    useUnmount(() => {
+        if (!preserveTitleOnUnmount && defaultTitle.current) {
+            window.document.title = defaultTitle.current
+        }
+    })
+}
diff --git a/src/components/Atomic/PageLayout/PageLayout.tsx b/src/components/Atomic/PageLayout/PageLayout.tsx
index 98922258..62f2625e 100644
--- a/src/components/Atomic/PageLayout/PageLayout.tsx
+++ b/src/components/Atomic/PageLayout/PageLayout.tsx
@@ -1,19 +1,22 @@
 import React, { forwardRef } from 'react'
-import { Helmet } from 'react-helmet'
 
 import { Props, defaultProps } from './PageLayout.types'
 import * as styles from './PageLayout.styles'
 import Headline from '../Headline'
 import PageLoader from '../PageLoader'
 import ConditionalWrapper from '../ConditionalWrapper'
+import { useDocumentTitle } from '../../../common/hooks'
 
 const PageLayout = forwardRef<HTMLDivElement, Props>((props, ref) => {
-    const { children, dataTestId, headlineStatusTag, title, header, headerBorder, footer, loading, collapsed, xPadding } = { ...defaultProps, ...props }
+    const { children, dataTestId, headlineStatusTag, title, header, headerBorder, footer, loading, collapsed, xPadding } = {
+        ...defaultProps,
+        ...props,
+    }
+
+    useDocumentTitle(title || '')
+
     return (
         <div css={styles.pageLayout} ref={ref}>
-            <Helmet>
-                <title>{title}</title>
-            </Helmet>
             <div css={styles.top}>
                 <PageLoader className='auth-loader' collapsed={collapsed} loading={loading} />
                 <div css={[styles.header, styles.padding, headerBorder && styles.headerBorder]}>
diff --git a/src/components/Atomic/_theme/siemens.ts b/src/components/Atomic/_theme/siemens.ts
index 6557c799..382c05b4 100644
--- a/src/components/Atomic/_theme/siemens.ts
+++ b/src/components/Atomic/_theme/siemens.ts
@@ -517,6 +517,12 @@ const theme = {
             description: {
                 color: colorsSiemens.neutral500,
             },
+            expander: {
+                color: colorsSiemens.neutral500,
+                hover: {
+                    color: colorsSiemens.primary,
+                },
+            },
             groupHeadline: {
                 color: colorsSiemens.primary,
             },
diff --git a/src/components/Atomic/_theme/template.ts b/src/components/Atomic/_theme/template.ts
index 48d93e0e..148ce0b5 100644
--- a/src/components/Atomic/_theme/template.ts
+++ b/src/components/Atomic/_theme/template.ts
@@ -530,6 +530,12 @@ export const getThemeTemplate = (colors: any, logoProps: LogoType) => ({
             description: {
                 color: colors.neutral900,
             },
+            expander: {
+                color: colors.neutral500,
+                hover: {
+                    color: colors.primary,
+                },
+            },
             groupHeadline: {
                 color: colors.primaryDarken,
             },
diff --git a/src/components/Organisms/CaPool/CaPool.tsx b/src/components/Organisms/CaPool/CaPool.tsx
index 41a1f95d..57ff673d 100644
--- a/src/components/Organisms/CaPool/CaPool.tsx
+++ b/src/components/Organisms/CaPool/CaPool.tsx
@@ -24,11 +24,22 @@ const CaPool: FC<Props> = (props) => {
             {
                 Header: '',
                 accessor: 'name',
-                Cell: ({ value }: { value: string | number }) => (
-                    <span className='no-wrap-text' style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                        {typeof value === 'string' ? value.replace(CA_BASE64_PREFIX, '') : value}
-                    </span>
-                ),
+                Cell: ({ value }: { value: string | number }) => {
+                    if (isFunction(onView)) {
+                        return (
+                            <a href='#' onClick={(e) => onView(value)}>
+                                <span className='no-wrap-text' style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                    {value}
+                                </span>
+                            </a>
+                        )
+                    }
+                    return (
+                        <span className='no-wrap-text' style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                            {typeof value === 'string' ? value.replace(CA_BASE64_PREFIX, '') : value}
+                        </span>
+                    )
+                },
                 style: { maxWidth: '300px' },
             },
             {
diff --git a/src/components/Templates/FullPageWizard/Components.styles.ts b/src/components/Templates/FullPageWizard/Components.styles.ts
index e5d41acc..6eaf3c39 100644
--- a/src/components/Templates/FullPageWizard/Components.styles.ts
+++ b/src/components/Templates/FullPageWizard/Components.styles.ts
@@ -52,5 +52,31 @@ export const groupHeadline = (theme: ThemeType) => css`
     font-weight: 700;
     line-height: 150%;
     letter-spacing: -0.5px;
+`
+
+export const groupHeadlineMargin = css`
     margin: 32px 0 16px 0;
 `
+
+export const flex = css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`
+
+export const expander = (theme: ThemeType) => css`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: ${getTheme(theme, `FullPageWizard.expander.color`)};
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+        color: ${getTheme(theme, `FullPageWizard.expander.hover.color`)};
+    }
+`
+
+export const expanderMargin = css`
+    margin-top: 20px;
+`
diff --git a/src/components/Templates/FullPageWizard/Components.tsx b/src/components/Templates/FullPageWizard/Components.tsx
index dc7f75fd..1f652796 100644
--- a/src/components/Templates/FullPageWizard/Components.tsx
+++ b/src/components/Templates/FullPageWizard/Components.tsx
@@ -1,5 +1,11 @@
-import { FC } from 'react'
+import React, { FC, useState } from 'react'
 import * as styles from './Components.styles'
+import ConditionalWrapper from '../../Atomic/ConditionalWrapper'
+import Tooltip from '../../Atomic/Tooltip'
+import IconQuestion from '../../Atomic/Icon/components/IconQuestion'
+import { convertSize } from '../../Atomic/Icon'
+import ShowAnimate from '../../Atomic/ShowAnimate'
+import IconSettings from '../../Atomic/Icon/components/IconSettings'
 
 export type DescriptionProps = {
     children: string
@@ -18,6 +24,18 @@ export type HeadlineProps = {
 export type GroupHeadlineProps = {
     children: string
     noBorder?: boolean
+    tooltipText?: string
+    tooltipMaxWidth?: number
+}
+
+export type ToggleConfigurationProps = {
+    defaultShow?: boolean
+    children: React.ReactNode | React.ReactNode[]
+    i18n: {
+        hide: string
+        show: string
+    }
+    margin?: boolean
 }
 
 export const Description: FC<DescriptionProps> = (props) => <p css={[styles.description, props.large && styles.descriptionLarge]}>{props.children}</p>
@@ -26,4 +44,34 @@ export const SubHeadline: FC<SubHeadlineProps> = (props) => <h2 css={[styles.sub
 
 export const Headline: FC<HeadlineProps> = (props) => <h1 css={[styles.headline]}>{props.children}</h1>
 
-export const GroupHeadline: FC<GroupHeadlineProps> = (props) => <h3 css={[styles.groupHeadline]}>{props.children}</h3>
+export const GroupHeadline: FC<GroupHeadlineProps> = (props) => (
+    <ConditionalWrapper
+        condition={!!props.tooltipText}
+        wrapper={(children) => (
+            <div css={[styles.flex, styles.groupHeadlineMargin]}>
+                <span>{children}</span>
+                <Tooltip content={props.tooltipText} delay={200} maxWidth={props.tooltipMaxWidth || 300} portalTarget={document.getElementById('modal-root')!}>
+                    <IconQuestion {...convertSize(16)} />
+                </Tooltip>
+            </div>
+        )}
+    >
+        <h3 css={[styles.groupHeadline, !props.tooltipText && styles.groupHeadlineMargin]}>{props.children}</h3>
+    </ConditionalWrapper>
+)
+
+export const ToggleConfiguration: FC<ToggleConfigurationProps> = (props) => {
+    const { i18n, children, margin = true } = props
+    const [show, setShow] = useState(false)
+
+    return (
+        <>
+            <ShowAnimate show={show}>
+                <>{children}</>
+            </ShowAnimate>
+            <div css={[styles.expander, margin && styles.expanderMargin]} onClick={() => setShow(!show)}>
+                <IconSettings /> {show ? i18n.hide : i18n.show}
+            </div>
+        </>
+    )
+}
diff --git a/src/components/Templates/FullPageWizard/FullPageWizard.tsx b/src/components/Templates/FullPageWizard/FullPageWizard.tsx
index 68ece52b..4652b8ab 100644
--- a/src/components/Templates/FullPageWizard/FullPageWizard.tsx
+++ b/src/components/Templates/FullPageWizard/FullPageWizard.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Helmet } from 'react-helmet'
 import { useTheme } from '@emotion/react'
 import isFunction from 'lodash/isFunction'
 
@@ -11,18 +10,18 @@ import IconDone from './assets/IconDone'
 import IconCloseCircle from '../../Atomic/Icon/components/IconCloseCircle'
 import { convertSize } from '../../Atomic/Icon'
 import { ComponentType, Props } from './FullPageWizard.types'
-import { Description, SubHeadline, Headline, GroupHeadline } from './Components'
+import { Description, SubHeadline, Headline, GroupHeadline, ToggleConfiguration } from './Components'
+import { useDocumentTitle } from '../../../common/hooks'
 
 const FullPageWizard: ComponentType<Props> = (props) => {
     const { children, title, i18n, steps, activeStep, onStepChange, onClose, visitedStep } = props
 
     const theme: ThemeType = useTheme()
 
+    useDocumentTitle(title)
+
     return (
         <div css={styles.wizard}>
-            <Helmet>
-                <title>{title}</title>
-            </Helmet>
             <div css={styles.row}>
                 <div css={styles.leftCol}>
                     <div css={styles.leftInner}>
@@ -81,5 +80,6 @@ FullPageWizard.Description = Description
 FullPageWizard.SubHeadline = SubHeadline
 FullPageWizard.Headline = Headline
 FullPageWizard.GroupHeadline = GroupHeadline
+FullPageWizard.ToggleConfiguration = ToggleConfiguration
 
 export default FullPageWizard
diff --git a/src/components/Templates/FullPageWizard/FullPageWizard.types.ts b/src/components/Templates/FullPageWizard/FullPageWizard.types.ts
index c0682fd7..42f78653 100644
--- a/src/components/Templates/FullPageWizard/FullPageWizard.types.ts
+++ b/src/components/Templates/FullPageWizard/FullPageWizard.types.ts
@@ -1,11 +1,12 @@
 import { FC, ReactNode } from 'react'
-import { DescriptionProps, HeadlineProps, SubHeadlineProps, GroupHeadlineProps } from './Components'
+import { DescriptionProps, HeadlineProps, SubHeadlineProps, GroupHeadlineProps, ToggleConfigurationProps } from './Components'
 
 export interface ComponentType<P> extends FC<P> {
     Description: FC<DescriptionProps>
     Headline: FC<HeadlineProps>
     SubHeadline: FC<SubHeadlineProps>
     GroupHeadline: FC<GroupHeadlineProps>
+    ToggleConfiguration: FC<ToggleConfigurationProps>
 }
 
 export type Props = {
diff --git a/src/components/Templates/FullPageWizard/FullPageWizardCommon.styles.ts b/src/components/Templates/FullPageWizard/FullPageWizardCommon.styles.ts
index 25ddad79..4556dc28 100644
--- a/src/components/Templates/FullPageWizard/FullPageWizardCommon.styles.ts
+++ b/src/components/Templates/FullPageWizard/FullPageWizardCommon.styles.ts
@@ -19,7 +19,7 @@ export const description = (theme: ThemeType) => css`
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
-    color: ${get(theme, `colorPalette.neutral900`)};
+    color: ${get(theme, `colorPalette.neutral500`)};
     margin: 0 0 32px 0;
 `