Export and bulk update tickets support

src/containers/Ticket/TicketList/BulkAction/BulkAction.module.css

@@ -0,0 +1,28 @@
+.FormContainer {
+  padding: 16px 24px;
+}
+
+.FilterContainer {
+  max-width: 400px;
+}
+.Form {
+  margin-top: 10px;
+  align-items: center;
+  align-content: center;
+  display: flex;
+}
+
+.ExportIcon {
+  cursor: pointer;
+  margin-left: 18px;
+}
+
+.FieldContainer {
+  width: 100%;
+}
+
+.Description {
+  font-size: 16px;
+  color: #93a29b;
+  margin-bottom: 8px;
+}

src/containers/Ticket/TicketList/BulkAction/BulkAction.test.tsx

@@ -0,0 +1,26 @@
+import { render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { setUserSession } from 'services/AuthService';
+import { BulkAction } from './BulkAction';
+import { getAllOrganizations } from 'mocks/Organization';
+
+const mocks = getAllOrganizations;
+setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Admin'] }));
+
+const bulkUpdate = (
+  <MockedProvider mocks={mocks} addTypename={false}>
+    <Router>
+      <BulkAction setShowBulkClose={() => vi.fn()} />
+    </Router>
+  </MockedProvider>
+);
+
+it('Renders Export ticket component successfully', async () => {
+  const { getByText } = render(bulkUpdate);
+
+  await waitFor(() => {
+    expect(getByText('All tickets will be closed for this topic')).toBeInTheDocument();
+  });
+});

src/containers/Ticket/TicketList/BulkAction/BulkAction.tsx

@@ -0,0 +1,84 @@
+import { useMutation } from '@apollo/client';
+import { Field, Form, Formik } from 'formik';
+import * as Yup from 'yup';
+
+import { useTranslation } from 'react-i18next';
+import styles from './BulkAction.module.css';
+import { UPDATE_TICKETS_STATUS } from 'graphql/queries/Ticket';
+import { DialogBox } from 'components/UI/DialogBox/DialogBox';
+import { Input } from 'components/UI/Form/Input/Input';
+
+export interface BulkActionPropTypes {
+  setShowBulkClose: any;
+}
+
+export const BulkAction = ({ setShowBulkClose }: BulkActionPropTypes) => {
+  const { t } = useTranslation();
+
+  const [updateTicketsStatus, { loading }] = useMutation(UPDATE_TICKETS_STATUS, {
+    fetchPolicy: 'network-only',
+    onCompleted: (data) => {
+      setShowBulkClose(false);
+    },
+  });
+
+  const formFields = [
+    {
+      component: Input,
+      name: 'topic',
+      type: 'text',
+      placeholder: t('Topic'),
+    },
+  ];
+
+  const validationSchema = Yup.object().shape({
+    topic: Yup.string().required(),
+  });
+
+  return (
+    <Formik
+      initialValues={{ topic: '' }}
+      onSubmit={(values) => {
+        if (values.topic) {
+          updateTicketsStatus({
+            variables: {
+              input: {
+                status: 'closed',
+                topic: values.topic,
+              },
+            },
+          });
+        }
+      }}
+      validationSchema={validationSchema}
+    >
+      {({ submitForm }) => (
+        <DialogBox
+          open
+          title="Bulk update"
+          titleAlign="left"
+          buttonOk="Close tickets"
+          buttonOkLoading={loading}
+          alignButtons="center"
+          handleOk={() => submitForm()}
+          handleCancel={() => setShowBulkClose(false)}
+        >
+          <div className={styles.FilterContainer}>
+            <Form>
+              <div className={styles.Form}>
+                {formFields.map((field) => (
+                  <div className={styles.FieldContainer} key={field.name}>
+                    <Field {...field} key={field.name} />
+                  </div>
+                ))}
+              </div>
+              <div className={styles.Description} data-testid="description">
+                All tickets will be closed for this topic
+              </div>
+            </Form>
+          </div>
+        </DialogBox>
+      )}
+    </Formik>
+  );
+};

src/containers/Ticket/TicketList/ExportTicket/ExportTicket.module.css

@@ -0,0 +1,30 @@
+.FormContainer {
+  padding: 16px 24px;
+}
+
+.FilterContainer {
+  max-width: 400px;
+}
+.Form {
+  margin-top: 10px;
+  align-items: center;
+  align-content: center;
+
+  display: flex;
+}
+
+.ExportIcon {
+  cursor: pointer;
+  margin-left: 18px;
+}
+
+.Buttons {
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+}
+
+.FieldContainer > div {
+  padding: 0px 10px;
+  width: 100%;
+}

src/containers/Ticket/TicketList/ExportTicket/ExportTicket.test.tsx

@@ -0,0 +1,26 @@
+import { render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { setUserSession } from 'services/AuthService';
+import { ExportTicket } from './ExportTicket';
+import { getAllOrganizations } from 'mocks/Organization';
+
+const mocks = getAllOrganizations;
+setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Admin'] }));
+
+const exportConsulting = (
+  <MockedProvider mocks={mocks} addTypename={false}>
+    <Router>
+      <ExportTicket setShowExportDialog={() => vi.fn()} />
+    </Router>
+  </MockedProvider>
+);
+
+it('Renders Export ticket component successfully', async () => {
+  const { getAllByText } = render(exportConsulting);
+
+  await waitFor(() => {
+    expect(getAllByText('Date from')[0]).toBeInTheDocument();
+  });
+});

src/containers/Ticket/TicketList/ExportTicket/ExportTicket.tsx

@@ -0,0 +1,100 @@
+import { useLazyQuery } from '@apollo/client';
+import { Field, Form, Formik } from 'formik';
+import * as Yup from 'yup';
+
+import { useTranslation } from 'react-i18next';
+import moment from 'moment';
+import { Calendar } from 'components/UI/Form/Calendar/Calendar';
+import { downloadFile } from 'common/utils';
+
+import styles from './ExportTicket.module.css';
+import { EXPORT_SUPPORT_TICKETS } from 'graphql/queries/Ticket';
+import { DialogBox } from 'components/UI/DialogBox/DialogBox';
+
+export interface ExportTicketPropTypes {
+  setShowExportDialog: any;
+}
+
+const formatDate = (value: any) => moment(value).format('YYYY-MM-DD');
+
+export const ExportTicket = ({ setShowExportDialog }: ExportTicketPropTypes) => {
+  const { t } = useTranslation();
+
+  const [getTicketDetails, { loading }] = useLazyQuery(EXPORT_SUPPORT_TICKETS, {
+    fetchPolicy: 'network-only',
+    onCompleted: ({ fetchSupportTickets }) => {
+      downloadFile(`data:attachment/csv,${encodeURIComponent(fetchSupportTickets)}`, 'tickets.csv');
+      setShowExportDialog(false);
+    },
+  });
+
+  const formFields = [
+    {
+      component: Calendar,
+      name: 'startDate',
+      type: 'date',
+      placeholder: t('Date from'),
+      label: t('Date range'),
+    },
+    {
+      component: Calendar,
+      name: 'endDate',
+      type: 'date',
+      placeholder: t('Date to'),
+    },
+  ];
+
+  const validationSchema = Yup.object().shape({
+    endDate: Yup.string().when('startDate', ([startDate], schema: any) =>
+      schema.test({
+        test: (endDateValue: any) =>
+          !(startDate !== undefined && !moment(endDateValue).isAfter(startDate)),
+        message: t('End date should be greater than the start date'),
+      })
+    ),
+  });
+
+  return (
+    <Formik
+      initialValues={{ startDate: '', endDate: '' }}
+      onSubmit={(values) => {
+        if (values.startDate && values.endDate) {
+          getTicketDetails({
+            variables: {
+              filter: {
+                startDate: formatDate(values.startDate),
+                endDate: formatDate(values.endDate),
+              },
+            },
+          });
+        }
+      }}
+      validationSchema={validationSchema}
+    >
+      {({ submitForm }) => (
+        <DialogBox
+          open
+          title="Export tickets"
+          titleAlign="left"
+          buttonOk="Export"
+          buttonOkLoading={loading}
+          alignButtons="center"
+          handleOk={() => submitForm()}
+          handleCancel={() => setShowExportDialog(false)}
+        >
+          <div className={styles.FilterContainer}>
+            <Form>
+              <div className={styles.Form}>
+                {formFields.map((field) => (
+                  <div className={styles.FieldContainer} key={field.name}>
+                    <Field {...field} key={field.name} />
+                  </div>
+                ))}
+              </div>
+            </Form>
+          </div>
+        </DialogBox>
+      )}
+    </Formik>
+  );
+};

src/containers/Ticket/TicketList/TicketList.module.css

@@ -8,51 +8,28 @@
   padding: 0px 0px 4px 0px !important;
 }
 
-.Success {
-  background-color: #c8ebdc;
-  border-radius: 14px;
-  padding: 4px 8px;
-  color: #119656;
-}
-
-.ErrorStyle {
-  background-color: #fbe8e8;
-  border-radius: 14px;
-  padding: 4px 8px;
-  color: #dd1f1f;
-  min-width: 77px;
-  text-align: center;
-}
-
-.StatusContainer {
-  display: flex;
-  align-items: center;
-  padding: 4px 0;
-  font-size: 16px;
-}
-
 .Id {
-  width: 100px;
+  width: 70px;
 }
 
 .Created {
   width: 200px;
 }
 
 .Label {
-  width: 300px;
+  width: 270px;
 }
 
 .Issue {
-  width: 200px;
+  width: 130px;
 }
 
 .Assigned {
-  width: 200px;
+  width: 120px;
 }
 
 .Status {
-  width: 100px;
+  width: 200px;
 }
 
 .Body {
@@ -62,7 +39,7 @@
 }
 
 .Actions {
-  width: 150px;
+  width: 120px;
   justify-content: flex-end;
   margin-left: auto;
 }
@@ -105,6 +82,14 @@
   height: 29px;
 }
 
+.ExportIcon g {
+  stroke: white !important;
+}
+
+.ExportIcon {
+  margin-right: 8px;
+}
+
 .FilterLabel {
   color: #073f24 !important;
   font-size: 16px;