feat: improve settings UI

cypress/e2e/builder/enterSettings.cy.ts

@@ -2,22 +2,24 @@ import { Context, PermissionLevel } from '@graasp/sdk';
 
 import { KeywordsData } from '../../../src/config/appSettingTypes';
 import {
+  ADD_KEYWORD_BUTTON_CY,
   BUILDER_VIEW_CY,
+  CHATBOT_CONTAINER_CY,
   DELETE_KEYWORD_BUTTON_CY,
+  ENTER_DEFINITION_FIELD_CY,
   ENTER_KEYWORD_FIELD_CY,
   INITIAL_CHATBOT_PROMPT_INPUT_FIELD_CY,
   INITIAL_PROMPT_INPUT_FIELD_CY,
   KEYWORD_LIST_ITEM_CY,
-  SAVE_KEYWORDS_BUTTON_CY,
-  SAVE_TEXT_BUTTON_CY,
-  SAVE_TITLE_BUTTON_CY,
+  SETTINGS_SAVE_BUTTON_CY,
   TEXT_INPUT_FIELD_CY,
   TITLE_INPUT_FIELD_CY,
   USE_CHATBOT_DATA_CY,
   buildDataCy,
 } from '../../../src/config/selectors';
 import {
   MOCK_APP_SETTINGS,
+  MOCK_APP_SETTINGS_USING_CHATBOT,
   MOCK_INITIAL_CHATBOT_PROMPT_SETTING,
   MOCK_INITIAL_PROMPT_SETTING,
   MOCK_KEYWORDS_SETTING,
@@ -47,16 +49,17 @@ describe('Enter Settings', () => {
     cy.get(buildDataCy(TITLE_INPUT_FIELD_CY))
       .should('be.visible')
       .type('Title');
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).click();
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).should('be.disabled');
 
-    cy.get(buildDataCy(SAVE_TITLE_BUTTON_CY)).click();
+    cy.get(buildDataCy(TITLE_INPUT_FIELD_CY)).type('New Title');
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).should('not.be.disabled');
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).click();
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).should('be.disabled');
 
-    cy.get(buildDataCy(SAVE_TITLE_BUTTON_CY)).should('be.disabled');
-
-    cy.get(buildDataCy(TITLE_INPUT_FIELD_CY)).type(
-      '{backspace}{backspace}{backspace}',
-    );
-
-    cy.get(buildDataCy(SAVE_TITLE_BUTTON_CY)).should('not.be.disabled');
+    // test that multiline is disabled, because it is rendered inline in player
+    cy.get(buildDataCy(TITLE_INPUT_FIELD_CY)).type('{enter}');
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).should('be.disabled');
   });
 
   it('set text', () => {
@@ -66,41 +69,42 @@ describe('Enter Settings', () => {
         'Lorem ipsum dolor sit amet. Ut optio laborum qui ducimus rerum eum illum possimus non quidem facere.',
       );
 
-    cy.get(buildDataCy(SAVE_TEXT_BUTTON_CY)).click();
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).click();
 
-    cy.get(buildDataCy(SAVE_TEXT_BUTTON_CY)).should('be.disabled');
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).should('be.disabled');
 
     cy.get(buildDataCy(TEXT_INPUT_FIELD_CY)).type(
-      '{backspace}{backspace}{backspace}{backspace}{backspace}',
+      'Quis ea quod necessitatibus sit voluptas culpa ut laborum quia ad nobis numquam.',
     );
 
-    cy.get(buildDataCy(SAVE_TEXT_BUTTON_CY)).should('not.be.disabled');
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).should('not.be.disabled');
   });
 
   it('set keywords', () => {
     cy.get(buildDataCy(ENTER_KEYWORD_FIELD_CY))
       .should('be.visible')
       .type('Lorem');
 
-    cy.get(buildDataCy(KEYWORD_LIST_ITEM_CY)).should('not.exist');
+    cy.get(buildDataCy(ENTER_DEFINITION_FIELD_CY))
+      .should('be.visible')
+      .type('Latin');
 
-    cy.get(buildDataCy(ENTER_KEYWORD_FIELD_CY)).type('{enter}');
-    cy.get(buildDataCy(KEYWORD_LIST_ITEM_CY)).should('exist');
+    cy.get(buildDataCy(KEYWORD_LIST_ITEM_CY)).should('not.exist');
 
-    cy.get(buildDataCy(SAVE_KEYWORDS_BUTTON_CY))
+    cy.get(buildDataCy(ADD_KEYWORD_BUTTON_CY))
       .should('be.visible')
       .should('not.be.disabled')
       .click()
       .should('be.disabled');
+    cy.get(buildDataCy(KEYWORD_LIST_ITEM_CY)).should('exist');
 
     cy.get(buildDataCy(DELETE_KEYWORD_BUTTON_CY)).should('be.visible').click();
     cy.get(buildDataCy(KEYWORD_LIST_ITEM_CY)).should('not.exist');
-
-    cy.get(buildDataCy(SAVE_KEYWORDS_BUTTON_CY)).should('not.be.disabled');
   });
 
-  it.only('does not use chatbot (by default)', () => {
+  it('does not use chatbot (by default)', () => {
     cy.get(buildDataCy(USE_CHATBOT_DATA_CY)).should('not.be.checked');
+    cy.get(buildDataCy(CHATBOT_CONTAINER_CY)).should('not.exist');
   });
 });
 
@@ -109,7 +113,7 @@ describe('Load Settings', () => {
     cy.setUpApi({
       database: {
         appData: [],
-        appSettings: MOCK_APP_SETTINGS,
+        appSettings: MOCK_APP_SETTINGS_USING_CHATBOT,
       },
       appContext: {
         context: Context.Builder,

cypress/fixtures/appData.ts

@@ -17,8 +17,8 @@ export const MOCK_APP_DATA: AppData[] = [
     member: CURRENT_MEMBER,
     creator: CURRENT_MEMBER,
     item: MOCK_SERVER_ITEM,
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     type: APP_DATA_TYPES.BOT_COMMENT,
     visibility: AppDataVisibility.Member,
   },
@@ -31,8 +31,8 @@ export const MOCK_APP_DATA: AppData[] = [
     member: CURRENT_MEMBER,
     creator: CURRENT_MEMBER,
     item: MOCK_SERVER_ITEM,
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     type: APP_DATA_TYPES.STUDENT_COMMENT,
     visibility: AppDataVisibility.Member,
   },
@@ -45,8 +45,8 @@ export const MOCK_APP_DATA: AppData[] = [
     member: CURRENT_MEMBER,
     creator: CURRENT_MEMBER,
     item: MOCK_SERVER_ITEM,
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     type: APP_DATA_TYPES.BOT_COMMENT,
     visibility: AppDataVisibility.Member,
   },
@@ -59,8 +59,8 @@ export const MOCK_APP_DATA: AppData[] = [
     member: CURRENT_MEMBER,
     creator: CURRENT_MEMBER,
     item: MOCK_SERVER_ITEM,
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     type: APP_DATA_TYPES.STUDENT_COMMENT,
     visibility: AppDataVisibility.Member,
   },
@@ -73,8 +73,8 @@ export const MOCK_APP_DATA: AppData[] = [
     member: CURRENT_MEMBER,
     creator: CURRENT_MEMBER,
     item: MOCK_SERVER_ITEM,
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     type: APP_DATA_TYPES.BOT_COMMENT,
     visibility: AppDataVisibility.Member,
   },

cypress/fixtures/appSettings.ts

@@ -6,16 +6,16 @@ import {
   INITIAL_CHATBOT_PROMPT_SETTING_KEY,
   INITIAL_PROMPT_SETTING_KEY,
   KEYWORDS_SETTING_KEY,
+  Keyword,
   TEXT_RESOURCE_SETTING_KEY,
   USE_CHATBOT_SETTING_KEY,
-  keyword,
 } from '../../src/config/appSettingTypes';
 import { CURRENT_MEMBER, MOCK_SERVER_ITEM } from '../../src/data/db';
 
 export const MOCK_TEXT_RESOURCE =
   'Lorem ipsum dolor sit amet. Ut optio laborum qui ducimus rerum eum illum possimus non quidem facere. A neque quia et placeat exercitationem vel necessitatibus Quis ea quod necessitatibus sit voluptas culpa ut laborum quia ad nobis numquam. Quo quibusdam maiores et numquam molestiae ut mollitia quaerat et voluptates autem qui expedita delectus aut aliquam expedita et odit incidunt. Id quia nulla est voluptate repellat non internos voluptatem sed cumque omnis et consequatur placeat qui illum aperiam eos consequatur suscipit.';
 
-export const MOCK_KEYWORDS: keyword[] = [
+export const MOCK_KEYWORDS: Keyword[] = [
   { word: 'lorem', def: 'definition of lorem is blablabla' },
   { word: 'ispum', def: 'ipsum is blablabla' },
   { word: 'et', def: 'et means blablabla' },
@@ -28,8 +28,8 @@ export const MOCK_TEXT_RESOURCE_SETTING: AppSetting = {
   data: { text: MOCK_TEXT_RESOURCE },
   item: MOCK_SERVER_ITEM,
   creator: CURRENT_MEMBER,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
 };
 
 export const MOCK_KEYWORDS_SETTING: AppSetting = {
@@ -38,8 +38,8 @@ export const MOCK_KEYWORDS_SETTING: AppSetting = {
   data: { keywords: MOCK_KEYWORDS },
   item: MOCK_SERVER_ITEM,
   creator: CURRENT_MEMBER,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
 };
 
 export const MOCK_INITIAL_PROMPT_SETTING: AppSetting = {
@@ -50,8 +50,8 @@ export const MOCK_INITIAL_PROMPT_SETTING: AppSetting = {
   },
   item: MOCK_SERVER_ITEM,
   creator: CURRENT_MEMBER,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
 };
 
 export const MOCK_INITIAL_CHATBOT_PROMPT_SETTING: AppSetting = {
@@ -62,8 +62,8 @@ export const MOCK_INITIAL_CHATBOT_PROMPT_SETTING: AppSetting = {
   },
   item: MOCK_SERVER_ITEM,
   creator: CURRENT_MEMBER,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
 };
 
 export const MOCK_USE_CHATBOT_SETTING: AppSetting = {
@@ -74,8 +74,8 @@ export const MOCK_USE_CHATBOT_SETTING: AppSetting = {
   },
   item: MOCK_SERVER_ITEM,
   creator: CURRENT_MEMBER,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
 };
 
 export const MOCK_APP_SETTINGS = [

src/components/common/chat/ChatbotWindow.tsx

@@ -4,7 +4,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 
-import { keyword } from '../../../config/appSettingTypes';
+import { Keyword } from '../../../config/appSettingTypes';
 import { CHAT_WINDOW_CY, DICTIONNARY_MODE_CY } from '../../../config/selectors';
 import {
   DEFAULT_BORDER_RADIUS,
@@ -16,7 +16,7 @@ import ChatBox from './ChatBox';
 
 type Prop = {
   closeChatbot: () => void;
-  focusWord: keyword;
+  focusWord: Keyword;
   useChatbot: boolean;
   isOpen: boolean;
   onDelete: () => void;

src/components/common/display/Highlighted.tsx

@@ -5,15 +5,15 @@ import ReactMarkdown from 'react-markdown';
 
 import { styled } from '@mui/material';
 
-import { keyword } from '../../../config/appSettingTypes';
+import { Keyword } from '../../../config/appSettingTypes';
 import { DEFAULT_KEYWORD } from '../../../config/appSettings';
 import KeywordButton from './KeywordButton';
 
 type Prop = {
   text: string;
-  words: keyword[];
+  words: Keyword[];
   highlight: boolean;
-  openChatbot: (word: keyword) => void;
+  openChatbot: (word: Keyword) => void;
 };
 
 const StyledReactMarkdown = styled(ReactMarkdown)(({ theme }) => ({
@@ -43,7 +43,7 @@ const Highlighted: FC<Prop> = ({ text, words, highlight, openChatbot }) => {
   const wordsLowerCase = words.map((word) => word.word.toLocaleLowerCase());
   const expr = wordsLowerCase.join('|');
   const parts = text.split(new RegExp(`(${expr})`, 'gi'));
-  const findKeyword = (part: string): keyword =>
+  const findKeyword = (part: string): Keyword =>
     words.find((w) => w.word === part) || DEFAULT_KEYWORD;
   const snippet = parts
     .map((part) =>

src/components/common/display/KeywordButton.tsx

@@ -4,15 +4,15 @@ import { FC } from 'react';
 
 import { Button } from '@mui/material';
 
-import { keyword } from '../../../config/appSettingTypes';
+import { Keyword } from '../../../config/appSettingTypes';
 import { keywordDataCy } from '../../../config/selectors';
 
 type Prop = {
   word: {
     label: string;
-    value: keyword;
+    value: Keyword;
   };
-  onClick: (word: keyword) => void;
+  onClick: (word: Keyword) => void;
 };
 
 const KeywordButton: FC<Prop> = ({ word, onClick }) => {

src/components/common/display/TextDisplay.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 
 import { Box } from '@mui/material';
 
-import { keyword } from '../../../config/appSettingTypes';
+import { Keyword } from '../../../config/appSettingTypes';
 import { TEXT_DISPLAY_FIELD_CY } from '../../../config/selectors';
 import {
   DEFAULT_BORDER_RADIUS,
@@ -14,8 +14,8 @@ import Highlighted from './Highlighted';
 type Prop = {
   text: string;
   highlight: boolean;
-  openChatbot: (word: keyword) => void;
-  keywords: keyword[];
+  openChatbot: (word: Keyword) => void;
+  keywords: Keyword[];
   width?: string;
 };
 

src/components/common/settings/SaveButton.tsx → src/components/common/settings/GraaspButton.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import { Button } from '@mui/material';
+import { Button, SxProps } from '@mui/material';
 
 import { FULL_WIDTH, GRAASP_VIOLET } from '../../../config/stylingConstants';
 
@@ -11,15 +11,19 @@ type Prop = {
   fullWidth?: boolean;
   marginRight?: string;
   minHeight?: string;
+  text: string;
+  sx?: SxProps;
 };
 
-const SaveButton: FC<Prop> = ({
+const GraaspButton: FC<Prop> = ({
   buttonDataCy,
   handleOnClick,
   disabled,
   fullWidth = false,
   marginRight,
   minHeight,
+  text,
+  sx,
 }) => (
   <Button
     data-cy={buttonDataCy}
@@ -29,12 +33,13 @@ const SaveButton: FC<Prop> = ({
       minHeight,
       marginRight,
       ...(fullWidth && { width: FULL_WIDTH }),
+      ...sx,
     }}
     onClick={handleOnClick}
     disabled={disabled}
   >
-    Save
+    {text}
   </Button>
 );
 
-export default SaveButton;
+export default GraaspButton;