From cdda80a722853b147051a09910ea2531d3032c17 Mon Sep 17 00:00:00 2001
From: Martin Rohrmeier <martin.ra.rohrmeier@bmw.de>
Date: Thu, 23 May 2024 16:01:05 +0200
Subject: [PATCH 1/8] feat(static table): add new vertical table

---
 .../basic/StaticTable/CopyField.tsx           | 40 +++++++++++
 .../basic/StaticTable/EditField.tsx           | 62 +++++++++++++++++
 .../basic/StaticTable/VerticalTableNew.tsx    | 68 +++++++++++++++++++
 src/components/basic/StaticTable/types.ts     |  6 +-
 src/components/index.tsx                      |  3 +
 src/dev/TestApp.tsx                           | 68 +++++++++++++++++++
 6 files changed, 244 insertions(+), 3 deletions(-)
 create mode 100644 src/components/basic/StaticTable/CopyField.tsx
 create mode 100644 src/components/basic/StaticTable/EditField.tsx
 create mode 100644 src/components/basic/StaticTable/VerticalTableNew.tsx
 create mode 100644 src/dev/TestApp.tsx

diff --git a/src/components/basic/StaticTable/CopyField.tsx b/src/components/basic/StaticTable/CopyField.tsx
new file mode 100644
index 00000000..5272fa14
--- /dev/null
+++ b/src/components/basic/StaticTable/CopyField.tsx
@@ -0,0 +1,40 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { Typography } from '@mui/material'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+
+export type CopyFieldType = string | number | boolean
+
+export const CopyField = ({ value }: { value: CopyFieldType }) => {
+  const copyValue = () => {
+    console.log('copy ', value.toString())
+  }
+
+  return (
+    <div onClick={() => copyValue}>
+      <span
+        style={{ cursor: 'pointer', display: 'flex', flexDirection: 'row' }}
+      >
+        <Typography variant="body1">{value}</Typography>
+        <ContentCopyIcon />
+      </span>
+    </div>
+  )
+}
diff --git a/src/components/basic/StaticTable/EditField.tsx b/src/components/basic/StaticTable/EditField.tsx
new file mode 100644
index 00000000..ea925e56
--- /dev/null
+++ b/src/components/basic/StaticTable/EditField.tsx
@@ -0,0 +1,62 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { Typography } from '@mui/material'
+import { useState } from 'react'
+import { Input } from '../../../main'
+import EditIcon from '@mui/icons-material/Edit'
+
+export type EditFieldType = string | number | boolean
+
+export const EditField = ({
+  value,
+  onEdit,
+}: {
+  value: EditFieldType
+  onEdit: (value: EditFieldType) => void
+}) => {
+  const [edit, setEdit] = useState<boolean>(false)
+  const [editValue, setEditValue] = useState<EditFieldType>('')
+
+  const toggleEdit = () => {
+    setEdit(!edit)
+  }
+
+  console.log(editValue)
+
+  return (
+    <div onClick={toggleEdit}>
+      {edit ? (
+        <Input
+          onKeyUp={(event: React.KeyboardEvent) => {
+            setEditValue((event.target as HTMLInputElement).value)
+          }}
+          value={value}
+        />
+      ) : (
+        <span
+          style={{ cursor: 'pointer', display: 'flex', flexDirection: 'row' }}
+        >
+          <Typography variant="body1">{value}</Typography>
+          <EditIcon />
+        </span>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/basic/StaticTable/VerticalTableNew.tsx b/src/components/basic/StaticTable/VerticalTableNew.tsx
new file mode 100644
index 00000000..722fa412
--- /dev/null
+++ b/src/components/basic/StaticTable/VerticalTableNew.tsx
@@ -0,0 +1,68 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { Typography } from '@mui/material'
+import type { TableType } from './types'
+
+export const VerticalTableNew = ({ data }: { data: TableType }) => {
+  return (
+    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+      <thead>
+        <tr>
+          {data.head.map((col, c) => (
+            <th
+              key={JSON.stringify(c)}
+              style={{
+                backgroundColor: '#ecf0f4',
+                textAlign: 'left',
+                padding: '10px 15px',
+              }}
+            >
+              <Typography variant="label3">{col}</Typography>
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.body.map((row, r) => (
+          <tr key={JSON.stringify(r)}>
+            {row.map((col, c) => (
+              <td
+                key={JSON.stringify(c)}
+                style={{
+                  padding: '10px 15px',
+                  borderBottom: '1px solid #f1f1f1',
+                  whiteSpace: 'normal',
+                  wordBreak: 'break-all',
+                  width: '50%',
+                }}
+              >
+                {typeof col === 'string' ? (
+                  <Typography variant="body1">{col}</Typography>
+                ) : (
+                  col
+                )}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/src/components/basic/StaticTable/types.ts b/src/components/basic/StaticTable/types.ts
index 2807b988..7ab3d199 100644
--- a/src/components/basic/StaticTable/types.ts
+++ b/src/components/basic/StaticTable/types.ts
@@ -18,10 +18,10 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import type React from 'react'
+export type TableCellType = string | number | boolean | JSX.Element
 export interface TableType {
-  head: string[]
-  body: string[][] | React.FC[][]
+  head: TableCellType[]
+  body: TableCellType[][]
   edit?: Array<
     Array<{
       icon: boolean
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 197392a9..012c34c0 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -45,6 +45,9 @@ export { SharedThemeProvider } from './basic/SharedThemeProvider'
 export { Tab } from './basic/Tabs/Tab'
 export { TabPanel } from './basic/Tabs/TabPanel'
 export { StaticTable } from './basic/StaticTable'
+export { VerticalTableNew } from './basic/StaticTable/VerticalTableNew'
+export { CopyField } from './basic/StaticTable/CopyField'
+export { EditField } from './basic/StaticTable/EditField'
 export { Table, StatusTag } from './basic/Table'
 export { PageLoadingTable } from './basic/Table/PageLoadingTable'
 export { Tabs } from './basic/Tabs/Tabs'
diff --git a/src/dev/TestApp.tsx b/src/dev/TestApp.tsx
new file mode 100644
index 00000000..c64e3867
--- /dev/null
+++ b/src/dev/TestApp.tsx
@@ -0,0 +1,68 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import {
+  CopyField,
+  Datepicker,
+  EditField,
+  Typography,
+  VerticalTableNew,
+} from '../components'
+
+const links = ['/somepage', 'somelink']
+
+const createLinkList = (links: string[]) => (
+  <ul>
+    {links.map((link, i) => (
+      <li key={i}>
+        <Typography>
+          <a href={link}>{link}</a>
+        </Typography>
+      </li>
+    ))}
+  </ul>
+)
+
+const data = {
+  head: ['heading 1', 'heading 2'],
+  body: [
+    ['row1 col1', 'row1 col2'],
+    [
+      <Datepicker
+        key="1"
+        label=""
+        placeholder=""
+        locale="en"
+        readOnly={false}
+        onChangeItem={(value) => {}}
+      />,
+      createLinkList(links),
+    ],
+    ['row3 col1', <EditField key="2" value="row3 col2" onEdit={() => {}} />],
+    [<CopyField key="3" value="row4 col2" />, 'row4 col1'],
+  ],
+}
+
+export default function TestApp() {
+  return (
+    <main style={{ padding: 80 }}>
+      <VerticalTableNew data={data} />
+    </main>
+  )
+}

From 5df0ef7580c61c07f08ef15adca664c2306b3a77 Mon Sep 17 00:00:00 2001
From: nidhigarg-bmw <nidhi.garg@partner.bmw.in>
Date: Fri, 24 May 2024 16:34:26 +0530
Subject: [PATCH 2/8] feat(vertical table): add new vertical table

---
 CHANGELOG.md                                  |   4 +
 package.json                                  |   4 +-
 .../basic/StaticTable/EditField.tsx           | 101 +++++++++++++++---
 .../basic/StaticTable/VerticalTableNew.tsx    |  28 ++++-
 src/components/basic/StaticTable/types.ts     |   7 +-
 src/components/index.tsx                      |   1 +
 src/dev.tsx                                   |   4 +-
 src/dev/TestApp.tsx                           |  67 ++++++++----
 8 files changed, 170 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 108b4951..50ba6933 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.15
+
+- Add new Vertical Table for code optimization
+
 ## 3.0.14
 
 - Rework year in file header
diff --git a/package.json b/package.json
index cc050cfe..c8367849 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@catena-x/portal-shared-components",
-  "version": "3.0.14",
+  "name": "@nidhi.garg/portal-shared-components",
+  "version": "3.0.18",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",
diff --git a/src/components/basic/StaticTable/EditField.tsx b/src/components/basic/StaticTable/EditField.tsx
index ea925e56..c7f4c3ee 100644
--- a/src/components/basic/StaticTable/EditField.tsx
+++ b/src/components/basic/StaticTable/EditField.tsx
@@ -19,42 +19,109 @@
 
 import { Typography } from '@mui/material'
 import { useState } from 'react'
-import { Input } from '../../../main'
 import EditIcon from '@mui/icons-material/Edit'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import CloseIcon from '@mui/icons-material/Close'
+import { Input } from '../../../main'
+import { Tooltips } from '../ToolTips'
 
 export type EditFieldType = string | number | boolean
 
 export const EditField = ({
   value,
-  onEdit,
+  handleEdit,
+  isValid,
+  errorMessage
 }: {
   value: EditFieldType
-  onEdit: (value: EditFieldType) => void
+  handleEdit: (value: EditFieldType) => void | Promise<void>
+  isValid?: (value: string) => unknown
+  errorMessage?: string
 }) => {
-  const [edit, setEdit] = useState<boolean>(false)
-  const [editValue, setEditValue] = useState<EditFieldType>('')
 
-  const toggleEdit = () => {
-    setEdit(!edit)
+  const [inputField, setInputField] = useState(false)
+  const [inputValue, setInputValue] = useState('')
+  const [inputErrorMessage, setInputErrorMessage] = useState('')
+
+  const handleEditFn = (value: string) => {
+    setInputErrorMessage('')
+    setInputValue(value ?? '')
+    setInputField(true)
   }
 
-  console.log(editValue)
+  const addInputValue = (value: string) => {
+    setInputValue(value)
+    isValid &&
+      setInputErrorMessage(
+        !isValid(value.trim()) ? errorMessage ?? '' : ''
+      )
+  }
 
-  return (
-    <div onClick={toggleEdit}>
-      {edit ? (
-        <Input
-          onKeyUp={(event: React.KeyboardEvent) => {
-            setEditValue((event.target as HTMLInputElement).value)
+  const renderInputField = () => {
+    return (
+      <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+        <div style={{ width: '100%' }}>
+          <Input
+            onChange={(e) => {
+              addInputValue(e.target.value)
+            }}
+            onKeyPress={(event) => {
+              if (event.key === 'Enter' && !inputErrorMessage) {
+                setInputField(false)
+                if (handleEdit) handleEdit(inputValue)
+              }
+            }}
+            onClick={(e) => {
+              e.stopPropagation()
+            }}
+            value={inputValue}
+          />
+        </div>
+        {inputErrorMessage && (
+          <Tooltips
+            color="dark"
+            tooltipPlacement="bottom-start"
+            tooltipText={inputErrorMessage}
+          >
+            <span>
+              <ErrorOutlineIcon sx={{ marginTop: '35px' }} color="error" />
+            </span>
+          </Tooltips>
+        )}
+        <CloseIcon
+          onClick={() => {
+            setInputField(false)
           }}
-          value={value}
+          sx={{ marginTop: '25px' }}
         />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {inputField ? (
+        renderInputField()
       ) : (
         <span
           style={{ cursor: 'pointer', display: 'flex', flexDirection: 'row' }}
         >
-          <Typography variant="body1">{value}</Typography>
-          <EditIcon />
+          <Typography variant="body3">{value}</Typography>
+          <span style={{ marginLeft: 'auto' }}>
+            <EditIcon
+              onClick={() => {
+                handleEditFn(value as string)
+              }}
+              sx={{
+                fontSize: '18px',
+                color: '#888888',
+                cursor: 'pointer',
+                '&:hover': {
+                  color: '#0088CC',
+                },
+              }}
+            />
+          </span>
         </span>
       )}
     </div>
diff --git a/src/components/basic/StaticTable/VerticalTableNew.tsx b/src/components/basic/StaticTable/VerticalTableNew.tsx
index 722fa412..19bd0828 100644
--- a/src/components/basic/StaticTable/VerticalTableNew.tsx
+++ b/src/components/basic/StaticTable/VerticalTableNew.tsx
@@ -18,9 +18,31 @@
  ********************************************************************************/
 
 import { Typography } from '@mui/material'
-import type { TableType } from './types'
 
-export const VerticalTableNew = ({ data }: { data: TableType }) => {
+export type TableCellType = string | number | boolean | JSX.Element
+export interface VerticalTableType {
+  head: TableCellType[]
+  body: TableCellType[][]
+  edit?: Array<
+    Array<{
+      icon: boolean
+      copyValue?: string
+      inputValue?: string
+      clickableLink?: string
+      isValid?: (value: string) => unknown
+      errorMessage?: string
+    }>
+  >
+  copy?: Array<
+    Array<{
+      icon: boolean
+      copyValue?: string
+    }>
+  >
+}
+
+
+export const VerticalTableNew = ({ data }: { data: VerticalTableType }) => {
   return (
     <table style={{ width: '100%', borderCollapse: 'collapse' }}>
       <thead>
@@ -54,7 +76,7 @@ export const VerticalTableNew = ({ data }: { data: TableType }) => {
                 }}
               >
                 {typeof col === 'string' ? (
-                  <Typography variant="body1">{col}</Typography>
+                  <Typography variant="body3">{col}</Typography>
                 ) : (
                   col
                 )}
diff --git a/src/components/basic/StaticTable/types.ts b/src/components/basic/StaticTable/types.ts
index 7ab3d199..e637ef57 100644
--- a/src/components/basic/StaticTable/types.ts
+++ b/src/components/basic/StaticTable/types.ts
@@ -18,10 +18,11 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-export type TableCellType = string | number | boolean | JSX.Element
+import React from "react"
+
 export interface TableType {
-  head: TableCellType[]
-  body: TableCellType[][]
+  head: string[]
+  body: string[][] | React.FC[][]
   edit?: Array<
     Array<{
       icon: boolean
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 012c34c0..db91547b 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -114,6 +114,7 @@ export type { CardItems } from './content/Cards'
 export type { NavigationProps } from './content/Navigation'
 export type { PageNotificationsProps } from './basic/Notifications/PageNotification'
 export type { TableType } from './basic/StaticTable/types'
+export type { VerticalTableType, TableCellType } from './basic/StaticTable/VerticalTableNew'
 export type { ImageType } from './basic/ImageGallery/types'
 export type { DateType } from './basic/Datepicker'
 export { StatusVariants } from './content/Cards/CardChip'
diff --git a/src/dev.tsx b/src/dev.tsx
index 384873cf..16d7b6d5 100644
--- a/src/dev.tsx
+++ b/src/dev.tsx
@@ -19,14 +19,14 @@
 
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './dev/App.tsx'
+import TestApp from './dev/TestApp.tsx'
 import { SharedThemeProvider } from './main.ts'
 
 // eslint-disable-next-line
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <SharedThemeProvider>
-      <App />
+      <TestApp />
     </SharedThemeProvider>
   </React.StrictMode>
 )
diff --git a/src/dev/TestApp.tsx b/src/dev/TestApp.tsx
index c64e3867..5fe5f49b 100644
--- a/src/dev/TestApp.tsx
+++ b/src/dev/TestApp.tsx
@@ -18,44 +18,73 @@
  ********************************************************************************/
 
 import {
-  CopyField,
-  Datepicker,
   EditField,
   Typography,
   VerticalTableNew,
+  Tooltips
 } from '../components'
+import { Link } from '@mui/material'
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
 
 const links = ['/somepage', 'somelink']
 
 const createLinkList = (links: string[]) => (
-  <ul>
-    {links.map((link, i) => (
-      <li key={i}>
-        <Typography>
-          <a href={link}>{link}</a>
+  <>
+    {links.map((link) => (
+      <Link
+        target="_blank"
+        href={link}
+      >
+        <Typography
+          variant="body3"
+          sx={{
+            color: '#0088CC',
+            cursor: 'pointer',
+          }}
+        >
+          {link}
         </Typography>
-      </li>
+      </Link>
     ))}
-  </ul>
+  </>
 )
 
+const renderTooltipText = (value: string, tooltipText: string) => {
+  return (
+    <span style={{ display: 'flex', flexDirection: 'row' }}>
+      <Typography variant="body3">{value}</Typography>
+      <Tooltips
+        color="dark"
+        tooltipPlacement="bottom-start"
+        tooltipText={tooltipText}
+      >
+        <HelpOutlineIcon
+          sx={{
+            width: '2em',
+            fontSize: '19px',
+            color: '#888888',
+            cursor: 'pointer',
+            paddingTop: '2px',
+            '&:hover': {
+              color: '#0088CC',
+            },
+          }}
+        />
+      </Tooltips>
+    </span>
+  )
+}
+
 const data = {
   head: ['heading 1', 'heading 2'],
   body: [
     ['row1 col1', 'row1 col2'],
     [
-      <Datepicker
-        key="1"
-        label=""
-        placeholder=""
-        locale="en"
-        readOnly={false}
-        onChangeItem={(value) => {}}
-      />,
+      'row1 col1',
       createLinkList(links),
     ],
-    ['row3 col1', <EditField key="2" value="row3 col2" onEdit={() => {}} />],
-    [<CopyField key="3" value="row4 col2" />, 'row4 col1'],
+    [renderTooltipText('row1 col1', 'help tooltiptext'), <EditField key="2" value="row3 col2" isValid={() => { console.log('isvalid') }} handleEdit={() => { console.log('edit fn') }} />],
+    ['row4 col2', 'row4 col1'],
   ],
 }
 

From b4e7e07dfc4b9de2647c7e249f527ead5284fe93 Mon Sep 17 00:00:00 2001
From: nidhigarg-bmw <nidhi.garg@partner.bmw.in>
Date: Fri, 24 May 2024 16:34:51 +0530
Subject: [PATCH 3/8] feat(vertical table): update package

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c8367849..d81ffc43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nidhi.garg/portal-shared-components",
-  "version": "3.0.18",
+  "version": "3.0.15",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

From c8eb434089b22d09c741156d273bc542f89ebf27 Mon Sep 17 00:00:00 2001
From: nidhigarg-bmw <nidhi.garg@partner.bmw.in>
Date: Fri, 24 May 2024 16:47:35 +0530
Subject: [PATCH 4/8] feat(vertical table): fix code smell

---
 .../basic/StaticTable/CopyField.tsx           | 40 -------------------
 .../basic/StaticTable/VerticalTableNew.tsx    | 16 ++++----
 src/dev.tsx                                   |  4 +-
 src/dev/TestApp.tsx                           |  1 +
 4 files changed, 11 insertions(+), 50 deletions(-)
 delete mode 100644 src/components/basic/StaticTable/CopyField.tsx

diff --git a/src/components/basic/StaticTable/CopyField.tsx b/src/components/basic/StaticTable/CopyField.tsx
deleted file mode 100644
index 5272fa14..00000000
--- a/src/components/basic/StaticTable/CopyField.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/********************************************************************************
- * Copyright (c) 2024 Contributors to the Eclipse Foundation
- *
- * See the NOTICE file(s) distributed with this work for additional
- * information regarding copyright ownership.
- *
- * This program and the accompanying materials are made available under the
- * terms of the Apache License, Version 2.0 which is available at
- * https://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- ********************************************************************************/
-
-import { Typography } from '@mui/material'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy'
-
-export type CopyFieldType = string | number | boolean
-
-export const CopyField = ({ value }: { value: CopyFieldType }) => {
-  const copyValue = () => {
-    console.log('copy ', value.toString())
-  }
-
-  return (
-    <div onClick={() => copyValue}>
-      <span
-        style={{ cursor: 'pointer', display: 'flex', flexDirection: 'row' }}
-      >
-        <Typography variant="body1">{value}</Typography>
-        <ContentCopyIcon />
-      </span>
-    </div>
-  )
-}
diff --git a/src/components/basic/StaticTable/VerticalTableNew.tsx b/src/components/basic/StaticTable/VerticalTableNew.tsx
index 19bd0828..b8f82653 100644
--- a/src/components/basic/StaticTable/VerticalTableNew.tsx
+++ b/src/components/basic/StaticTable/VerticalTableNew.tsx
@@ -44,17 +44,17 @@ export interface VerticalTableType {
 
 export const VerticalTableNew = ({ data }: { data: VerticalTableType }) => {
   return (
-    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+    <table style={{borderCollapse: 'collapse',  width: '100%'}}>
       <thead>
         <tr>
           {data.head.map((col, c) => (
             <th
-              key={JSON.stringify(c)}
               style={{
                 backgroundColor: '#ecf0f4',
-                textAlign: 'left',
                 padding: '10px 15px',
+                textAlign: 'left',
               }}
+              key={JSON.stringify(c)}
             >
               <Typography variant="label3">{col}</Typography>
             </th>
@@ -62,17 +62,17 @@ export const VerticalTableNew = ({ data }: { data: VerticalTableType }) => {
         </tr>
       </thead>
       <tbody>
-        {data.body.map((row, r) => (
-          <tr key={JSON.stringify(r)}>
-            {row.map((col, c) => (
+        {data.body.map((row, rIndex) => (
+          <tr key={JSON.stringify(rIndex)}>
+            {row.map((col, cindex) => (
               <td
-                key={JSON.stringify(c)}
+                key={JSON.stringify(cindex)}
                 style={{
+                  width: '50%',
                   padding: '10px 15px',
                   borderBottom: '1px solid #f1f1f1',
                   whiteSpace: 'normal',
                   wordBreak: 'break-all',
-                  width: '50%',
                 }}
               >
                 {typeof col === 'string' ? (
diff --git a/src/dev.tsx b/src/dev.tsx
index 16d7b6d5..384873cf 100644
--- a/src/dev.tsx
+++ b/src/dev.tsx
@@ -19,14 +19,14 @@
 
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import TestApp from './dev/TestApp.tsx'
+import App from './dev/App.tsx'
 import { SharedThemeProvider } from './main.ts'
 
 // eslint-disable-next-line
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <SharedThemeProvider>
-      <TestApp />
+      <App />
     </SharedThemeProvider>
   </React.StrictMode>
 )
diff --git a/src/dev/TestApp.tsx b/src/dev/TestApp.tsx
index 5fe5f49b..9dfa44ae 100644
--- a/src/dev/TestApp.tsx
+++ b/src/dev/TestApp.tsx
@@ -32,6 +32,7 @@ const createLinkList = (links: string[]) => (
   <>
     {links.map((link) => (
       <Link
+        key={link}
         target="_blank"
         href={link}
       >

From af2b05cd1a00d432dbe356f8368545261e3b70aa Mon Sep 17 00:00:00 2001
From: nidhigarg-bmw <nidhi.garg@partner.bmw.in>
Date: Fri, 24 May 2024 16:56:36 +0530
Subject: [PATCH 5/8] feat(vertical table): fix code smell

---
 src/components/basic/StaticTable/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/basic/StaticTable/types.ts b/src/components/basic/StaticTable/types.ts
index e637ef57..697572c1 100644
--- a/src/components/basic/StaticTable/types.ts
+++ b/src/components/basic/StaticTable/types.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import React from "react"
+import type React from 'react'
 
 export interface TableType {
   head: string[]

From bed59003093691de2880e2d89b3824971e82155e Mon Sep 17 00:00:00 2001
From: nidhigarg-bmw <nidhi.garg@partner.bmw.in>
Date: Fri, 24 May 2024 17:21:02 +0530
Subject: [PATCH 6/8] feat(vertical table): fix code smell errors

---
 .../basic/StaticTable/CopyField.tsx           | 40 +++++++++++++++++++
 .../basic/StaticTable/EditField.tsx           |  6 +--
 src/components/index.tsx                      |  1 -
 3 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/components/basic/StaticTable/CopyField.tsx

diff --git a/src/components/basic/StaticTable/CopyField.tsx b/src/components/basic/StaticTable/CopyField.tsx
new file mode 100644
index 00000000..5272fa14
--- /dev/null
+++ b/src/components/basic/StaticTable/CopyField.tsx
@@ -0,0 +1,40 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { Typography } from '@mui/material'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+
+export type CopyFieldType = string | number | boolean
+
+export const CopyField = ({ value }: { value: CopyFieldType }) => {
+  const copyValue = () => {
+    console.log('copy ', value.toString())
+  }
+
+  return (
+    <div onClick={() => copyValue}>
+      <span
+        style={{ cursor: 'pointer', display: 'flex', flexDirection: 'row' }}
+      >
+        <Typography variant="body1">{value}</Typography>
+        <ContentCopyIcon />
+      </span>
+    </div>
+  )
+}
diff --git a/src/components/basic/StaticTable/EditField.tsx b/src/components/basic/StaticTable/EditField.tsx
index c7f4c3ee..2811a22d 100644
--- a/src/components/basic/StaticTable/EditField.tsx
+++ b/src/components/basic/StaticTable/EditField.tsx
@@ -65,12 +65,12 @@ export const EditField = ({
             onChange={(e) => {
               addInputValue(e.target.value)
             }}
-            onKeyPress={(event) => {
+            onKeyPress={(event) => {void (async() => {
               if (event.key === 'Enter' && !inputErrorMessage) {
                 setInputField(false)
-                if (handleEdit) handleEdit(inputValue)
+                await handleEdit(inputValue)
               }
-            }}
+            })()}}
             onClick={(e) => {
               e.stopPropagation()
             }}
diff --git a/src/components/index.tsx b/src/components/index.tsx
index db91547b..8fceaa56 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -46,7 +46,6 @@ export { Tab } from './basic/Tabs/Tab'
 export { TabPanel } from './basic/Tabs/TabPanel'
 export { StaticTable } from './basic/StaticTable'
 export { VerticalTableNew } from './basic/StaticTable/VerticalTableNew'
-export { CopyField } from './basic/StaticTable/CopyField'
 export { EditField } from './basic/StaticTable/EditField'
 export { Table, StatusTag } from './basic/Table'
 export { PageLoadingTable } from './basic/Table/PageLoadingTable'

From 40a43fcf51026040a69b40d219108dc52d66df49 Mon Sep 17 00:00:00 2001
From: nidhigarg-bmw <nidhi.garg@partner.bmw.in>
Date: Fri, 24 May 2024 17:23:42 +0530
Subject: [PATCH 7/8] feat(vertical table): remove unused file

---
 .../basic/StaticTable/CopyField.tsx           | 40 -------------------
 1 file changed, 40 deletions(-)
 delete mode 100644 src/components/basic/StaticTable/CopyField.tsx

diff --git a/src/components/basic/StaticTable/CopyField.tsx b/src/components/basic/StaticTable/CopyField.tsx
deleted file mode 100644
index 5272fa14..00000000
--- a/src/components/basic/StaticTable/CopyField.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/********************************************************************************
- * Copyright (c) 2024 Contributors to the Eclipse Foundation
- *
- * See the NOTICE file(s) distributed with this work for additional
- * information regarding copyright ownership.
- *
- * This program and the accompanying materials are made available under the
- * terms of the Apache License, Version 2.0 which is available at
- * https://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- ********************************************************************************/
-
-import { Typography } from '@mui/material'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy'
-
-export type CopyFieldType = string | number | boolean
-
-export const CopyField = ({ value }: { value: CopyFieldType }) => {
-  const copyValue = () => {
-    console.log('copy ', value.toString())
-  }
-
-  return (
-    <div onClick={() => copyValue}>
-      <span
-        style={{ cursor: 'pointer', display: 'flex', flexDirection: 'row' }}
-      >
-        <Typography variant="body1">{value}</Typography>
-        <ContentCopyIcon />
-      </span>
-    </div>
-  )
-}

From d1e8945ebea99db49df8e9201c7469b91378c281 Mon Sep 17 00:00:00 2001
From: nidhigarg-bmw <nidhi.garg@partner.bmw.in>
Date: Fri, 24 May 2024 17:54:36 +0530
Subject: [PATCH 8/8] feat(vertical table): remove test file

---
 src/dev/TestApp.tsx | 98 ---------------------------------------------
 1 file changed, 98 deletions(-)
 delete mode 100644 src/dev/TestApp.tsx

diff --git a/src/dev/TestApp.tsx b/src/dev/TestApp.tsx
deleted file mode 100644
index 9dfa44ae..00000000
--- a/src/dev/TestApp.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/********************************************************************************
- * Copyright (c) 2024 Contributors to the Eclipse Foundation
- *
- * See the NOTICE file(s) distributed with this work for additional
- * information regarding copyright ownership.
- *
- * This program and the accompanying materials are made available under the
- * terms of the Apache License, Version 2.0 which is available at
- * https://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- ********************************************************************************/
-
-import {
-  EditField,
-  Typography,
-  VerticalTableNew,
-  Tooltips
-} from '../components'
-import { Link } from '@mui/material'
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
-
-const links = ['/somepage', 'somelink']
-
-const createLinkList = (links: string[]) => (
-  <>
-    {links.map((link) => (
-      <Link
-        key={link}
-        target="_blank"
-        href={link}
-      >
-        <Typography
-          variant="body3"
-          sx={{
-            color: '#0088CC',
-            cursor: 'pointer',
-          }}
-        >
-          {link}
-        </Typography>
-      </Link>
-    ))}
-  </>
-)
-
-const renderTooltipText = (value: string, tooltipText: string) => {
-  return (
-    <span style={{ display: 'flex', flexDirection: 'row' }}>
-      <Typography variant="body3">{value}</Typography>
-      <Tooltips
-        color="dark"
-        tooltipPlacement="bottom-start"
-        tooltipText={tooltipText}
-      >
-        <HelpOutlineIcon
-          sx={{
-            width: '2em',
-            fontSize: '19px',
-            color: '#888888',
-            cursor: 'pointer',
-            paddingTop: '2px',
-            '&:hover': {
-              color: '#0088CC',
-            },
-          }}
-        />
-      </Tooltips>
-    </span>
-  )
-}
-
-const data = {
-  head: ['heading 1', 'heading 2'],
-  body: [
-    ['row1 col1', 'row1 col2'],
-    [
-      'row1 col1',
-      createLinkList(links),
-    ],
-    [renderTooltipText('row1 col1', 'help tooltiptext'), <EditField key="2" value="row3 col2" isValid={() => { console.log('isvalid') }} handleEdit={() => { console.log('edit fn') }} />],
-    ['row4 col2', 'row4 col1'],
-  ],
-}
-
-export default function TestApp() {
-  return (
-    <main style={{ padding: 80 }}>
-      <VerticalTableNew data={data} />
-    </main>
-  )
-}