Merge pull request #974 from openmsupply/#285-delete-application-in-d…

…raft

#285 delete application in draft

semantic/src/site/globals/site.overrides

@@ -579,6 +579,11 @@ a:hover {
 
 .list-row {
   padding-bottom: 30px;
+
+  .delete-icon {
+    .clickable();
+    padding-left: 10px;
+  }
 }
 
 .flex-grow-1 {

src/components/List/ApplicationsList.tsx

@@ -1,6 +1,8 @@
 import React, { Fragment } from 'react'
 import { Table, Message } from 'semantic-ui-react'
+import { useDeleteApplicationMutation } from '../../utils/generated/graphql'
 import messages from '../../utils/messages'
+import strings from '../../utils/constants'
 import { ApplicationListRow, ColumnDetails, SortQuery } from '../../utils/types'
 import Loading from '../Loading'
 
@@ -10,6 +12,7 @@ interface ApplicationsListProps {
   sortQuery: SortQuery
   handleSort: Function
   loading: boolean
+  refetch: Function
 }
 
 const ApplicationsList: React.FC<ApplicationsListProps> = ({
@@ -18,6 +21,7 @@ const ApplicationsList: React.FC<ApplicationsListProps> = ({
   sortQuery: { sortColumn, sortDirection },
   handleSort,
   loading,
+  refetch,
 }) => {
   return (
     <>
@@ -46,7 +50,7 @@ const ApplicationsList: React.FC<ApplicationsListProps> = ({
           ) : (
             applications.map((application, index) => {
               const rowProps = {
-                index,
+                refetch,
                 columns,
                 application,
               }
@@ -68,17 +72,29 @@ const ApplicationsList: React.FC<ApplicationsListProps> = ({
 }
 
 interface ApplicationRowProps {
-  index: number
+  refetch: Function
   columns: Array<ColumnDetails>
   application: ApplicationListRow
 }
 
-const ApplicationRow: React.FC<ApplicationRowProps> = ({ columns, application }) => {
+const ApplicationRow: React.FC<ApplicationRowProps> = ({ refetch, columns, application }) => {
+  const [deleteApplication, { loading, error }] = useDeleteApplicationMutation({
+    variables: { id: application.id || 0 },
+    onCompleted: () => refetch(),
+  })
+  const props = {
+    application,
+    loading,
+    deleteApplication,
+  }
+
+  if (error) return <Message error header={strings.ERROR_APPLICATION_DELETE} list={[error]} />
+
   return (
     <Table.Row key={`ApplicationList-application-${application.id}`} className="list-row">
-      {columns.map(({ headerName, ColumnComponent }, index) => (
+      {columns.map(({ ColumnComponent }, index) => (
         <Table.Cell key={`ApplicationList-row-${application.id}-${index}`}>
-          <ColumnComponent application={application} />
+          <ColumnComponent {...props} />
         </Table.Cell>
       ))}
     </Table.Row>

src/components/List/Cells/ApplicationNameCells.tsx

@@ -1,24 +1,23 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import { ApplicationListShape } from '../../../utils/generated/graphql'
 import { CellProps } from '../../../utils/types'
 
 const ApplicationNameCell: React.FC<CellProps> = ({ application }) => (
   <div className="application-name-cell">
     <Link to={`/application/${application.serial || 0}`}>{application.name as string}</Link>
-    <ApplicationNameCellDetails application={application} />
+    <ApplicationNameCellDetails {...application} />
   </div>
 )
 
 const ApplicationNameReviewLinkCell: React.FC<CellProps> = ({ application }) => (
   <div>
     <Link to={`/application/${application.serial || 0}/review`}>{application.name as string}</Link>
-    <ApplicationNameCellDetails application={application} />
+    <ApplicationNameCellDetails {...application} />
   </div>
 )
 
-const ApplicationNameCellDetails: React.FC<CellProps> = ({
-  application: { applicant, orgName },
-}) => (
+const ApplicationNameCellDetails: React.FC<ApplicationListShape> = ({ applicant, orgName }) => (
   <p className="application-name-cell-name">{`${applicant}${orgName ? ' • ' + orgName : ''}`}</p>
 )
 

src/components/List/Cells/StatusCell.tsx

@@ -1,12 +1,35 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Icon, Progress } from 'semantic-ui-react'
+import { Icon, ModalProps, Progress } from 'semantic-ui-react'
 import { ApplicationStatus } from '../../../utils/generated/graphql'
 import { CellProps } from '../../../utils/types'
 import enumsToLocalStrings from '../../../utils/data/enumsToLocalisedStrings'
 import strings from '../../../utils/constants'
+import messages from '../../../utils/messages'
+import ModalConfirmation from '../../Main/ModalConfirmation'
+
+const StatusCell: React.FC<CellProps> = ({ application, loading, deleteApplication }) => {
+  const [showModalDeletion, setShowModalDeletion] = useState<ModalProps>({ open: false })
+
+  const showConfirmation = () => {
+    const { title, message, option } = messages.APPLICATION_DELETION_CONFIRM
+    setShowModalDeletion({
+      open: true,
+      title,
+      message,
+      option,
+      onClick: () => {
+        deleteApplication()
+        setShowModalDeletion({ open: false })
+      },
+      onClose: () => setShowModalDeletion({ open: false }),
+    })
+  }
+
+  const deleteDraft = () => {
+    showConfirmation()
+  }
 
-const StatusCell: React.FC<CellProps> = ({ application }) => {
   const { serial, status } = application
   switch (status) {
     case ApplicationStatus.ChangesRequired:
@@ -23,8 +46,13 @@ const StatusCell: React.FC<CellProps> = ({ application }) => {
           <Link to={`/application/${serial}`} className="user-action">
             {strings.ACTION_EDIT_DRAFT}
           </Link>
-          {/* TO DO: Trash icon should link to application delete */}
-          <Icon name="trash alternate outline" />
+          <Icon
+            className="delete-icon"
+            name="trash alternate outline"
+            loading={loading}
+            onClick={deleteDraft}
+          />
+          <ModalConfirmation {...showModalDeletion} />
         </>
       )
     case ApplicationStatus.Completed:

src/containers/List/ListWrapper.tsx

@@ -34,7 +34,7 @@ const ListWrapper: React.FC = () => {
     return null
   }
 
-  const { error, loading, applications, applicationCount } = useListApplications(query)
+  const { error, loading, refetch, applications, applicationCount } = useListApplications(query)
 
   useEffect(() => {
     if (!templatePermissions) return
@@ -133,6 +133,7 @@ const ListWrapper: React.FC = () => {
           sortQuery={sortQuery}
           handleSort={handleSort}
           loading={loading}
+          refetch={refetch}
         />
       )}
       <PaginationBar totalCount={applicationCount} />

src/utils/constants.ts

@@ -76,6 +76,7 @@ export default {
   PLACEHOLDER_SEARCH: 'Search Applications...',
   DATE_APPLICATION_PLACEHOLDER: '31/12/2020',
   ERROR_APPLICATION_CREATE: 'Problem loading application creation page',
+  ERROR_APPLICATION_DELETE: 'Problem deleting application',
   ERROR_APPLICATION_PAGE: 'Problem loading application',
   ERROR_APPLICATION_SUBMIT: 'Problem submitting application',
   ERROR_APPLICATIONS_LIST: 'Problem loading applications list',

src/utils/generated/graphql.tsx

@@ -29639,6 +29639,19 @@ export type CreateReviewMutation = (
   )> }
 );
 
+export type DeleteApplicationMutationVariables = Exact<{
+  id: Scalars['Int'];
+}>;
+
+
+export type DeleteApplicationMutation = (
+  { __typename?: 'Mutation' }
+  & { deleteApplication?: Maybe<(
+    { __typename?: 'DeleteApplicationPayload' }
+    & Pick<DeleteApplicationPayload, 'clientMutationId'>
+  )> }
+);
+
 export type RestartApplicationMutationVariables = Exact<{
   serial: Scalars['String'];
   applicationPatch: ApplicationPatch;
@@ -30990,6 +31003,38 @@ export function useCreateReviewMutation(baseOptions?: Apollo.MutationHookOptions
 export type CreateReviewMutationHookResult = ReturnType<typeof useCreateReviewMutation>;
 export type CreateReviewMutationResult = Apollo.MutationResult<CreateReviewMutation>;
 export type CreateReviewMutationOptions = Apollo.BaseMutationOptions<CreateReviewMutation, CreateReviewMutationVariables>;
+export const DeleteApplicationDocument = gql`
+    mutation deleteApplication($id: Int!) {
+  deleteApplication(input: {id: $id}) {
+    clientMutationId
+  }
+}
+    `;
+export type DeleteApplicationMutationFn = Apollo.MutationFunction<DeleteApplicationMutation, DeleteApplicationMutationVariables>;
+
+/**
+ * __useDeleteApplicationMutation__
+ *
+ * To run a mutation, you first call `useDeleteApplicationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteApplicationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteApplicationMutation, { data, loading, error }] = useDeleteApplicationMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useDeleteApplicationMutation(baseOptions?: Apollo.MutationHookOptions<DeleteApplicationMutation, DeleteApplicationMutationVariables>) {
+        return Apollo.useMutation<DeleteApplicationMutation, DeleteApplicationMutationVariables>(DeleteApplicationDocument, baseOptions);
+      }
+export type DeleteApplicationMutationHookResult = ReturnType<typeof useDeleteApplicationMutation>;
+export type DeleteApplicationMutationResult = Apollo.MutationResult<DeleteApplicationMutation>;
+export type DeleteApplicationMutationOptions = Apollo.BaseMutationOptions<DeleteApplicationMutation, DeleteApplicationMutationVariables>;
 export const RestartApplicationDocument = gql`
     mutation restartApplication($serial: String!, $applicationPatch: ApplicationPatch!) {
   updateApplicationBySerial(input: {serial: $serial, patch: $applicationPatch}) {

src/utils/graphql/mutations/deleteApplication.mutation.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client'
+
+export default gql`
+  mutation deleteApplication($id: Int!) {
+    deleteApplication(input: { id: $id }) {
+      clientMutationId
+    }
+  }
+`

src/utils/hooks/useListApplications.tsx

@@ -25,6 +25,7 @@ const useListApplications = ({ sortBy, page, perPage, ...queryFilters }: BasicSt
   const {
     data,
     loading,
+    refetch,
     error: applicationsError,
   } = useGetApplicationListQuery({
     variables: {
@@ -60,6 +61,7 @@ const useListApplications = ({ sortBy, page, perPage, ...queryFilters }: BasicSt
   return {
     error,
     loading,
+    refetch,
     applications,
     applicationCount,
   }

src/utils/messages.ts

@@ -2,6 +2,11 @@ export default {
   APPLICATIONS_LIST_EMPTY: 'No applications found',
   APPLICATION_MISSING_TEMPLATE: '',
   APPLICATION_OTHER_CHANGES_MADE: 'This is a new submission and will require a review.',
+  APPLICATION_DELETION_CONFIRM: {
+    title: 'Delete application',
+    message: 'Please confirm you would like to delete a draft application',
+    option: 'OK',
+  },
   LOGIN_WELCOME: 'Welcome, %1',
   LOGIN_ORG_SELECT: 'Please select an organisation',
   VALIDATION_FAIL: {

src/utils/types.ts

@@ -148,6 +148,8 @@ interface BasicStringObject {
 
 interface CellProps {
   application: ApplicationListShape
+  loading: boolean
+  deleteApplication: Function
 }
 
 interface ColumnDetails {