@ndla/ui 13.2.1 → 15.0.0

package/src/TreeStructure/helperFunctions.ts

@@ -0,0 +1,52 @@
+import { FolderStructureProps } from './TreeStructure.types';
+
+const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[] => {
+  const paths = (dataChildren: FolderStructureProps[], path: string[]): string[] => {
+    for (const { id, data: dataChildrenSub } of dataChildren) {
+      if (id === findId) {
+        return [...path, id];
+      } else if (dataChildrenSub?.length) {
+        return paths(dataChildrenSub, [...path, id]);
+      }
+    }
+    return [];
+  };
+  return paths(data, []);
+};
+
+const getIdPathsOfFolder = (data: FolderStructureProps[], findId: string): number[] => {
+  let currentPath: number[] = [];
+  const paths = (dataChildren: FolderStructureProps[], path: number[]) => {
+    dataChildren.forEach(({ id, data: dataChildrenSub }, _index) => {
+      if (id === findId) {
+        currentPath = [...path, _index];
+      } else if (dataChildrenSub?.length) {
+        paths(dataChildrenSub, [...path, _index]);
+      }
+    });
+  };
+  paths(data, []);
+  return currentPath;
+};
+
+const getFolderName = (data: FolderStructureProps[], findId: string | undefined): string | undefined => {
+  if (!findId) {
+    return undefined;
+  }
+  let folderName: string | undefined;
+  const paths = (dataChildren: FolderStructureProps[]) => {
+    dataChildren.some(({ id, name, data: dataChildrenSub }, _index) => {
+      if (id === findId) {
+        folderName = name;
+        return true;
+      } else if (dataChildrenSub?.length) {
+        return paths(dataChildrenSub);
+      }
+      return false;
+    });
+  };
+  paths(data);
+  return folderName;
+};
+
+export { getPathOfFolder, getIdPathsOfFolder, getFolderName };

package/src/TreeStructure/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 TreeStructure from './TreeStructure';
+export type { FolderStructureProps, TreeStructureProps } from './TreeStructure.types';
+export { TreeStructure };

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