Part 2. Edit user in team (#161)

* Add base skeleton for edit user in team sidebar modal

DPSTAT-894

* added removeUserfromGroups function

* Update view for in edit user in team Sidebar Modal with correct data

* Added functionality to edit user group in team dropdown

* .

* Refactors SidebarModal duplicated code for add/edit user in team

* temporary fix for removing user from a group

* .

* Reset select group dropdown for edit user

* Update edit user requests; include form resets, spinnger and error messages

* Fix double spinner and refactor modal code

* Add alignment options for Table and center edit user column data

* .

* Add delete user feature for edit user in team

* Add conditional rendering for user editing in teams

* Use useCallback for team manager view conditional

* Create DeleteLink component for editing

* Fix view for dropdown on onSelect when editing users

---------

Co-authored-by: ssb-jnk <[email protected]>

package.json

@@ -23,6 +23,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "express": "4.18.3",
     "express-http-proxy": "^2.0.0",
+    "http-proxy-middleware": "^2.0.6",
     "http-status-codes": "^2.3.0",
     "jsonwebtoken": "^9.0.2",
     "jwks-rsa": "^3.1.0",

server.js

@@ -13,10 +13,13 @@ const app = express()
 const PORT = process.env.PORT || 3000
 const DAPLA_TEAM_API_URL = process.env.DAPLA_TEAM_API_URL || 'https://dapla-team-api-v2.staging-bip-app.ssb.no'
 
-// Proxy, note this middleware must be place before all else.. THIS TOOK ME 3 HOURS TO FIGURE OUT! TODO: Remove comment
 app.use(
   '/api',
   proxy(DAPLA_TEAM_API_URL, {
+    proxyReqBodyDecorator: function (bodyContent, srcReq) {
+      console.log(`Request Body: ${bodyContent}`)
+      return bodyContent
+    },
     proxyReqOptDecorator: function (proxyReqOpts, srcReq) {
       console.log(`Request Headers:`, srcReq.headers)
       if (srcReq.body) {
@@ -34,6 +37,10 @@ app.use(
       console.log(`Response Headers:`, proxyRes.headers)
       return proxyResData
     },
+    proxyErrorHandler: function (err, res) {
+      console.error('Proxy Error:', err)
+      res.status(500).send('Proxy Error')
+    },
   })
 )
 
@@ -66,6 +73,39 @@ async function fetchPhoto(accessToken, url, fallbackErrorMessage) {
   return photoBuffer.toString('base64')
 }
 
+//TODO: Remove me once DELETE with proxy is fixed
+app.delete('/localApi/groups/:groupUniformName/:userPrincipalName', async (req, res) => {
+  const token = req.headers.authorization
+  const groupUniformName = req.params.groupUniformName
+  const userPrincipalName = req.params.userPrincipalName
+  const groupsUrl = `${DAPLA_TEAM_API_URL}/groups/${groupUniformName}/users`
+
+  try {
+    const response = await fetch(groupsUrl, {
+      method: 'DELETE',
+      headers: {
+        Accept: '*/*',
+        'Content-Type': 'application/json',
+        Authorization: token,
+      },
+      body: JSON.stringify({
+        users: [userPrincipalName],
+      }),
+    })
+
+    if (!response.ok) {
+      const err = await response.text()
+      res.status(response.status).send(err)
+    } else {
+      const data = await response.json()
+      res.status(response.status).send(data)
+    }
+  } catch (error) {
+    console.log(error)
+    res.status(500).send('Internal Server Error')
+  }
+})
+
 app.get('/localApi/fetch-token', (req, res) => {
   if (!req.headers.authorization || !req.headers.authorization.startsWith('Bearer')) {
     return res.status(401).json({ message: 'No token provided' })

src/components/DeleteLink/DeleteLink.tsx

@@ -0,0 +1,21 @@
+import styles from './deletelink.module.scss'
+
+import { Trash2 } from 'react-feather'
+
+interface DeleteLink {
+  children: string
+  tabIndex?: number
+  icon?: boolean
+  handleDeleteUser: CallableFunction
+}
+
+const DeleteLink = ({ children, tabIndex, icon, handleDeleteUser }: DeleteLink) => {
+  return (
+    <a className={styles.deleteLinkWrapper} tabIndex={tabIndex ?? 0} onClick={() => handleDeleteUser}>
+      {icon && <Trash2 size={22} />}
+      <span>{children}</span>
+    </a>
+  )
+}
+
+export default DeleteLink

src/components/DeleteLink/deletelink.module.scss

@@ -0,0 +1,22 @@
+@use '@statisticsnorway/ssb-component-library/src/style/variables' as variables;
+
+.deleteLinkWrapper {
+    display: inline-flex;
+    align-items: center;
+    color: variables.$ssb-red-3;
+    padding: .5rem;
+    line-height: 1.7;
+    cursor: pointer;
+
+    svg {
+        margin-right: .5rem;
+    }
+
+    span {
+        border-bottom: 1px solid;
+    }
+
+    &:focus {
+        @include variables.focus-marker;
+    }
+}

src/components/Table/Table.tsx

@@ -14,11 +14,13 @@ interface TableProps extends TableData {
 interface TableDesktopViewProps extends TableData {
   activeTab?: string
 }
+
 export interface TableData {
   columns: {
     id: string
     label: string
     unsortable?: boolean
+    align?: string
   }[]
   data: {
     id: string
@@ -152,7 +154,9 @@ const TableDesktopView = ({ columns, data, activeTab }: TableDesktopViewProps) =
               return (
                 <tr key={row.id + index} className={conditionalStyling(index)}>
                   {columns.map((column) => (
-                    <td key={column.id}>{row[column.id]}</td>
+                    <td key={column.id} className={column.align === 'center' ? styles.centerText : undefined}>
+                      {row[column.id]}
+                    </td>
                   ))}
                 </tr>
               )

src/components/Table/table.module.scss

@@ -134,4 +134,11 @@
   @media #{variables.$mobile} {
     display: flex;
   }
+}
+
+.centerText {
+  span {
+    display: flex;
+    justify-content: center;
+  }
 }