@ndla/ui 13.2.2 → 15.1.0

package/src/TreeStructure/keyboardNavigation/keyboardNavigation.ts

@@ -0,0 +1,161 @@
+/**
+ * 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 { FolderStructureProps, SetFocusedFolderId } from '../TreeStructure.types';
+import { KeyboardNavigationProps, ElementWithKeyFocusProps } from './keyboardNavigation.types';
+import { MAX_LEVEL_FOR_FOLDERS } from '../TreeStructure';
+
+export const KEYBOARD_KEYS_OF_INTEREST = ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', ' '];
+
+// Traverse upwards, incase parent is last element of its parent..
+const traverseUpwards = (
+  inital: FolderStructureProps[],
+  setFocusedFolderId: SetFocusedFolderId,
+  paths: number[],
+  index: number,
+) => {
+  let findParent: FolderStructureProps[] = inital;
+  const parentNextIds: (string | false)[] = [];
+  paths.forEach((pathIndex) => {
+    const nextParent = findParent ? findParent[pathIndex + 1] : undefined;
+    parentNextIds.push(nextParent?.id || false);
+    findParent = findParent[pathIndex].data || [];
+  });
+  if (!parentNextIds.length) {
+    parentNextIds.push(findParent[index + 1]?.id || false);
+  }
+  // We use a reversed version of parentNextIds, filtered out falses, to find the next element
+  // No newId? We are at the end of the tree so we wont update.
+  const newId = parentNextIds.reverse().filter((id) => id)[0];
+  if (newId) {
+    setFocusedFolderId(newId);
+  }
+};
+
+const keyboardNavigation = ({
+  e,
+  data,
+  onToggleOpen,
+  setFocusedFolderId,
+  focusedFolderId: id,
+  openFolders,
+}: KeyboardNavigationProps): string | undefined => {
+  if (e.key === ' ' && document.activeElement?.nodeName === 'INPUT') {
+    return;
+  }
+
+  // We are navigating in the tree.
+  // We need to find the next folder in the tree
+  const elementWithKeyFocus: ElementWithKeyFocusProps = {
+    paths: [],
+    index: 0,
+  };
+
+  const updatePathToElementWithKeyFocus = (
+    data: FolderStructureProps[],
+    paths: number[],
+    parent: FolderStructureProps[],
+    parentId?: string,
+  ): boolean =>
+    data.some(({ data: childData, id: dataId, url }, _index) => {
+      if (dataId === id) {
+        elementWithKeyFocus.paths = paths;
+        elementWithKeyFocus.index = _index;
+        elementWithKeyFocus.isOpen = openFolders.has(dataId) && childData && childData.length > 0;
+        elementWithKeyFocus.data = childData;
+        elementWithKeyFocus.parent = parent;
+        elementWithKeyFocus.parentId = parentId;
+        elementWithKeyFocus.url = url;
+        return true;
+      }
+      return childData ? updatePathToElementWithKeyFocus(childData, [...paths, _index], [...childData], dataId) : false;
+    });
+  if (!updatePathToElementWithKeyFocus(data, [], data)) {
+    // Couldn't find its location in the tree.
+    // This should not happen, reset its value to root.
+    setFocusedFolderId(e.key === 'ArrowDown' ? data[0].id : undefined);
+    return;
+  }
+  e.preventDefault();
+  e.stopPropagation();
+
+  if (e.key === ' ') {
+    const simulatedEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    });
+    document.activeElement && document.activeElement.dispatchEvent(simulatedEvent);
+    return;
+  }
+
+  if (e.key === 'ArrowRight') {
+    if (
+      !elementWithKeyFocus.isOpen &&
+      elementWithKeyFocus.data?.length &&
+      id &&
+      elementWithKeyFocus.paths.length < MAX_LEVEL_FOR_FOLDERS - 1
+    ) {
+      onToggleOpen(id);
+    }
+    return;
+  }
+  if (e.key === 'ArrowLeft') {
+    if (id && elementWithKeyFocus.isOpen) {
+      onToggleOpen(id);
+    }
+    return;
+  }
+
+  if (!id && e.key === 'ArrowDown') {
+    setFocusedFolderId(data[0].id);
+    return;
+  }
+  if (!id) {
+    return;
+  }
+  // Move up
+  if (e.key === 'ArrowUp') {
+    if (elementWithKeyFocus.index > 0) {
+      // Move upwards to the parent folder
+      setFocusedFolderId(
+        elementWithKeyFocus.parent ? elementWithKeyFocus.parent[elementWithKeyFocus.index - 1].id : undefined,
+      );
+    } else if (elementWithKeyFocus.paths.length > 0) {
+      elementWithKeyFocus.paths.pop();
+      let findParent = data;
+      elementWithKeyFocus.paths.forEach((index) => {
+        findParent = findParent[index].data as FolderStructureProps[];
+      });
+      const parentsCurrentIndex = findParent.findIndex(({ id }) => id === elementWithKeyFocus.parentId);
+      setFocusedFolderId(findParent[parentsCurrentIndex].id);
+    }
+    return;
+  }
+
+  if (elementWithKeyFocus.isOpen) {
+    if (elementWithKeyFocus.data?.length) {
+      setFocusedFolderId(elementWithKeyFocus.data[0].id);
+    } else {
+      // move to next child of parent if any... need new traverse :-/
+      traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
+    }
+    return;
+  }
+
+  if (elementWithKeyFocus.parent && elementWithKeyFocus.index < elementWithKeyFocus.parent?.length - 1) {
+    // Move downwards to the next child
+    setFocusedFolderId(elementWithKeyFocus.parent[elementWithKeyFocus.index + 1].id);
+    return;
+  }
+
+  traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
+  return;
+};
+
+export default keyboardNavigation;

package/src/TreeStructure/keyboardNavigation/keyboardNavigation.types.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 { FolderStructureProps, SetFocusedFolderId } from '../TreeStructure.types';
+
+export interface KeyboardNavigationProps {
+  e: React.KeyboardEvent<HTMLElement>;
+  data: FolderStructureProps[];
+  setFocusedFolderId: SetFocusedFolderId;
+  openFolders: Set<string>;
+  onToggleOpen: (id: string) => void;
+  focusedFolderId: string | undefined;
+}
+
+export interface ElementWithKeyFocusProps {
+  paths: number[];
+  index: number;
+  data?: FolderStructureProps[];
+  parent?: FolderStructureProps[];
+  parentId?: string;
+  isOpen?: boolean;
+  url?: string;
+}

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);
+  });
+});