@ndla/ui 13.2.0 → 14.0.0

package/src/User/AuthModal.tsx

@@ -13,6 +13,8 @@ import Modal, { ModalCloseButton } from '@ndla/modal';
 import Button from '@ndla/button';
 import { FeideText, LogIn, LogOut, HumanMaleBoard } from '@ndla/icons/common';
 import { fonts, spacing } from '@ndla/core';
+import { UserInfo } from './UserInfo';
+import { FeideUserApiType } from './apiTypes';
 
 const StyledModalBody = styled.div`
   padding: ${spacing.normal} ${spacing.medium} ${spacing.medium};
@@ -38,17 +40,6 @@ const StyledHeading = styled.h2`
   }
 `;
 
-const StyledAuthorizedInfoList = styled.ul`
-  margin: 0;
-  padding: 0 0 0 ${spacing.normal};
-  list-style-image: unset;
-
-  li {
-    margin: 0;
-    font-weight: ${fonts.weight.semibold};
-  }
-`;
-
 const StyledHumanMaleBoardIconWrapper = styled.span`
   margin-left: ${spacing.xsmall};
 `;
@@ -63,9 +54,8 @@ const StyledButtonWrapper = styled.div`
 
 export type AuthModalProps = {
   isAuthenticated?: boolean;
+  user?: FeideUserApiType;
   showGeneralMessage?: boolean;
-  authorizedRole?: string;
-  authorizedCollectedInfo?: string[];
   onAuthenticateClick: () => void;
   position?: 'top' | 'bottom';
   activateButton?: ReactElement;
@@ -76,9 +66,8 @@ export type AuthModalProps = {
 
 const AuthModal = ({
   isAuthenticated,
+  user,
   showGeneralMessage = true,
-  authorizedRole,
-  authorizedCollectedInfo,
   onAuthenticateClick,
   position = 'top',
   activateButton,
@@ -104,17 +93,7 @@ const AuthModal = ({
             <ModalCloseButton onClick={onClose} title="Lukk" />
           </StyledModalHeader>
           <StyledModalContent>
-            {authorizedRole && <p>{t('user.loggedInAs', { role: authorizedRole })}</p>}
-            {authorizedCollectedInfo && authorizedCollectedInfo.length > 0 && (
-              <div>
-                {t('user.modal.collectedInfo')}
-                <StyledAuthorizedInfoList>
-                  {authorizedCollectedInfo.map((value) => (
-                    <li key={value}>{value}</li>
-                  ))}
-                </StyledAuthorizedInfoList>
-              </div>
-            )}
+            {user && <UserInfo user={user} />}
             {children}
             {showGeneralMessage && (
               <p>

package/src/User/UserInfo.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import styled from '@emotion/styled';
+import { spacing } from '@ndla/core';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FeideUserApiType } from './apiTypes';
+import { parseUserObject } from './parseUserObject';
+
+const InfoList = styled.ul`
+  padding: 0 0 0 ${spacing.normal};
+`;
+
+interface Props {
+  user: FeideUserApiType;
+}
+
+const ShortInfoDiv = styled.div`
+  margin: 2rem auto;
+`;
+
+export const UserInfo = ({ user }: Props) => {
+  const { t } = useTranslation();
+
+  const parsedUser = parseUserObject(user);
+
+  return (
+    <div>
+      {
+        <p>
+          {t('user.loggedInAs', {
+            role: t(`user.role.${parsedUser.primaryAffiliation}`),
+          })}
+        </p>
+      }
+
+      <ShortInfoDiv>
+        <div>
+          {t('user.username')}: <b>{user.uid}</b>
+        </div>
+        <div>
+          {t('user.name')}: <b>{user.displayName}</b>
+        </div>
+        <div>
+          {t('user.mail')}: <b>{user.mail?.join(', ')}</b>
+        </div>
+      </ShortInfoDiv>
+
+      {t('user.modal.collectedInfo')}
+
+      <InfoList>
+        {parsedUser.organizations.map((org) => (
+          <li key={org.id}>
+            {`${org.displayName}${org.membership.primarySchool ? ` (${t('user.primarySchool')})` : ''}`}
+            <InfoList>
+              {Object.entries(org.children).map(([groupType, val]) => {
+                if (val.length < 1) return null;
+                return (
+                  <li key={groupType}>
+                    {t(`user.groupTypes.${groupType}`)}
+                    <InfoList>
+                      {val.map((group) => (
+                        <li key={group.id}>{`${group.displayName}${group.grep ? ` (${group.grep.code})` : ''}`}</li>
+                      ))}
+                    </InfoList>
+                  </li>
+                );
+              })}
+            </InfoList>
+          </li>
+        ))}
+      </InfoList>
+    </div>
+  );
+};

package/src/User/__tests__/parseUserObject-test.ts

@@ -0,0 +1,315 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { FeideUserApiType } from '../apiTypes';
+import { parseUserObject } from '../parseUserObject';
+
+const feideUserLaerer: FeideUserApiType = {
+  cn: ['David LærerVGS Jonsen'],
+  displayName: 'David LærerVGS Jonsen',
+  eduPersonAffiliation: ['member', 'employee', 'faculty'],
+  eduPersonPrimaryAffiliation: 'employee',
+  eduPersonPrincipalName: 'david_laerervgs@spusers.feide.no',
+  givenName: ['David LærerVGS'],
+  mail: ['david_laerervgs@feide.no'],
+  sn: ['Jonsen'],
+  uid: ['david_laerervgs'],
+  groups: [
+    {
+      id: 'fc:org:spusers.feide.no',
+      displayName: 'Rogn fylkeskommune',
+      type: 'fc:org',
+      public: false,
+      membership: {
+        basic: 'admin',
+        affiliation: ['member', 'employee', 'faculty'],
+        primaryAffiliation: 'employee',
+        displayName: 'Akademisk ansatt',
+      },
+      orgType: ['higher_education', 'upper_secondary_owner', 'primary_and_lower_secondary_owner'],
+      norEduOrgNIN: 'NO956326503',
+      eduOrgLegalName: 'Rogn fylkeskommune',
+      mail: 'support@feide.no',
+    },
+    {
+      id: 'fc:org:spusers.feide.no:unit:NO956326504',
+      parent: 'fc:org:spusers.feide.no',
+      displayName: 'Lind VGS',
+      type: 'fc:org',
+      public: false,
+      membership: {
+        basic: 'member',
+        primarySchool: true,
+      },
+      orgType: ['primary_and_lower_secondary'],
+    },
+    {
+      id: 'fc:org:spusers.feide.no:unit:NO856326501',
+      parent: 'fc:org:spusers.feide.no',
+      displayName: 'Lerk VGS',
+      type: 'fc:org',
+      public: false,
+      membership: {
+        basic: 'member',
+        primarySchool: false,
+      },
+      orgType: ['primary_and_lower_secondary'],
+    },
+    {
+      id: 'fc:gogroup:spusers.feide.no:b:NO856326501:1sta:2000-07-01:2100-06-30',
+      displayName: 'Klasse 1STA',
+      type: 'fc:gogroup',
+      notBefore: '2000-06-30T22:00:00Z',
+      notAfter: '2100-06-30T23:00:00Z',
+      go_type: 'b',
+      parent: 'fc:org:spusers.feide.no:unit:NO856326501',
+      membership: {
+        basic: 'member',
+        affiliation: 'employee',
+        displayName: 'Ansatt',
+      },
+      go_type_displayName: 'basisgruppe',
+    },
+    {
+      id: 'fc:gogroup:spusers.feide.no:a:NO856326501:1sta-lab1:2000-07-01:2100-06-30',
+      displayName: 'Laboratoriegruppe 1',
+      type: 'fc:gogroup',
+      notBefore: '2000-06-30T22:00:00Z',
+      notAfter: '2100-06-30T23:00:00Z',
+      go_type: 'a',
+      parent: 'fc:org:spusers.feide.no:unit:NO856326501',
+      membership: {
+        basic: 'member',
+        affiliation: 'employee',
+        displayName: 'Ansatt',
+      },
+      go_type_displayName: 'other groups',
+    },
+    {
+      id: 'fc:gogroup:spusers.feide.no:a:NO856326501:1sta-lab2:2000-07-01:2100-06-30',
+      displayName: 'Laboratoriegruppe 2',
+      type: 'fc:gogroup',
+      notBefore: '2000-06-30T22:00:00Z',
+      notAfter: '2100-06-30T23:00:00Z',
+      go_type: 'a',
+      parent: 'fc:org:spusers.feide.no:unit:NO856326501',
+      membership: {
+        basic: 'member',
+        affiliation: 'employee',
+        displayName: 'Ansatt',
+      },
+      go_type_displayName: 'other groups',
+    },
+    {
+      id: 'fc:gogroup:spusers.feide.no:u:NO856326501:1mat11-1map1:2000-07-01:2100-06-30',
+      displayName: 'Matematikk 1P',
+      type: 'fc:gogroup',
+      notBefore: '2000-06-30T22:00:00Z',
+      notAfter: '2100-06-30T23:00:00Z',
+      go_type: 'u',
+      parent: 'fc:org:spusers.feide.no:unit:NO856326501',
+      membership: {
+        basic: 'member',
+        affiliation: 'employee',
+        displayName: 'Ansatt',
+      },
+      go_type_displayName: 'undervisningsgruppe',
+      grep: {
+        displayName: 'Mathematics 1P',
+        code: 'MAT1011',
+      },
+    },
+    {
+      id: 'fc:gogroup:spusers.feide.no:u:NO856326501:1mat13-1mat1:2000-07-01:2100-06-30',
+      displayName: 'Matematikk 1T',
+      type: 'fc:gogroup',
+      notBefore: '2000-06-30T22:00:00Z',
+      notAfter: '2100-06-30T23:00:00Z',
+      go_type: 'u',
+      parent: 'fc:org:spusers.feide.no:unit:NO856326501',
+      membership: {
+        basic: 'member',
+        affiliation: 'employee',
+        displayName: 'Ansatt',
+      },
+      go_type_displayName: 'undervisningsgruppe',
+      grep: {
+        displayName: 'Mathematics 1T',
+        code: 'MAT1013',
+      },
+    },
+  ],
+  primarySchool: {
+    id: 'fc:org:spusers.feide.no:unit:NO956326504',
+    parent: 'fc:org:spusers.feide.no',
+    displayName: 'Lind VGS',
+    type: 'fc:org',
+    public: false,
+    membership: {
+      basic: 'member',
+      primarySchool: true,
+    },
+    orgType: ['primary_and_lower_secondary'],
+  },
+};
+
+describe('parseUserObject', () => {
+  it('Correctly parses Feide user', () => {
+    const expected = {
+      uid: ['david_laerervgs'],
+      primaryAffiliation: 'employee',
+      displayName: 'David LærerVGS Jonsen',
+      mail: ['david_laerervgs@feide.no'],
+      organizations: [
+        {
+          id: 'fc:org:spusers.feide.no',
+          displayName: 'Rogn fylkeskommune',
+          type: 'fc:org',
+          public: false,
+          membership: {
+            basic: 'admin',
+            affiliation: ['member', 'employee', 'faculty'],
+            primaryAffiliation: 'employee',
+            displayName: 'Akademisk ansatt',
+          },
+          orgType: ['higher_education', 'upper_secondary_owner', 'primary_and_lower_secondary_owner'],
+          norEduOrgNIN: 'NO956326503',
+          eduOrgLegalName: 'Rogn fylkeskommune',
+          mail: 'support@feide.no',
+          children: {
+            basic: [],
+            teaching: [],
+            other: [],
+          },
+        },
+        {
+          id: 'fc:org:spusers.feide.no:unit:NO956326504',
+          parent: 'fc:org:spusers.feide.no',
+          displayName: 'Lind VGS',
+          type: 'fc:org',
+          public: false,
+          membership: {
+            basic: 'member',
+            primarySchool: true,
+          },
+          orgType: ['primary_and_lower_secondary'],
+          children: {
+            basic: [],
+            teaching: [],
+            other: [],
+          },
+        },
+        {
+          id: 'fc:org:spusers.feide.no:unit:NO856326501',
+          parent: 'fc:org:spusers.feide.no',
+          displayName: 'Lerk VGS',
+          type: 'fc:org',
+          public: false,
+          membership: {
+            basic: 'member',
+            primarySchool: false,
+          },
+          orgType: ['primary_and_lower_secondary'],
+          children: {
+            basic: [
+              {
+                id: 'fc:gogroup:spusers.feide.no:b:NO856326501:1sta:2000-07-01:2100-06-30',
+                displayName: 'Klasse 1STA',
+                type: 'fc:gogroup',
+                notBefore: '2000-06-30T22:00:00Z',
+                notAfter: '2100-06-30T23:00:00Z',
+                go_type: 'b',
+                parent: 'fc:org:spusers.feide.no:unit:NO856326501',
+                membership: {
+                  basic: 'member',
+                  affiliation: 'employee',
+                  displayName: 'Ansatt',
+                },
+                go_type_displayName: 'basisgruppe',
+              },
+            ],
+            teaching: [
+              {
+                id: 'fc:gogroup:spusers.feide.no:u:NO856326501:1mat11-1map1:2000-07-01:2100-06-30',
+                displayName: 'Matematikk 1P',
+                type: 'fc:gogroup',
+                notBefore: '2000-06-30T22:00:00Z',
+                notAfter: '2100-06-30T23:00:00Z',
+                go_type: 'u',
+                parent: 'fc:org:spusers.feide.no:unit:NO856326501',
+                membership: {
+                  basic: 'member',
+                  affiliation: 'employee',
+                  displayName: 'Ansatt',
+                },
+                go_type_displayName: 'undervisningsgruppe',
+                grep: {
+                  displayName: 'Mathematics 1P',
+                  code: 'MAT1011',
+                },
+              },
+              {
+                id: 'fc:gogroup:spusers.feide.no:u:NO856326501:1mat13-1mat1:2000-07-01:2100-06-30',
+                displayName: 'Matematikk 1T',
+                type: 'fc:gogroup',
+                notBefore: '2000-06-30T22:00:00Z',
+                notAfter: '2100-06-30T23:00:00Z',
+                go_type: 'u',
+                parent: 'fc:org:spusers.feide.no:unit:NO856326501',
+                membership: {
+                  basic: 'member',
+                  affiliation: 'employee',
+                  displayName: 'Ansatt',
+                },
+                go_type_displayName: 'undervisningsgruppe',
+                grep: {
+                  displayName: 'Mathematics 1T',
+                  code: 'MAT1013',
+                },
+              },
+            ],
+            other: [
+              {
+                id: 'fc:gogroup:spusers.feide.no:a:NO856326501:1sta-lab1:2000-07-01:2100-06-30',
+                displayName: 'Laboratoriegruppe 1',
+                type: 'fc:gogroup',
+                notBefore: '2000-06-30T22:00:00Z',
+                notAfter: '2100-06-30T23:00:00Z',
+                go_type: 'a',
+                parent: 'fc:org:spusers.feide.no:unit:NO856326501',
+                membership: {
+                  basic: 'member',
+                  affiliation: 'employee',
+                  displayName: 'Ansatt',
+                },
+                go_type_displayName: 'other groups',
+              },
+              {
+                id: 'fc:gogroup:spusers.feide.no:a:NO856326501:1sta-lab2:2000-07-01:2100-06-30',
+                displayName: 'Laboratoriegruppe 2',
+                type: 'fc:gogroup',
+                notBefore: '2000-06-30T22:00:00Z',
+                notAfter: '2100-06-30T23:00:00Z',
+                go_type: 'a',
+                parent: 'fc:org:spusers.feide.no:unit:NO856326501',
+                membership: {
+                  basic: 'member',
+                  affiliation: 'employee',
+                  displayName: 'Ansatt',
+                },
+                go_type_displayName: 'other groups',
+              },
+            ],
+          },
+        },
+      ],
+    };
+    const actual = parseUserObject(feideUserLaerer);
+    expect(actual).toEqual(expected);
+  });
+});

package/src/User/apiTypes.ts

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+type OrgType =
+  | 'higher_education'
+  | 'primary_and_lower_secondary'
+  | 'primary_and_lower_secondary_owner'
+  | 'upper_secondary'
+  | 'upper_secondary_owner';
+
+type AffiliationType = 'member' | 'student' | 'faculty' | 'staff' | 'affiliate' | 'employee';
+
+export interface FeideMembershipType {
+  basic: 'member' | 'admin' | 'owner'; // Basic membership role of user.
+  affiliation?: AffiliationType[] | AffiliationType;
+  primarySchool?: boolean;
+  primaryAffiliation?: AffiliationType;
+  displayName?: string;
+}
+
+interface FeideBaseGroup {
+  id: string;
+  type: 'fc:org' | 'fc:gogroup';
+  displayName: string;
+  membership: FeideMembershipType;
+}
+
+export interface FeideOrg extends FeideBaseGroup {
+  type: 'fc:org';
+  orgType: OrgType[];
+  norEduOrgNIN?: string;
+  eduOrgLegalName?: string;
+  mail?: string;
+  parent?: string;
+  public: boolean;
+}
+
+export interface FeideGoGroup extends FeideBaseGroup {
+  type: 'fc:gogroup';
+  notBefore: string;
+  notAfter: string;
+  go_type: 'b' | 'u' | 'a';
+  parent: string;
+  go_type_displayName: string;
+  grep?: {
+    displayName: string;
+    code: string;
+  };
+}
+
+export type FeideGroup = FeideOrg | FeideGoGroup;
+
+interface FeideUser {
+  cn: string[];
+  displayName: string;
+  eduPersonAffiliation: AffiliationType[] | AffiliationType;
+  eduPersonPrimaryAffiliation: string;
+  eduPersonPrincipalName: string;
+  givenName: string[];
+  mail?: string[];
+  schacHomeOrganization?: string;
+  sn: string[];
+  uid: string[];
+}
+
+export interface FeideUserApiType extends FeideUser {
+  groups: FeideGroup[];
+  primarySchool?: FeideGroup;
+}

package/src/User/index.ts

@@ -7,5 +7,9 @@
  */
 
 import AuthModal from './AuthModal';
+import { UserInfo } from './UserInfo';
+import type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType } from './apiTypes';
 
+export { UserInfo };
+export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType };
 export default AuthModal;

package/src/User/parseUserObject.ts

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { groupBy } from 'lodash';
+import { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType } from './apiTypes';
+
+type GoGroupType = 'basic' | 'teaching' | 'other';
+
+/**
+ * The keys come from:
+ *  https://docs.feide.no/reference/apis/groups_api/groups_data_model/primary_and_secondary_education_groups.html?highlight=gogroup#specific-attributes-for-fc-gogroup
+ */
+const goGroupTypeMap: Record<'a' | 'b' | 'u', GoGroupType> = {
+  a: 'other',
+  b: 'basic',
+  u: 'teaching',
+};
+
+/**
+ * @param groups GoGroups to be mapped to specific GoGroupType
+ * @returns GoGroups mapped to GoGroupType. basic, teaching and other..
+ */
+const createGroupings = (groups: FeideGoGroup[]) => {
+  return groups.reduce<Record<GoGroupType, FeideGoGroup[]>>(
+    (acc, curr) => {
+      const type = goGroupTypeMap[curr.go_type];
+      if (!acc[type]) return acc;
+
+      acc[type] = acc[type].concat(curr);
+      return acc;
+    },
+    {
+      basic: [],
+      teaching: [],
+      other: [],
+    },
+  );
+};
+
+/**
+ * @param groups GoGroups to be mapped to root/child relations.
+ * @returns An object containing root groups mapped with children.
+ */
+const parseOrgs = (groups: FeideGroup[]) => {
+  const [roots, children] = groups.reduce<[FeideOrg[], FeideGoGroup[]]>(
+    (acc, curr) => {
+      if (curr.type === 'fc:org') {
+        return [acc[0].concat(curr), acc[1]];
+      } else {
+        return [acc[0], acc[1].concat(curr)];
+      }
+    },
+    [[], []],
+  );
+
+  const childrenByParentId = groupBy(children, (c) => c.parent);
+  const rootsWithChildren = roots.map((root) => ({ ...root, children: childrenByParentId[root.id] ?? [] }));
+
+  return rootsWithChildren.map((root) => ({
+    ...root,
+    children: createGroupings(root.children),
+  }));
+};
+
+/**
+ * @param user A user object coming from the API
+ * @returns A user object parsed in a presentable way to be handled by i.e UserInfo component.
+ */
+export const parseUserObject = (user: FeideUserApiType) => {
+  const orgs = parseOrgs(user.groups);
+
+  return {
+    uid: user.uid,
+    primaryAffiliation: user.eduPersonPrimaryAffiliation,
+    displayName: user.displayName,
+    mail: user.mail,
+    organizations: orgs,
+  };
+};

package/src/all.scss

@@ -5,3 +5,4 @@
 @import '~@ndla/core/scss/utilities';
 @import '~@ndla/audio-search/scss/audio-search';
 @import '~@ndla/video-search/scss/video-search';
+@import '~@ndla/tooltip/src/all.css';

package/src/index.ts

@@ -108,7 +108,9 @@ export { SearchFieldForm } from './Search/SearchFieldForm';
 
 export { default as MastheadSearchModal } from './Masthead/MastheadSearchModal';
 export { default as MastheadAuthModal } from './Masthead/MastheadAuthModal';
+export { UserInfo } from './User';
 export { default as AuthModal } from './User';
+export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType } from './User';
 
 export { default as CreatedBy } from './CreatedBy';
 

package/src/locale/messages-en.ts

@@ -757,15 +757,15 @@ const messages = {
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland',
     },
     blog2: {
-      text: 'Aktiviser elevane med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen',
@@ -945,6 +945,15 @@ const messages = {
     resource: {
       accessDenied: 'We are sorry, but this resource is only available to teachers who are logged in with Feide.',
     },
+    primarySchool: 'Primary School',
+    name: 'Name',
+    mail: 'E-mail',
+    username: 'Username',
+    groupTypes: {
+      basic: 'Basic group',
+      teaching: 'Teaching group',
+      other: 'Other groups',
+    },
   },
   checkOutNewFeature: 'New feature',
   slateBlockMenu: {