Merge branch 'master' into enhancements/hsm-buttons

src/components/UI/Form/Input/Input.module.css

@@ -28,10 +28,6 @@
   font-weight: 400;
 }
 
-.Multiline {
-  padding-bottom: 35px;
-}
-
 .Resend {
   color: #119656;
   font-weight: bold;

src/components/UI/Form/Input/Input.tsx

@@ -113,7 +113,7 @@ export const Input = ({ textArea = false, disabled = false, inputLabel = null, .
             inputComponent={editor ? editor.inputComponent : undefined}
             inputProps={editor ? editor.inputProps : inputProp}
             type={fieldType}
-            classes={{ multiline: styles.Multiline, input: !textArea ? inputStyles : '' }}
+            classes={{ input: !textArea ? inputStyles : '' }}
             disabled={disabled}
             error={showError}
             multiline={textArea}

src/containers/Assistants/Assistants.test.tsx

@@ -241,3 +241,27 @@ test('it should show errors for invalid value in temperature', async () => {
     expect(screen.getByText('Temperature value should be between 0-2')).toBeInTheDocument();
   });
 });
+
+test('it opens the instruction dialog box', async () => {
+  render(assistantsComponent());
+
+  await waitFor(() => {
+    expect(screen.getByText('Assistants')).toBeInTheDocument();
+    expect(screen.getByText('Assistant-1')).toBeInTheDocument();
+  });
+
+  await waitFor(() => {
+    expect(screen.getByTestId('expandIcon')).toBeInTheDocument();
+  });
+
+  fireEvent.click(screen.getByTestId('expandIcon'));
+  fireEvent.click(screen.getByTestId('cancel-button'));
+  fireEvent.click(screen.getByTestId('expandIcon'));
+
+  fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test instructions' } });
+  fireEvent.click(screen.getByTestId('save-button'));
+
+  await waitFor(() => {
+    expect(screen.getByText('test instructions')).toBeInTheDocument();
+  });
+});

src/containers/Assistants/CreateAssistant/CreateAssistant.module.css

@@ -66,3 +66,56 @@
 .DeleteIcon {
   margin-right: 0.5rem;
 }
+
+.Expand {
+  height: 100%;
+  display: flex;
+  align-items: end;
+  max-height: none;
+}
+
+.ExpandButton {
+  cursor: pointer;
+}
+
+.ExpandButton:hover {
+  background-color: #00000017;
+  border-radius: 0.5rem;
+}
+
+.InstructionsBox {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Instructions {
+  background-color: #fff;
+  width: 50%;
+  padding: 1rem;
+  border-radius: 1rem;
+}
+
+.Instructions h5 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.Instructions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.Input {
+  width: 100%;
+}
+
+.InstructionButtons {
+  width: 100%;
+  display: flex;
+  justify-content: end;
+}

src/containers/Assistants/CreateAssistant/CreateAssistant.tsx

@@ -1,5 +1,5 @@
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
-import { Typography } from '@mui/material';
+import { InputAdornment, Modal, OutlinedInput, Typography } from '@mui/material';
 import { Field, FormikProvider, useFormik } from 'formik';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +19,7 @@ import { DELETE_ASSISTANT, UPDATE_ASSISTANT } from 'graphql/mutations/Assistant'
 
 import CopyIcon from 'assets/images/CopyGreen.svg?react';
 import DeleteIcon from 'assets/images/icons/Delete/White.svg?react';
+import ExpandIcon from 'assets/images/icons/ExpandContent.svg?react';
 
 import { AssistantOptions } from '../AssistantOptions/AssistantOptions';
 
@@ -38,6 +39,7 @@ export const CreateAssistant = ({ currentId, setUpdateList, setCurrentId, update
   const [instructions, setInstructions] = useState('');
   const [options, setOptions] = useState({ fileSearch: true, temperature: 1 });
   const [showConfirmation, setShowConfirmation] = useState(false);
+  const [openInstructions, setOpenInstructions] = useState(false);
   const { t } = useTranslation();
 
   const states = {
@@ -109,6 +111,12 @@ export const CreateAssistant = ({ currentId, setUpdateList, setCurrentId, update
     });
   };
 
+  const expandIcon = (
+    <InputAdornment className={styles.Expand} position="end">
+      <ExpandIcon data-testid="expandIcon" onClick={() => setOpenInstructions(true)} className={styles.ExpandButton} />
+    </InputAdornment>
+  );
+
   const formFields: any = [
     {
       component: AutoComplete,
@@ -145,6 +153,7 @@ export const CreateAssistant = ({ currentId, setUpdateList, setCurrentId, update
       textArea: true,
       helperText: t('Set the instructions according to your requirements.'),
       onChange: (value: any) => setInstructions(value),
+      endAdornment: expandIcon,
     },
     {
       component: AssistantOptions,
@@ -187,6 +196,7 @@ export const CreateAssistant = ({ currentId, setUpdateList, setCurrentId, update
   };
 
   let dialog;
+  let instructionsDialog;
   if (showConfirmation) {
     dialog = (
       <DialogBox
@@ -204,6 +214,33 @@ export const CreateAssistant = ({ currentId, setUpdateList, setCurrentId, update
       </DialogBox>
     );
   }
+  if (openInstructions) {
+    instructionsDialog = (
+      <Modal open={openInstructions} onClose={() => setOpenInstructions(false)}>
+        <div className={styles.InstructionsBox}>
+          <div className={styles.Instructions}>
+            <h5>Edit system instructions</h5>
+            <OutlinedInput
+              name="expand-instructions"
+              onChange={(event) => setInstructions(event.target.value)}
+              value={instructions}
+              className={styles.Input}
+              multiline
+              rows={16}
+            />
+            <div className={styles.InstructionButtons}>
+              <Button data-testid="cancel-button" onClick={() => setOpenInstructions(false)} variant="outlined">
+                Cancel
+              </Button>
+              <Button data-testid="save-button" onClick={() => setOpenInstructions(false)} variant="contained">
+                Save
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
 
   if (loading || listLoading) {
     return <Loading />;
@@ -243,6 +280,7 @@ export const CreateAssistant = ({ currentId, setUpdateList, setCurrentId, update
           </div>
         </form>
         {dialog}
+        {instructionsDialog}
       </div>
     </FormikProvider>
   );

src/containers/HSM/HSM.helper.ts

@@ -18,9 +18,12 @@ export const removeFirstLineBreak = (text: any) =>
   text?.length === 1 ? text.slice(0, 1).replace(/(\r\n|\n|\r)/, '') : text;
 
 /**
+ * Function to convert buttons to template format
  *
  * @param templateButtons buttons that need to be converted to gupshup format
  * @param templateType depending on template type convert button to gupshup format
+ *
+ * @return array result
  */
 export const convertButtonsToTemplate = (templateButtons: Array<any>, templateType: string | null) =>
   templateButtons.reduce((result: any, temp: any) => {
@@ -35,15 +38,16 @@ export const convertButtonsToTemplate = (templateButtons: Array<any>, templateTy
   }, []);
 
 /**
+ * As messages and buttons are now separated
+ * we are combining both message and buttons,
+ * so that you can see preview in simulator
  *
  * @param templateType template type
  * @param message
  * @param buttons
- * Since messages and buttons are now separated
- * we are combining both message and buttons,
- * so that you can see preview in simulator
+ *
+ * @return object {buttons, template}
  */
-
 export const getTemplateAndButtons = (templateType: string, message: string, buttons: string) => {
   const templateButtons = JSON.parse(buttons);
   let result: any;

src/containers/SpeedSend/SpeedSendList/SpeedSendList.module.css

@@ -0,0 +1,48 @@
+.SpeedSendIcon {
+  width: 29px;
+  height: 29px;
+}
+
+.LabelContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+}
+
+.LabelText {
+  font-weight: 500;
+  font-size: 17px;
+  word-break: break-all;
+}
+
+.TableText {
+  text-align: left;
+  font-size: 14px;
+  color: #93a29b;
+  white-space: pre-line;
+  margin: 0;
+  padding: 0;
+}
+
+.LastModified {
+  width: 20%;
+  min-width: 185px;
+  color: #93a29b;
+}
+
+.Name {
+  width: 25%;
+  min-width: 200px;
+}
+
+.Body {
+  width: 36%;
+  min-width: 200px;
+  word-break: break-word;
+}
+
+.Actions {
+  width: 19%;
+  min-width: 200px;
+  text-align: end;
+}

src/containers/SpeedSend/SpeedSendList/SpeedSendList.tsx

@@ -56,7 +56,7 @@ export const SpeedSendList = () => {
 
   let columnStyles: any = [styles.Name, styles.Body, styles.LastModified, styles.Actions];
 
-  const getColumns = ({ id, language, label, body, updatedAt, translations, category }: any) => {
+  const getColumns = ({ id, language, label, body, updatedAt, translations }: any) => {
     const columns: any = {
       id,
       label: getLabel(label),

yarn.lock

@@ -5514,16 +5514,8 @@ streamx@^2.12.0, streamx@^2.12.5, streamx@^2.13.2, streamx@^2.14.0:
   optionalDependencies:
     bare-events "^2.2.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5617,14 +5609,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -6459,4 +6444,3 @@ [email protected]:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
-