Merge branch 'master' into robin/permissions

frontend/.yarnrc.yml

@@ -2,6 +2,6 @@ nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: '@yarnpkg/plugin-interactive-tools'
+    spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.6.4.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

frontend/package.json

@@ -2,6 +2,7 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
+  "//": "Append // to scripts to add more information (comments are not supported in '.json')",
   "scripts": {
     "start": "vite serve --host 0.0.0.0 --port 3000",
     "start:docker": "vite serve",
@@ -10,7 +11,12 @@
     "ci": "yarn install --immutable",
     "ci:debian": "yarnpkg install --immutable",
     "preview": "vite preview",
-    "upgrade": "yarn upgrade",
+    "update//": "echo Updates dependencies according to 'package.json' rules and updates 'yarn.lock'.",
+    "update": "yarn up",
+    "up": "yarn up",
+    "self-upgrade//": "echo Upgrades yarn itself to latest version.",
+    "self-upgrade": "yarn set version latest",
+    "upgrade": "yarn upgrade-interactive",
     "outdated": "yarn upgrade-interactive",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006 --quiet",
     "storybook-dev": "storybook dev -p 6006",
@@ -109,5 +115,5 @@
     "url": "https://github.com/Samfundet/Samfundet4/issues"
   },
   "_id": "[email protected]",
-  "packageManager": "yarn@3.6.4"
+  "packageManager": "yarn@4.5.0"
 }

frontend/src/Components/TabView/TabView.stories.tsx

@@ -0,0 +1,19 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { TabView, TabViewProps } from './TabView';
+
+export default {
+  title: 'Components/TabView',
+  component: TabView,
+} as ComponentMeta<typeof TabView>;
+
+const Template: ComponentStory<typeof TabView> = (props: TabViewProps) => {
+  return <TabView tabs={props.tabs} />;
+};
+
+export const Basic = Template.bind({}, {
+  tabs: [
+    { key: 1, label: 'Tab One', value: <p>Tab One</p> },
+    { key: 2, label: 'Tab Two', value: <p>Tab Two</p> },
+    { key: 3, label: 'Tab Three', value: <p>Tab Three</p> },
+  ],
+} as TabViewProps);

frontend/src/Components/TabView/TabView.tsx

@@ -0,0 +1,17 @@
+import { useState, ReactElement, ReactNode } from 'react';
+import { Tab, TabBar } from '../TabBar/TabBar';
+
+export type TabViewProps = {
+  tabs: Tab<ReactElement | ReactNode>[];
+  className?: string;
+};
+
+export function TabView({ tabs, className }: TabViewProps) {
+  const [currentTab, setCurrentTab] = useState<Tab<ReactElement | ReactNode>>(tabs[0] ?? undefined);
+  return (
+    <div className={className}>
+      <TabBar tabs={tabs} selected={currentTab} onSetTab={setCurrentTab} />
+      {currentTab?.value}
+    </div>
+  );
+}

frontend/src/Components/TabView/index.ts

@@ -0,0 +1 @@
+export { TabView } from './TabView';

frontend/src/Components/index.ts

@@ -73,6 +73,7 @@ export { InterviewFormModal } from './InterviewForm';
 export { Chart } from './Chart';
 export { Logo } from './Logo';
 export { TabBar } from './TabBar';
+export { TabView } from './TabView';
 export { Text } from './Text';
 export { Table } from './Table';
 export { OccupiedFormModal } from './OccupiedForm';

frontend/src/PagesAdmin/RecruitmentOverviewPage/RecruitmentOverviewPage.tsx

@@ -1,27 +1,22 @@
 import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
-import { Tab, TabBar } from '~/Components/TabBar/TabBar';
+import { Tab } from '~/Components/TabBar/TabBar';
 import { RecruitmentStatistics } from './Components/RecruitmentStatistics';
 import { RecruitmentProgression } from './Components/RecruitmentProgression';
-import { ReactNode, useState } from 'react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { KEY } from '~/i18n/constants';
+import { TabView } from '~/Components';
 
 export function RecruitmentOverviewPage() {
   const { t } = useTranslation();
-  const [currentTab, setCurrentTab] = useState<Tab<ReactNode>>({
-    key: 1,
-    label: t(KEY.recruitment_progression),
-    value: <RecruitmentProgression />,
-  });
   const RECRUITMENT_TITLE_PLACEHOLDER: string = 'PLACEHOLDER-RECRUITMENT-TITLE';
   const tabs: Tab<ReactNode>[] = [
     { key: 1, label: t(KEY.recruitment_progression), value: <RecruitmentProgression /> },
     { key: 2, label: t(KEY.recruitment_statistics), value: <RecruitmentStatistics /> },
   ];
   return (
     <AdminPageLayout title={t(KEY.recruitment_overview) + ': ' + RECRUITMENT_TITLE_PLACEHOLDER}>
-      <TabBar tabs={tabs} selected={currentTab} onSetTab={setCurrentTab} />
-      {currentTab?.value}
+      <TabView tabs={tabs} />
     </AdminPageLayout>
   );
 }

frontend/src/PagesAdmin/RecruitmentRecruiterDashboardPage/RecruitmentRecruiterDashboardPage.tsx

@@ -7,7 +7,7 @@ import { RecruitmentApplicationDto, RecruitmentDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
 import { ROUTES } from '~/routes';
-import { dbT } from '~/utils';
+import { dbT, getObjectFieldOrNumber } from '~/utils';
 import styles from './RecruitmentRecruiterDashboardPage.module.scss';
 import { Text } from '~/Components/Text/Text';
 import { Table } from '~/Components/Table';
@@ -46,7 +46,10 @@ export function RecruitmentRecruiterDashboardPage() {
     return <></>;
   }
 
-  const title = `${t(KEY.recruitment_overview)} - ${recruitment?.organization} - ${dbT(recruitment, 'name')}`;
+  const title = `${t(KEY.recruitment_overview)} - ${getObjectFieldOrNumber(recruitment?.organization, 'name')} - ${dbT(
+    recruitment,
+    'name',
+  )}`;
   const header = (
     <div className={styles.header}>
       <Text>{t(KEY.recruitment_dashboard_description)}</Text>