feat: add function to remove empty hints (#211)

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js

@@ -73,9 +73,18 @@ export const hintsRowHooks = (id, hints, updateSettings) => {
     updateSettings({ hints: modifiedHints });
   };
 
+  const handleEmptyHint = (event) => {
+    const { value } = event.target;
+    if (value === '') {
+      const modifiedHints = hints.filter((hint) => (hint.id !== id));
+      updateSettings({ hints: modifiedHints });
+    }
+  };
+
   return {
     handleChange,
     handleDelete,
+    handleEmptyHint,
   };
 };
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.test.js

@@ -94,10 +94,9 @@ describe('Problem settings hooks', () => {
       expect(updateSettings).toHaveBeenCalledWith({ hints: [hint1, hint2] });
     });
   });
-
   describe('Hint rows hooks', () => {
     const hint1 = { id: 1, value: 'hint1' };
-    const hint2 = { id: 2, value: 'hint2' };
+    const hint2 = { id: 2, value: '' };
     const value = 'modifiedHint';
     const modifiedHint = { id: 2, value };
     const hints = [hint1, hint2];
@@ -112,6 +111,10 @@ describe('Problem settings hooks', () => {
       output.handleDelete();
       expect(updateSettings).toHaveBeenCalledWith({ hints: [hint1] });
     });
+    test('test handleEmptyHint', () => {
+      output.handleEmptyHint({ target: { value: '' } });
+      expect(updateSettings).toHaveBeenCalledWith({ hints: [hint1] });
+    });
   });
 
   describe('Matlab card hooks', () => {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss

@@ -19,9 +19,3 @@
         width: 100%;
     }
 }
-
-.hintRow {
-    .flex-grow-1 {
-        flex-grow: 1;
-    }
-}

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  Form, Icon, IconButton,
+  ActionRow, Form, Icon, IconButton,
 } from '@edx/paragon';
 import { DeleteOutline } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
@@ -11,35 +11,33 @@ export const HintRow = ({
   value,
   handleChange,
   handleDelete,
-  // inject
+  handleEmptyHint,
+  // injected
   intl,
 }) => (
-  <div className="hintRow d-flex flex-row flex-nowrap justify-content-end">
-    <div className="flex-grow-1">
-      <Form.Group>
-        <Form.Control
-          value={value}
-          onChange={handleChange}
-          floatingLabel={intl.formatMessage(messages.hintInputLabel)}
-        />
-      </Form.Group>
-    </div>
-    <div>
-      <IconButton
-        src={DeleteOutline}
-        iconAs={Icon}
-        alt={intl.formatMessage(messages.settingsDeleteIconAltText)}
-        onClick={handleDelete}
-        variant="secondary"
-      />
-    </div>
-  </div>
+  <ActionRow className="mb-4">
+    <Form.Control
+      value={value}
+      onChange={handleChange}
+      onBlur={handleEmptyHint}
+      floatingLabel={intl.formatMessage(messages.hintInputLabel)}
+    />
+    <ActionRow.Spacer />
+    <IconButton
+      src={DeleteOutline}
+      iconAs={Icon}
+      alt={intl.formatMessage(messages.settingsDeleteIconAltText)}
+      onClick={handleDelete}
+    />
+  </ActionRow>
 );
 
 HintRow.propTypes = {
   value: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleDelete: PropTypes.func.isRequired,
+  handleEmptyHint: PropTypes.func.isRequired,
+  // injected
   intl: intlShape.isRequired,
 };
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintRow.test.jsx.snap

@@ -1,27 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HintRow snapshot snapshot: renders hints row 1`] = `
-<div
-  className="hintRow d-flex flex-row flex-nowrap justify-content-end"
+<ActionRow
+  className="mb-4"
 >
-  <div
-    className="flex-grow-1"
-  >
-    <Form.Group>
-      <Form.Control
-        floatingLabel="Hint"
-        onChange={[MockFunction]}
-        value="hint_1"
-      />
-    </Form.Group>
-  </div>
-  <div>
-    <IconButton
-      alt="Delete answer"
-      iconAs="Icon"
-      onClick={[MockFunction]}
-      variant="secondary"
-    />
-  </div>
-</div>
+  <Form.Control
+    floatingLabel="Hint"
+    onChange={[MockFunction]}
+    value="hint_1"
+  />
+  <ActionRow.Spacer />
+  <IconButton
+    alt="Delete answer"
+    iconAs="Icon"
+    onClick={[MockFunction]}
+  />
+</ActionRow>
 `;