[CRT-178] Update lesson list UI

frontend/content/compiled-locales/en.json

@@ -276,7 +276,7 @@
   "ClassNavigation.sessionsTab": [
     {
       "type": 0,
-      "value": "Sessions"
+      "value": "Lessons"
     }
   ],
   "ClassNavigation.studentsTab": [
@@ -1080,19 +1080,19 @@
   "SessionList.columns.actions": [
     {
       "type": 0,
-      "value": "Actions"
+      "value": "Quick Action"
     }
   ],
   "SessionList.columns.finishedAt": [
     {
       "type": 0,
-      "value": "Finished at"
+      "value": "End Date"
     }
   ],
   "SessionList.columns.startedAt": [
     {
       "type": 0,
-      "value": "Started at"
+      "value": "Start Date"
     }
   ],
   "SessionList.columns.tags": [
@@ -1110,7 +1110,7 @@
   "SessionList.copySessionLink": [
     {
       "type": 0,
-      "value": "Copy Session Link"
+      "value": "Share"
     }
   ],
   "SessionList.deleteConfirmation.body": [
@@ -1985,4 +1985,4 @@
       "value": "${path} must be a valid UUID"
     }
   ]
-}
+}

frontend/content/locales/en.json

@@ -135,7 +135,7 @@
     "message": "Class Details"
   },
   "ClassNavigation.sessionsTab": {
-    "message": "Sessions"
+    "message": "Lessons"
   },
   "ClassNavigation.studentsTab": {
     "message": "Students"
@@ -508,13 +508,13 @@
     "message": "Analysis - {title}"
   },
   "SessionList.columns.actions": {
-    "message": "Actions"
+    "message": "Quick Action"
   },
   "SessionList.columns.finishedAt": {
-    "message": "Finished at"
+    "message": "End Date"
   },
   "SessionList.columns.startedAt": {
-    "message": "Started at"
+    "message": "Start Date"
   },
   "SessionList.columns.tags": {
     "message": "Tags"
@@ -523,7 +523,7 @@
     "message": "Title"
   },
   "SessionList.copySessionLink": {
-    "message": "Copy Session Link"
+    "message": "Share"
   },
   "SessionList.deleteConfirmation.body": {
     "message": "Are you sure you want to delete this session?"

frontend/package.json

@@ -16,6 +16,7 @@
     "i18n:compile": "formatjs compile-folder --ast --format crowdin content/locales content/compiled-locales",
     "i18n:fill": "node ./scripts/fill-locales.mjs",
     "i18n:update": "yarn i18n:extract && yarn i18n:fill && yarn i18n:compile",
+    "chakra:update": "npx @chakra-ui/cli typegen ./src/components/ui/Theme.ts",
     "test": "yarn test:jest && yarn test:playwright",
     "test:cov:enable": "shx cp .babelrc.disabled .babelrc",
     "test:cov:disable": "shx rm .babelrc",

frontend/src/api/collimator/hooks/sessions/useAllClassSessions.ts

@@ -1,11 +1,5 @@
 import useSWR from "swr";
-import { LazyTableResult, LazyTableState } from "@/components/DataTable";
-import {
-  ApiResponse,
-  fromDtos,
-  getSwrParamererizedKey,
-  transformToLazyTableResult,
-} from "../helpers";
+import { ApiResponse, fromDtos, getSwrParamererizedKey } from "../helpers";
 import {
   getSessionsControllerFindAllV0Url,
   sessionsControllerFindAllV0,
@@ -38,21 +32,3 @@ export const useAllClassSessions = (
     () => fetchByClassIdAndTransform(authOptions, classId, params),
   );
 };
-
-export const useAllClassSessionsLazyTable = (
-  classId: number,
-  _state: LazyTableState,
-): ApiResponse<LazyTableResult<GetSessionsReturnType[0]>, Error> => {
-  const authOptions = useAuthenticationOptions();
-
-  return useSWR(
-    getSwrParamererizedKey(
-      (_params?: undefined) => getSessionsControllerFindAllV0Url(classId),
-      undefined,
-    ),
-    () =>
-      fetchByClassIdAndTransform(authOptions, classId).then(
-        transformToLazyTableResult,
-      ),
-  );
-};

frontend/src/components/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 import { Breadcrumb, HStack, Icon } from "@chakra-ui/react";
 import { FormattedMessage } from "react-intl";
-import { Children, Fragment, isValidElement } from "react";
+import React from "react";
 import { LuHouse } from "react-icons/lu";
 import BreadcrumbItem from "./BreadcrumbItem";
 
@@ -16,21 +16,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
           <Icon as={LuHouse} />
           <FormattedMessage id="Breadcrumbs.home" defaultMessage="Home" />
         </BreadcrumbItem>
-
-        {Children.map(children, (child, index) => {
-          if (!isValidElement(child)) {
-            return null;
-          }
-
-          const childKey = child.key ?? `breadcrumb-${index}`;
-
-          return (
-            <Fragment key={childKey}>
-              <Breadcrumb.Separator />
-              {child}
-            </Fragment>
-          );
-        })}
+        {children}
       </HStack>
     </Breadcrumb.List>
   </Breadcrumb.Root>

frontend/src/components/Button.tsx

@@ -13,21 +13,11 @@ import {
   useCallback,
   useState,
   useRef,
-  useMemo,
   MouseEvent as MouseEventReact,
-  DetailedHTMLProps,
-  ButtonHTMLAttributes,
+  ComponentProps,
 } from "react";
-import { isNonNull } from "@/utilities/is-non-null";
-import { ButtonVariant } from "@/components/ui/recipes/buttons/Button.recipe";
 
-export type ButtonProps = Omit<
-  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
-  "variant"
-> & {
-  variant?: ButtonVariant;
-  active?: boolean;
-};
+export type ButtonProps = ComponentProps<typeof ChakraButton>;
 
 const ButtonContent = chakra(HStack, {
   base: {
@@ -38,8 +28,6 @@ const ButtonContent = chakra(HStack, {
 const Button = ({
   onClick: onClickFn,
   children,
-  variant,
-  active,
   ...buttonProps
 }: ButtonProps) => {
   const [isLoading, setIsLoading] = useState(false);
@@ -84,22 +72,8 @@ const Button = ({
     [onClickFn, showPromiseResult],
   );
 
-  const className = useMemo(
-    () =>
-      [active ? "active" : null, buttonProps.className ?? null]
-        .filter(isNonNull)
-        .join(" "),
-    [buttonProps.className, active],
-  );
-
   return (
-    <ChakraButton
-      onClick={onClick}
-      loading={isLoading}
-      className={className}
-      variant={variant}
-      {...buttonProps}
-    >
+    <ChakraButton onClick={onClick} loading={isLoading} {...buttonProps}>
       <ButtonContent>
         <Box>{children}</Box>
         {isLoading && <Spinner data-testid="loading-spinner" size="sm" />}
@@ -118,5 +92,4 @@ const Button = ({
   );
 };
 
-export { ButtonVariant };
 export default Button;