Merge pull request #1402 from glific/feature/extensions

added basic structure for extensions

src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.tsx

@@ -255,9 +255,12 @@ export const SideDrawer: React.SFC<SideDrawerProps> = ({ fullOpen, setFullOpen }
                   <Tooltip title={t('Staff Management')} placement="top">
                     <img
                       src={
-                        ['/collection', '/staff-management', '/blocked-contacts'].includes(
-                          location.pathname
-                        )
+                        [
+                          '/collection',
+                          '/staff-management',
+                          '/blocked-contacts',
+                          '/consulting-hours',
+                        ].includes(location.pathname)
                           ? ActiveStaffIcon
                           : InactiveStaffIcon
                       }

src/containers/Extensions/Extensions.module.css

@@ -0,0 +1,25 @@
+.ExtensionIcon {
+  width: 29px;
+  height: 29px;
+}
+.Dialogbox {
+  border-radius: 32px !important;
+  margin: 0px;
+  min-width: 456px;
+}
+
+.DialogContent {
+  padding: 0px 0px 4px 0px !important;
+  max-height: 500px;
+  overflow: hidden !important;
+}
+
+.Form input[type='text'],
+.Form textarea,
+.Form > div:nth-child(3) p {
+  color: #93a29b;
+  line-height: 1 !important;
+  font-weight: 500 !important;
+  font-size: 16px;
+  font-family: 'Heebo', sans-serif;
+}

src/containers/Extensions/Extensions.test.tsx

@@ -0,0 +1,47 @@
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { getOrganizationExtension, createExtension, updateExtension } from '../../mocks/Extension';
+import { setUserSession } from '../../services/AuthService';
+import { Extensions } from './Extensions';
+
+setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Admin'] }));
+const mocks = [getOrganizationExtension, createExtension, updateExtension];
+const props = {
+  match: { params: {} },
+  openDialog: true,
+};
+const wrapper = (
+  <MockedProvider mocks={mocks} addTypename={false}>
+    <Extensions {...props} />
+  </MockedProvider>
+);
+test('it should render form correctly', async () => {
+  const { container } = render(wrapper);
+  await waitFor(() => {});
+  expect(screen.getByText('Add extension code')).toBeInTheDocument();
+  const inputElements = screen.getAllByRole('textbox');
+
+  await waitFor(() => {
+    fireEvent.change(inputElements[0], { target: { value: 'GCS bucket' } });
+    fireEvent.change(inputElements[1], {
+      target: {
+        value: 'defmodule Glific.Test.Extension, do :def default_phone(), do: %{phone: 9876543210}',
+      },
+    });
+  });
+
+  const checkboxElement = screen.getAllByRole('checkbox');
+
+  await waitFor(() => {
+    fireEvent.change(checkboxElement[0], { target: { value: 'false' } });
+  });
+  await waitFor(() => {
+    const submitButton = screen.getByText('Save');
+    expect(submitButton).toBeInTheDocument();
+
+    const cancelButton = screen.getByText('Cancel');
+    expect(cancelButton).toBeInTheDocument();
+
+    fireEvent.click(submitButton);
+  });
+});

src/containers/Extensions/Extensions.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { Dialog, DialogContent } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import * as Yup from 'yup';
+import { useTranslation } from 'react-i18next';
+
+import styles from './Extensions.module.css';
+import {
+  CREATE_EXTENSION,
+  DELETE_EXTENSION,
+  UPDATE_EXTENSION,
+} from '../../graphql/mutations/Extensions';
+import { GET_ORGANIZATION_EXTENSION } from '../../graphql/queries/Exntesions';
+import { Input } from '../../components/UI/Form/Input/Input';
+import { OrganizationList } from '../OrganizationList/OrganizationList';
+import { ReactComponent as ConsultingIcon } from '../../assets/images/icons/icon-consulting.svg';
+import { FormLayout } from '../Form/FormLayout';
+import { Checkbox } from '../../components/UI/Form/Checkbox/Checkbox';
+
+export interface ExtensionProps {
+  match: any;
+  openDialog: boolean;
+}
+const flowIcon = <ConsultingIcon />;
+const queries = {
+  getItemQuery: GET_ORGANIZATION_EXTENSION,
+  createItemQuery: CREATE_EXTENSION,
+  updateItemQuery: UPDATE_EXTENSION,
+  deleteItemQuery: DELETE_EXTENSION,
+};
+export const Extensions: React.SFC<ExtensionProps> = ({ match, openDialog }) => {
+  const [name, setName] = useState('');
+  const [code, setCode] = useState('');
+  const [isActive, setIsActive] = useState(false);
+  const { t } = useTranslation();
+
+  const states = { name, code, isActive };
+  const setStates = ({ name: nameValue, code: codeValue, isActive: isActiveValue }: any) => {
+    setName(nameValue);
+    setCode(codeValue);
+    setIsActive(isActiveValue);
+  };
+
+  const FormSchema = Yup.object().shape({
+    name: Yup.string().required(t('Title is required.')),
+    code: Yup.string().required(t('Code is required.')),
+  });
+
+  const dialogMessage = t("You won't be able to use this extension again.");
+  const formFields = [
+    {
+      component: Input,
+      name: 'name',
+      type: 'text',
+      placeholder: t('Title'),
+      inputProp: {
+        onChange: (event: any) => setName(event.target.value),
+      },
+    },
+
+    {
+      component: Input,
+      name: 'code',
+      type: 'text',
+      rows: 3,
+      textArea: true,
+      placeholder: t('Code snippet'),
+      inputProp: {
+        onChange: (event: any) => setCode(event.target.value),
+      },
+    },
+    {
+      component: Checkbox,
+      name: 'isActive',
+      title: (
+        <Typography variant="body2" style={{ color: '#93A29B' }}>
+          {t('Is active?')}
+        </Typography>
+      ),
+      onchange: (event: any) => setIsActive(event.target.value),
+    },
+  ];
+
+  // title depends on if data is already present
+  const title = name && code ? 'Edit extension code' : 'Add extension code';
+
+  const setPayload = (payload: any) => {
+    const data = { ...payload };
+    if (match.params.id) {
+      data.clientId = match.params.id;
+    }
+    return data;
+  };
+  return (
+    <>
+      <OrganizationList />
+      <Dialog
+        open={!!openDialog}
+        classes={{
+          paper: styles.Dialogbox,
+        }}
+      >
+        <DialogContent classes={{ root: styles.DialogContent }}>
+          <FormLayout
+            {...queries}
+            match={match}
+            states={states}
+            setStates={setStates}
+            validationSchema={FormSchema}
+            listItemName="extension"
+            dialogMessage={dialogMessage}
+            formFields={formFields}
+            setPayload={setPayload}
+            redirectionLink="organizations"
+            listItem="Extension"
+            icon={flowIcon}
+            title={title}
+            type="Extension"
+            languageSupport={false}
+            idType="clientId"
+            customStyles={[styles.Form]}
+            refetchQueries={[
+              { query: GET_ORGANIZATION_EXTENSION, variables: { clientId: match.params.id } },
+            ]}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default Extensions;