feat(navbar): partial navbar porting

apps/web/src/components/navbar/AddDatabaseForm/add-database-form.module.scss

+.wrapper {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  width: 100vw;
+  background-color: rgba(0, 0, 0, 0.87);
+  position: absolute;
+  z-index: 1225;
+}
+
+.authWrapper {
+  font-family: Poppins, sans-serif;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 400px;
+  margin: auto;
+  overflow: auto;
+  min-height: 300px;
+  background-color: #f7f8fc;
+  padding: 30px;
+  border-radius: 5px;
+  padding-bottom: 300px;
+}
+
+.header {
+  text-align: center;
+}
+
+.formWrapper {
+}
+
+.loginContainer {
+  margin: 5px 0px !important;
+}
+
+.loginContainerRow {
+  display: flex;
+  flex-direction: row;
+  margin: 5px 0px;
+}
+
+.loginContainerButton {
+  margin-top: 10px !important;
+
+  & button {
+    width: 100%;
+  }
+}
+
+.hostLabel {
+  flex: 1 0 66.66667%;
+
+  & div {
+    width: 95%;
+  }
+}
+
+.portLabel {
+  flex: 1 0 33.33334%;
+}
+
+.userLabel {
+  width: 100%;
+}
+
+passLabel {
+  width: 100%;
+}
+
+cancelButton {
+  margin-top: 2.5%;
+}
+

apps/web/src/components/navbar/AddDatabaseForm/index.tsx

+/**
+ * This program has been developed by students from the bachelor Computer Science at
+ * Utrecht University within the Software Project course.
+ * © Copyright Utrecht University (Department of Information and Computing Sciences)
+ */
+
+/* istanbul ignore file */
+/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
+ * We do not test components/renderfunctions/styling files.
+ * See testing plan for more details.*/
+import React, { useState } from 'react';
+import { TextField, Button, NativeSelect } from '@mui/material';
+import styles from './add-database-form.module.scss';
+import {
+  AddDatabaseRequest,
+  DatabaseType,
+  databaseNameMapping,
+} from '@graphpolaris/shared/lib/data-access';
+
+/** AddDatabaseFormProps is an interface containing the AuthViewModel. */
+export interface AddDatabaseFormProps {
+  open: boolean;
+  onClose(): void;
+  onSubmit(data: AddDatabaseRequest): void;
+}
+
+/** AddDatabaseFormState is an interface containing the databasehost information. */
+export interface AddDatabaseFormState extends AddDatabaseRequest {
+  // username: string;
+  // password: string;
+  // hostname: string;
+  // port: number;
+  // databaseName: string;
+  // internalDatabase: string;
+  // databaseType: string;
+  // styles: Record<string, string>; // TODO: check if needed
+}
+
+/** AddDatabaseForm is the View implementation for the connect screen that will be rendered. */
+export default function AddDatabaseForm(props: AddDatabaseFormProps) {
+  const [state, setState] = useState<AddDatabaseFormState>({
+    username: 'root',
+    password: 'DikkeDraak',
+    url: 'https://datastrophe.science.uu.nl/',
+    port: 8529,
+    name: 'Tweede Kamer Dataset',
+    internal_database_name: 'TweedeKamer',
+    // styles: props.styles, // FIXME
+    type: DatabaseType.ArangoDB,
+  });
+
+  /**
+   * Validates if the port value is numerical. Only then will the state be updated.
+   * @param port The new port value.
+   */
+  function handlePortChanged(port: string): void {
+    if (!isNaN(Number(port))) setState({ ...state, port: Number(port) });
+  }
+
+  /** Handles the submit button click. Calls the onSubmit in the props with all the fields. */
+  function handleSubmitClicked(): void {
+    props.onSubmit(state);
+  }
+
+  return props.open ? (
+    <div
+      className={styles.wrapper}
+      onMouseDown={() => {
+        props.onClose();
+      }}
+    >
+      <div
+        className={styles.authWrapper}
+        onMouseDown={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <h1 className={styles.header}>Database Connect</h1>
+        <form
+          className={styles.formWrapper}
+          onSubmit={(event: React.FormEvent) => {
+            event.preventDefault();
+            handleSubmitClicked();
+          }}
+        >
+          <div className={styles.loginContainer}>
+            <TextField
+              className={styles.passLabel}
+              label="Database name"
+              type="databaseName"
+              value={state.name}
+              onChange={(event) =>
+                setState({
+                  ...state,
+                  name: event.currentTarget.value,
+                })
+              }
+              required
+            />
+          </div>
+          <div className={styles.loginContainer}>
+            <NativeSelect
+              className={styles.passLabel}
+              value={databaseNameMapping[state.type]}
+              onChange={(event) => {
+                setState({
+                  ...state,
+                  type: databaseNameMapping.indexOf(event.currentTarget.value),
+                });
+              }}
+            >
+              {databaseNameMapping.map((dbName) => (
+                <option value={dbName}>{dbName}</option>
+              ))}
+            </NativeSelect>
+          </div>
+          <div className={styles.loginContainerRow}>
+            <TextField
+              className={styles.hostLabel}
+              label="Hostname/IP"
+              type="hostname"
+              value={state.url}
+              onChange={(event) =>
+                setState({
+                  ...state,
+                  url: event.currentTarget.value,
+                })
+              }
+              required
+            />
+            <TextField
+              className={styles.portLabel}
+              label="Port"
+              type="port"
+              value={state.port}
+              onChange={(event) => handlePortChanged(event.currentTarget.value)}
+              required
+            />
+          </div>
+          <div className={styles.loginContainer}>
+            <TextField
+              className={styles.userLabel}
+              label="Username"
+              type="username"
+              value={state.username}
+              onChange={(event) =>
+                setState({
+                  ...state,
+                  username: event.currentTarget.value,
+                })
+              }
+              required
+            />
+          </div>
+          <div className={styles.loginContainer}>
+            <TextField
+              className={styles.passLabel}
+              label="Password"
+              type="password"
+              value={state.password}
+              onChange={(event) =>
+                setState({
+                  ...state,
+                  password: event.currentTarget.value,
+                })
+              }
+              required
+            />
+          </div>
+          <div className={styles.loginContainer}>
+            <TextField
+              className={styles.passLabel}
+              label="Internal database"
+              type="internalDatabaseName"
+              value={state.internal_database_name}
+              onChange={(event) =>
+                setState({
+                  ...state,
+                  internal_database_name: event.currentTarget.value,
+                })
+              }
+              required
+            />
+          </div>
+          <div className={styles.loginContainerButton}>
+            <Button variant="outlined" type="submit">
+              Submit
+            </Button>
+            <Button
+              className={styles.cancelButton}
+              variant="outlined"
+              onClick={() => {
+                props.onClose();
+              }}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+}

libs/shared/lib/data-access/api/schema.ts

+// All database related API calls
+
+import { AuthorizationHandler } from '@graphpolaris/shared/lib/data-access/authorization';
+
+
+export function RequestSchema(databaseName: string) {
+}
\ No newline at end of file

libs/shared/lib/data-access/store/sessionSlice.ts

+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from './store';
+
+// Define the initial state using that type
+export const initialState: {
+  currentDatabase: string;
+  databases: string[];
+} = {
+  currentDatabase: '',
+  databases: [],
+};
+
+export const sessionSlice = createSlice({
+  name: 'session',
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  reducers: {
+    updateCurrentDatabase(state, action: PayloadAction<string>) {
+      state.currentDatabase = action.payload;
+    },
+    updateDatabaseList(state, action: PayloadAction<string[]>) {
+      state.databases = action.payload;
+    }
+  },
+});
+
+export const {
+  updateCurrentDatabase,
+  updateDatabaseList
+} = sessionSlice.actions;
+
+// Other code such as selectors can use the imported `RootState` type
+export const sessionCacheState = (state: RootState) => state.sessionCache;
+
+export default sessionSlice.reducer;