DTL (Test > Levelbuilder): 4c5bff10

apps/src/Globals.d.ts

@@ -8,6 +8,9 @@ declare module '*.module.scss' {
   export default classes;
 }
 
+// Type definition for plain SCSS files imported in TypeScript files
+declare module '*.scss';
+
 // Declaring dashboard as 'any' because it is not well documented.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const dashboard: any;

apps/src/aiDifferentiation/AiDiffChatHeader.tsx

@@ -115,13 +115,19 @@ const AiDiffChatHeader: React.FC<AiDiffChatHeaderProps> = ({
       <div className={style.chatHeaderButtons}>
         <ActionDropdown
           size="s"
+          useIconButton={false}
           triggerButtonProps={{
-            size: 's',
-            color: 'gray',
-            type: 'secondary',
-            text: commonI18n.aiDifferentiation_suggest_prompt(),
+            size: 'small',
+            color: 'tertiary',
+            variant: 'outlined',
+            children: commonI18n.aiDifferentiation_suggest_prompt(),
             'aria-label': commonI18n.aiDifferentiation_suggest_prompt(),
-            iconLeft: {iconName: 'solid-pen-sparkle', iconFamily: 'kit'},
+            startIcon: (
+              <FontAwesomeV6Icon
+                iconName="solid-pen-sparkle"
+                iconFamily="kit"
+              />
+            ),
           }}
           labelText={commonI18n.aiDifferentiation_suggest_prompt()}
           name="aiDiffChatHeaderDropdown"

apps/src/aichat/views/aiChatHeaderButtons/CopyChatHistoryButton.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import {useSelector} from 'react-redux';
 
 import {selectAllVisibleMessages, sendAnalytics} from '@cdo/apps/aichat/redux';
 import IconButtonWithTooltip from '@cdo/apps/lab2/views/components/IconButtonWithTooltip';
 import {EVENTS} from '@cdo/apps/metrics/AnalyticsConstants';
 import copyToClipboard from '@cdo/apps/util/copyToClipboard';
-import {useAppDispatch} from '@cdo/apps/util/reduxHooks';
+import {useAppDispatch, useAppSelector} from '@cdo/apps/util/reduxHooks';
 import {AiInteractionStatus as Status} from '@cdo/generated-scripts/sharedConstants';
 
 import {timestampToDateTime} from '../../redux/utils';
 import {
   ChatEvent,
+  ChatEventDescriptionKey,
   isChatMessage,
   isModelUpdate,
   isNotification,
+  isUserActionEvent,
+  WorkspaceTeacherViewTab,
 } from '../../types';
 import {AI_CUSTOMIZATIONS_LABELS} from '../modelCustomization/constants';
 
 const CopyChatHistoryButton: React.FunctionComponent = () => {
-  const messages = useSelector(selectAllVisibleMessages);
+  const visibleMessages = useAppSelector(selectAllVisibleMessages);
+  const studentChatHistory = useAppSelector(
+    state => state.aichat.studentChatHistory
+  );
+  const selectedTab = useAppSelector(
+    state => state.aichat.chatWorkspaceSelectedTab
+  );
+  const isViewingStudentHistory =
+    selectedTab === WorkspaceTeacherViewTab.STUDENT_CHAT_HISTORY;
+  const messages = isViewingStudentHistory
+    ? studentChatHistory
+    : visibleMessages;
   const dispatch = useAppDispatch();
 
   const handleCopy = () => {
@@ -72,6 +85,16 @@ function chatEventToFormattedString(chatEvent: ChatEvent) {
   if (isNotification(chatEvent)) {
     return `[${formattedTimestamp} - Notification] ${chatEvent.text}`;
   }
+
+  if (isUserActionEvent(chatEvent)) {
+    const descriptions: {[key in ChatEventDescriptionKey]: string} = {
+      CLEAR_CHAT: 'The user cleared the chat workspace.',
+      LOAD_LEVEL: 'The user loaded the level.',
+    };
+    return `[${formattedTimestamp} - User Action] ${
+      descriptions[chatEvent.descriptionKey]
+    }`;
+  }
 }
 
 export default CopyChatHistoryButton;

apps/src/aichat/views/assets/UploadButton.tsx

@@ -1,9 +1,6 @@
 import {ActionDropdown} from '@code-dot-org/component-library/dropdown';
 import FontAwesomeV6Icon from '@code-dot-org/component-library/fontAwesomeV6Icon';
-import {
-  Button as MuiButton,
-  ButtonProps as MuiButtonProps,
-} from '@mui/material';
+import {Button as MuiButton, IconButton as MuiIconButton} from '@mui/material';
 import React, {ChangeEvent, useState} from 'react';
 
 import StarterAssetsDialog from '@cdo/apps/lab2/views/components/starterAssetsDialog';
@@ -91,56 +88,33 @@ const UploadButton: React.FC<UploadButtonProps> = ({
     );
   };
 
-  // TODO: Set of legacy DSCO props, remove once Dropdowns are moved to MUI.
-  const DSCO_buttonPropsCommon = {
-    type: 'secondary' as const,
-    color: 'gray' as const,
+  const buttonPropsCommon = {
+    variant: 'outlined' as const,
+    color: 'tertiary' as const,
   };
 
-  const DSCO_buttonPropsWithLabel = {
-    ...DSCO_buttonPropsCommon,
-    text: 'Add file',
-    iconLeft: {iconName: 'plus'},
-  };
-
-  const DSCO_buttonPropsIconOnly = {
-    ...DSCO_buttonPropsCommon,
-    icon: {iconName: 'plus', iconStyle: 'solid' as const},
-  };
-
-  const DSCO_commonProps = {
-    size: 'xs',
-    disabled: numStagedFiles >= MAX_NUM_FILES || isDisabled,
-  } as const;
-
-  const buttonPropsCommon: MuiButtonProps = {
-    variant: 'outlined',
-    color: 'secondary',
-  };
-
-  const buttonPropsWithLabel: MuiButtonProps = {
+  const buttonPropsWithLabel = {
     ...buttonPropsCommon,
     children: 'Add file',
     startIcon: <FontAwesomeV6Icon iconName="plus" iconStyle="solid" />,
   };
 
-  const buttonPropsIconOnly: MuiButtonProps = {
+  const buttonPropsIconOnly = {
     ...buttonPropsCommon,
-    startIcon: <FontAwesomeV6Icon iconName="plus" iconStyle="solid" />,
+    children: <FontAwesomeV6Icon iconName="plus" iconStyle="solid" />,
   };
 
-  const commonProps = {
-    size: 'extraSmall',
-    disabled: numStagedFiles >= MAX_NUM_FILES || isDisabled,
-  } as const;
+  const isButtonDisabled = numStagedFiles >= MAX_NUM_FILES || isDisabled;
 
   const uploadButton = hasStarterAssets ? (
     <ActionDropdown
-      {...DSCO_commonProps}
+      size="xs"
+      disabled={isButtonDisabled}
       name="uploadDropdown"
       labelText={'Upload'}
+      useIconButton={!showLabel}
       triggerButtonProps={
-        showLabel ? DSCO_buttonPropsWithLabel : DSCO_buttonPropsIconOnly
+        showLabel ? buttonPropsWithLabel : buttonPropsIconOnly
       }
       menuVerticalPlacement="top"
       options={[
@@ -165,13 +139,27 @@ const UploadButton: React.FC<UploadButtonProps> = ({
         },
       ]}
     />
-  ) : (
+  ) : showLabel ? (
     <MuiButton
-      type="button"
-      {...(showLabel ? buttonPropsWithLabel : buttonPropsIconOnly)}
-      {...commonProps}
+      variant={buttonPropsCommon.variant}
+      color={buttonPropsCommon.color}
+      size="extraSmall"
+      disabled={isButtonDisabled}
       onClick={onDeviceUploadClick}
-    />
+      startIcon={<FontAwesomeV6Icon iconName="plus" iconStyle="solid" />}
+    >
+      Add file
+    </MuiButton>
+  ) : (
+    <MuiIconButton
+      variant={buttonPropsCommon.variant}
+      color={buttonPropsCommon.color}
+      size="extraSmall"
+      disabled={isButtonDisabled}
+      onClick={onDeviceUploadClick}
+    >
+      <FontAwesomeV6Icon iconName="plus" iconStyle="solid" />
+    </MuiIconButton>
   );
 
   return (

apps/src/aichat/views/modelCustomization/SetupCustomization.tsx

@@ -1,4 +1,5 @@
 import SimpleDropdown from '@code-dot-org/component-library/dropdown/simpleDropdown';
+import FontAwesomeV6Icon from '@code-dot-org/component-library/fontAwesomeV6Icon';
 import Slider, {SliderProps} from '@code-dot-org/component-library/slider';
 import {Button as MuiButton} from '@mui/material';
 import classNames from 'classnames';
@@ -153,17 +154,11 @@ const SetupCustomization: React.FunctionComponent = () => {
     },
     className: styles.temperatureSlider,
     leftButtonProps: {
-      icon: {
-        iconName: 'minus',
-        title: 'Decrease',
-      },
+      children: <FontAwesomeV6Icon iconName="minus" title="Decrease" />,
       ['aria-label']: 'Decrease',
     },
     rightButtonProps: {
-      icon: {
-        iconName: 'plus',
-        title: 'Increase',
-      },
+      children: <FontAwesomeV6Icon iconName="plus" title="Increase" />,
       ['aria-label']: 'Increase',
     },
   };

apps/src/code-studio/components/ShareAllowedDialog.jsx

@@ -279,7 +279,7 @@ class ShareAllowedDialog extends React.Component {
               }
               primaryButtonProps={{
                 onClick: this.close,
-                text: i18n.ok(),
+                children: i18n.ok(),
                 id: 'uitest-sharing-disabled-button',
               }}
             />

apps/src/code-studio/pd/professional_learning/LandingPageWorkshopsTable.jsx

@@ -237,12 +237,12 @@ export default class LandingPageWorkshopsTable extends React.Component {
             description="Are you sure you want to cancel your enrollment in this course?"
             primaryButtonProps={{
               onClick: this.cancelEnrollment,
-              text: 'Yes - cancel my enrollment',
-              color: 'destructive',
+              children: 'Yes - cancel my enrollment',
+              color: 'error',
             }}
             secondaryButtonProps={{
               onClick: this.dismissCancelModal,
-              text: 'No - stay enrolled in this class',
+              children: 'No - stay enrolled in this class',
             }}
           />
         )}

apps/src/code-studio/pd/professional_learning/RegionalWorkshopCatalog.jsx

@@ -320,7 +320,7 @@ export default function RegionalWorkshopCatalog({
           title={regionalPartnerName}
           description={regionalPartnerInfo}
           primaryButtonProps={{
-            text: 'Return to workshops',
+            children: 'Return to workshops',
             onClick: () => setShowRPInfoDialog(false),
           }}
         />

apps/src/code-studio/pd/workshop_dashboard/workshop_form/WorkshopForm.tsx

@@ -282,13 +282,13 @@ export const WorkshopForm: FC<WorkshopFormProps> = ({config}) => {
           description="You're making an important update to your workshop, would you like your enrollees to be notified via email?"
           mode="light"
           primaryButtonProps={{
-            text: 'Notify',
-            isPending: loadingState === 'notifyLoading',
+            children: 'Notify',
+            loading: loadingState === 'notifyLoading',
             onClick: () => publish(true),
           }}
           secondaryButtonProps={{
-            text: "Don't notify",
-            isPending: loadingState === 'dontNotifyLoading',
+            children: "Don't notify",
+            loading: loadingState === 'dontNotifyLoading',
             onClick: () => publish(false),
           }}
           onClose={() => {

apps/src/code-studio/pd/workshop_dashboard/workshops/enrollments/WorkshopEnrollments.tsx

@@ -438,16 +438,16 @@ export const WorkshopEnrollments: FC = () => {
             </Box>
           }
           primaryButtonProps={{
-            text: `Remove enrollment${s}`,
-            size: 's',
+            children: `Remove enrollment${s}`,
+            size: 'small',
             onClick: handleRemoveEnrollments,
-            color: 'destructive',
+            color: 'error',
           }}
           secondaryButtonProps={{
-            size: 's',
-            text: 'Cancel',
-            type: 'secondary',
-            color: 'gray',
+            size: 'small',
+            children: 'Cancel',
+            color: 'tertiary',
+            variant: 'outlined',
             onClick: () => {
               setActiveDialog(null);
               setRemoveEnrollmentError('');
@@ -501,16 +501,16 @@ export const WorkshopEnrollments: FC = () => {
             </Box>
           }
           primaryButtonProps={{
-            text: `Move enrollment${s}`,
-            size: 's',
+            children: `Move enrollment${s}`,
+            size: 'small',
             onClick: handleMoveEnrollments,
             disabled: !moveToWorkshopId,
           }}
           secondaryButtonProps={{
-            size: 's',
-            text: 'Cancel',
-            type: 'secondary',
-            color: 'gray',
+            size: 'small',
+            children: 'Cancel',
+            color: 'tertiary',
+            variant: 'outlined',
             onClick: () => {
               setActiveDialog(null);
               setMoveToWorkshopId('');

apps/src/code-studio/pd/workshop_dashboard/workshops/overview/sections/WorkshopStatusSection.tsx

@@ -39,7 +39,7 @@ const dialogs = [
     description:
       'Ending this workshop will close the attendance. Are you sure you want to end this workshop now?',
     primaryButtonProps: {
-      color: 'destructive' as const,
+      color: 'error' as const,
     },
   },
   {
@@ -351,17 +351,17 @@ export const WorkshopStatusSection: React.FC<WorkshopStatusSectionProps> = ({
             title={`${label} Workshop?`}
             description={description}
             primaryButtonProps={{
-              text: `${label} Workshop`,
-              size: 's',
+              children: `${label} Workshop`,
+              size: 'small',
               disabled: isUpdating,
               onClick: generateHandler(stateKey),
               ...primaryButtonProps,
             }}
             secondaryButtonProps={{
-              size: 's',
-              text: 'Cancel',
-              type: 'secondary',
-              color: 'gray',
+              size: 'small',
+              children: 'Cancel',
+              color: 'tertiary',
+              variant: 'outlined',
               onClick: () => setActiveDialog(null),
               disabled: isUpdating,
             }}

apps/src/code-studio/pd/workshops/components/CancelWorkshopEnrollment.tsx

@@ -85,12 +85,12 @@ const CancelWorkshopEnrollmentButton: React.FC<
           description="Are you sure you want to cancel your registration?"
           primaryButtonProps={{
             onClick: handleCancel,
-            text: 'Yes, cancel registration',
-            color: 'destructive',
+            children: 'Yes, cancel registration',
+            color: 'error',
           }}
           secondaryButtonProps={{
             onClick: () => setShowConfirmation(false),
-            text: 'No, keep registration',
+            children: 'No, keep registration',
           }}
           onClose={() => setShowConfirmation(false)}
         />