feat: improve keywords in builder to allow to edit

cypress/e2e/builder/enterSettings.cy.ts

@@ -2,21 +2,17 @@ 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,
   SETTINGS_SAVE_BUTTON_CY,
   TEXT_INPUT_FIELD_CY,
   TITLE_INPUT_FIELD_CY,
   USE_CHATBOT_DATA_CY,
   buildDataCy,
-  buildKeywordNotExistWarningCy,
+  buildKeywordDefinitionTextInputCy,
+  buildKeywordTextInputCy,
 } from '../../../src/config/selectors';
 import {
   MOCK_APP_SETTINGS,
@@ -81,77 +77,6 @@ describe('Enter Settings', () => {
     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(ENTER_DEFINITION_FIELD_CY))
-      .should('be.visible')
-      .type('Latin');
-
-    cy.get(buildDataCy(KEYWORD_LIST_ITEM_CY)).should('not.exist');
-
-    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');
-  });
-
-  // Detected incomplete keywords in the text.
-  // 'wef' was found incomplete in 'wefwef hello'.
-  // Check that only complete words are detected in text.
-  it('only detect complete keywords', () => {
-    const PRBLEMATIC_TEXT = 'wefwef hello';
-    const PROBLEMATIC_KEYWORDS = ['wef', 'he'];
-
-    cy.get(buildDataCy(TEXT_INPUT_FIELD_CY))
-      .should('be.visible')
-      .type(PRBLEMATIC_TEXT);
-
-    PROBLEMATIC_KEYWORDS.forEach((k) => {
-      cy.get(buildDataCy(ENTER_KEYWORD_FIELD_CY)).should('be.visible').type(k);
-
-      cy.get(buildDataCy(ADD_KEYWORD_BUTTON_CY))
-        .should('be.visible')
-        .should('not.be.disabled')
-        .click()
-        .should('be.disabled');
-
-      cy.get(buildDataCy(buildKeywordNotExistWarningCy(k))).should(
-        'be.visible',
-      );
-    });
-
-    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).should('be.disabled');
-  });
-
-  it('detect keywords case insensitive', () => {
-    const TEXT = 'hello this is a Test';
-    const KEYWORDS = ['Hello', 'test'];
-
-    cy.get(buildDataCy(TEXT_INPUT_FIELD_CY)).should('be.visible').type(TEXT);
-
-    KEYWORDS.forEach((k) => {
-      cy.get(buildDataCy(ENTER_KEYWORD_FIELD_CY)).should('be.visible').type(k);
-
-      cy.get(buildDataCy(ADD_KEYWORD_BUTTON_CY))
-        .should('be.visible')
-        .should('not.be.disabled')
-        .click()
-        .should('be.disabled');
-
-      cy.get(buildDataCy(buildKeywordNotExistWarningCy(k))).should('not.exist');
-    });
-
-    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).should('be.disabled');
-  });
-
   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');
@@ -198,12 +123,14 @@ describe('Load Settings', () => {
     const list = MOCK_APP_SETTINGS.find(
       (appSetting) => appSetting === MOCK_KEYWORDS_SETTING,
     ).data as KeywordsData;
-
     list.keywords.forEach((elem) => {
-      cy.get(buildDataCy(KEYWORD_LIST_ITEM_CY)).should(
+      cy.get(buildDataCy(buildKeywordTextInputCy(elem.word, true))).should(
         'contain',
-        `${elem.word} : ${elem.def}`,
+        elem.word,
       );
+      cy.get(
+        buildDataCy(buildKeywordDefinitionTextInputCy(elem.word, true)),
+      ).should('contain', elem.def);
     });
   });
 });