Adds deletion of queries from workspace

src/main/webapp/components/query-manager/query-manager.stories.tsx

@@ -47,6 +47,9 @@ stories.add('Basic', () => {
         onCreate={() => {
           action('onCreate')
         }}
+        onDelete={id => {
+          action('onDelete')(id)
+        }}
       />
     </NavigationBarContext.Provider>
   )

src/main/webapp/components/query-manager/query-manager.tsx

@@ -24,7 +24,7 @@ const {
 } = require('../result-export/result-export-action')
 
 const QueryCard = (props: QueryCardProps) => {
-  const { onSearch, query = {}, queryInteractions } = props
+  const { onSearch, onDelete, query = {}, queryInteractions } = props
   const [anchorEl, handleOpen, handleClose] = useAnchorEl()
   const [{ active: isDrawing }] = useDrawInterface()
   const [wasDrawing, setWasDrawing] = useState(false)
@@ -56,7 +56,7 @@ const QueryCard = (props: QueryCardProps) => {
       >
         <Actions attributes={attributes}>
           <EditAction onEdit={handleOpen} />
-          <DeleteAction />
+          <DeleteAction itemName="query" onDelete={onDelete} />
           <MetacardInteractionsDropdown>
             {queryInteractions.map((interaction, i) => {
               return (
@@ -79,7 +79,7 @@ const QueryCard = (props: QueryCardProps) => {
 }
 
 const QuerySelector = (props: QuerySelectorProps) => {
-  const { queries, currentQuery, onSearch, queryInteractions } = props
+  const { queries, currentQuery, onSearch, onDelete, queryInteractions } = props
   const hasQueries = queries && queries.length > 0
   const [anchorEl, handleOpen, handleClose, open] = useAnchorEl()
 
@@ -89,6 +89,7 @@ const QuerySelector = (props: QuerySelectorProps) => {
       query={query}
       key={query.id}
       onSearch={() => onSearch(query.id!)}
+      onDelete={() => onDelete(query.id!)}
     />
   ))
 
@@ -112,6 +113,7 @@ const QuerySelector = (props: QuerySelectorProps) => {
         ]}
         query={queries.find(query => query.id === currentQuery)}
         onSearch={() => onSearch(currentQuery)}
+        onDelete={() => onDelete(currentQuery)}
       />
       <Button
         color="primary"
@@ -155,6 +157,7 @@ const QueryManager = (props: QueryManagerProps) => {
     props.onSave(id)
     props.onSearch(id)
   }
+
   const queryInteractions = [
     (query: QueryType) => {
       return (

src/main/webapp/components/query-manager/types.tsx

@@ -4,16 +4,24 @@ import { EditorProps } from '../query-editor'
 
 type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U
 
-export type QueryCardProps = {
+type QueryEditorProps = {
   QueryEditor: React.FunctionComponent<EditorProps>
   query?: QueryType
   onSearch: () => void
   onChange: (query: QueryType) => void
+}
+
+export type QueryCardProps = QueryEditorProps & {
+  onDelete: () => void
   queryInteractions: Array<(query: QueryType) => React.ReactNode>
 }
+
 export type QuerySelectorProps = Overwrite<
   QueryCardProps,
-  { onSearch: (id: string) => void }
+  {
+    onSearch: (id: string) => void
+    onDelete: (id: string) => void
+  }
 > & {
   queries: QueryType[]
   currentQuery: string
@@ -23,10 +31,7 @@ export type AddQueryProps = QuerySelectorProps & {
   onCreate: (query: QueryType) => void
 }
 
-export type QueryEditorPopoverProps = Omit<
-  QueryCardProps,
-  'queryInteractions'
-> & {
+export type QueryEditorPopoverProps = QueryEditorProps & {
   anchorEl: HTMLDivElement
   onClose: () => void
 }

src/main/webapp/components/workspace/hooks/index.tsx

@@ -1,3 +1,4 @@
 export { default as useCreateQuery } from './use-create-query'
+export { default as useDeleteQuery } from './use-delete-query'
 export { default as useSaveQuery } from './use-save-query'
 export { default as useSaveWorkspace } from './use-save-workspace'

src/main/webapp/components/workspace/hooks/use-delete-query.tsx

@@ -0,0 +1,25 @@
+import { useMutation } from '@apollo/react-hooks'
+import gql from 'graphql-tag'
+
+export default (onDelete: any) => {
+  const mutation = gql`
+    mutation DeleteQuery($id: ID!) {
+      deleteMetacard(id: $id)
+    }
+  `
+
+  const [_delete] = useMutation(mutation, {
+    onCompleted: data => {
+      onDelete(data.deleteMetacard)
+    },
+  })
+
+  return (id: string) => {
+    _delete({
+      variables: {
+        id,
+      },
+      optimisticResponse: { deleteMetacard: id },
+    })
+  }
+}

src/main/webapp/components/workspace/workspace.js

@@ -16,8 +16,14 @@ import QueryEditor from '../query-editor'
 import QueryManager from '../query-manager'
 import QueryStatus from '../query-status'
 import { ResultIndexCards } from '../results'
-import { useCreateQuery, useSaveQuery, useSaveWorkspace } from './hooks'
+import {
+  useCreateQuery,
+  useDeleteQuery,
+  useSaveQuery,
+  useSaveWorkspace,
+} from './hooks'
 import WorkspaceTitle from './workspace-title'
+import { get } from 'immutable'
 
 const LoadingComponent = () => <LinearProgress />
 
@@ -91,6 +97,17 @@ export default () => {
 
   const { results, status, onSearch, onCancel, onClear } = useQueryExecutor()
 
+  const deleteQuery = useDeleteQuery(id => {
+    const updatedQueries = queries.filter(query => query.id !== id)
+    setQueries(updatedQueries)
+    if (currentQuery === id) {
+      onClear()
+      setCurrentQuery(get(updatedQueries[0], 'id', null))
+    }
+
+    saveWorkspace({ queries: updatedQueries })
+  })
+
   const saveQuery = useSaveQuery()
   const [saveWorkspace, saving] = useSaveWorkspace()
 
@@ -193,6 +210,7 @@ export default () => {
                     )
                   }}
                   onCreate={createQuery}
+                  onDelete={deleteQuery}
                   onSave={id => {
                     saveQuery(queries.find(query => query.id === id))
                   }}