[DPSTAT-947] Nytt innholdsside i Dapla Ctrl (#272)

* Add page for creating new teams

* Add proxy for klass API

* Implement ItemSelection component

This is useful for selecting multiple items from a list.
The component isn't in use right now, but it will be later
when we add support for selecting 'features' from the create
team page.

* update create team button

only let dapla admins create teams for now

package.json

@@ -8,18 +8,22 @@
     "dev": "nodemon server.js -w server.js",
     "prod": "NODE_ENV=production node server.js",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --ignore-path ./.gitignore",
     "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --fix --ignore-path ./.gitignore",
     "lint:format": "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@effect/platform": "^0.57.0",
+    "@effect/schema": "^0.67.22",
+    "@effect/typeclass": "^0.24.27",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@mui/material": "^5.15.15",
     "@statisticsnorway/ssb-component-library": "^2.0.99",
     "dotenv": "^16.4.5",
+    "effect": "^3.3.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "express": "4.19.2",
@@ -33,6 +37,7 @@
     "prettier": "^3.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.22.3",
     "vite-express": "0.16.0"

server.js

@@ -14,6 +14,25 @@ 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'
 
+app.use(
+  '/klass',
+  proxy('https://data.ssb.no/api/klass/v1', {
+    proxyReqPathResolver: (req) => {
+      return '/api/klass/v1' + req.url
+    },
+
+    userResDecorator: function (proxyRes, proxyResData, userReq, userRes) {
+      console.log('Response Status:', proxyRes.statusCode)
+      console.log('Response Headers:', proxyRes.headers)
+      console.log('User Request Headers:', userReq.headers)
+      if (userRes.body) {
+        console.log('User Response:', userRes.body)
+      }
+      return proxyResData
+    },
+  })
+)
+
 app.use(
   '/api',
   proxy(DAPLA_TEAM_API_URL, {

src/App.tsx

@@ -1,5 +1,6 @@
 import ProtectedRoute from './components/ProtectedRoute'
 
+import CreateTeamForm from './pages/CreateTeamForm/CreateTeamForm.tsx'
 import NotFound from './pages/NotFound/NotFound.tsx'
 import TeamOverview from './pages/TeamOverview/TeamOverview'
 import UserProfile from './pages/UserProfile/UserProfile'
@@ -18,6 +19,7 @@ const App = () => {
         <Route path='/teammedlemmer/:principalName' element={<UserProfile />} />
         <Route path='/:teamId' element={<TeamDetail />} />
         <Route path='/:teamId/:shortName' element={<SharedBucketDetail />} />
+        <Route path='/opprett-team' element={<CreateTeamForm />} />
         <Route path='/not-found' element={<NotFound />} />
       </Route>
     </Routes>

src/components/ItemSelection/ItemSelection.tsx

@@ -0,0 +1,50 @@
+import { useMemo, useState } from 'react'
+import { Tag } from '@statisticsnorway/ssb-component-library'
+import styles from './itemSelection.module.scss'
+
+export interface Item {
+  readonly id: number
+  readonly text: string
+}
+
+interface ItemSelectionProps {
+  readonly header: string
+  readonly items: Item[]
+  readonly onSelectionChange: (selectedItems: Item[]) => void
+}
+function ItemSelection({ header, items, onSelectionChange }: ItemSelectionProps) {
+  const [selectedItems, setSelectedItems] = useState<Item[]>([])
+
+  const selectedItemIds = useMemo(() => selectedItems.map((item) => item.id), [selectedItems])
+
+  const selectItem = (selectedItem: Item) => {
+    const newSelectedItems = selectedItemIds.includes(selectedItem.id)
+      ? selectedItems.filter((item) => item.id !== selectedItem.id)
+      : [...selectedItems, selectedItem]
+
+    setSelectedItems(newSelectedItems)
+    onSelectionChange(newSelectedItems)
+  }
+
+  return (
+    <div className={styles.rootComponent}>
+      <div className={styles.header}>{header}</div>
+      <div className={styles.itemSelection}>
+        {items.map(({ id, text }) => (
+          <Tag
+            key={id}
+            onClick={(event: Event) => {
+              selectItem({ id, text })
+              event.preventDefault()
+            }}
+            className={selectedItemIds.includes(id) ? styles.selectedItem : ''}
+          >
+            {text}
+          </Tag>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ItemSelection

src/components/ItemSelection/itemSelection.module.scss

@@ -0,0 +1,24 @@
+.rootComponent {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+    font-family: 'Roboto', sans-serif;
+    font-stretch: normal;
+}
+
+.header {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 8px;
+}
+
+.itemSelection {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    gap: 1.3rem;
+}
+.selectedItem {
+    background-color: #00824d;
+    color: white;
+}

src/components/PageLayout/PageLayout.tsx

@@ -5,9 +5,9 @@ import styles from './pagelayout.module.scss'
 import { Title } from '@statisticsnorway/ssb-component-library'
 
 interface PageLayoutProps {
-  title?: string | JSX.Element
-  button?: JSX.Element
-  content?: JSX.Element
+  title?: string | JSX.Element | undefined
+  button?: JSX.Element | undefined
+  content?: JSX.Element | undefined
 }
 
 const PageLayout = ({ title, button, content }: PageLayoutProps) => {