ui: update SetFavoriteButton and graphql.test.js to urql (#3584)

* update setfavoritebutton to urql

* make check

* convert WizardRouter from Apollo to urql

* Revert "convert WizardRouter from Apollo to urql"

This reverts commit f15d6b3.

* add loading check

* remove only

* remove info from notice title

web/src/app/util/QuerySetFavoriteButton.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import { gql, useQuery, useMutation } from '@apollo/client'
+import { gql, useQuery, useMutation } from 'urql'
 import { SetFavoriteButton } from './SetFavoriteButton'
 import { Button, Dialog, DialogActions, DialogTitle } from '@mui/material'
 import DialogContentError from '../dialogs/components/DialogContentError'
+import toTitleCase from './toTitleCase'
 
 const queries = {
   service: gql`
@@ -62,25 +63,33 @@ export function QuerySetFavoriteButton({
   id,
   type,
 }: QuerySetFavoriteButtonProps): JSX.Element {
-  const { data, loading } = useQuery(queries[type], {
+  const [{ data, fetching }] = useQuery({
+    query: queries[type],
     variables: { id },
   })
   const isFavorite = data && data.data && data.data.isFavorite
   const [showMutationErrorDialog, setShowMutationErrorDialog] = useState(false)
-  const [toggleFav, toggleFavStatus] = useMutation(mutation, {
-    variables: {
-      input: { target: { id, type }, favorite: !isFavorite },
-    },
-    onError: () => setShowMutationErrorDialog(true),
-  })
+  const [toggleFavStatus, commit] = useMutation(mutation)
 
   return (
     <React.Fragment>
       <SetFavoriteButton
         typeName={type}
         isFavorite={isFavorite}
-        loading={!data && loading}
-        onClick={() => toggleFav()}
+        loading={!data && fetching}
+        onClick={() => {
+          console.log(toTitleCase(type))
+          commit(
+            {
+              input: { target: { id, type }, favorite: !isFavorite },
+            },
+            { additionalTypenames: [toTitleCase(type)] },
+          ).then((result) => {
+            if (result.error) {
+              setShowMutationErrorDialog(true)
+            }
+          })
+        }}
       />
       <Dialog
         // if showMutationErrorDialog is true, the dialog will open

web/src/app/util/graphql.test.js

@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client'
+import { gql } from 'urql'
 import { print } from 'graphql'
 
 import {

web/src/app/util/toTitleCase.ts

@@ -1,5 +1,5 @@
 export default function toTitleCase(str: string): string {
   return str.replace(/\w\S*/g, (txt) => {
-    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
+    return txt.charAt(0).toUpperCase() + txt.slice(1)
   })
 }

web/src/cypress/e2e/alerts.cy.ts

@@ -415,6 +415,8 @@ function testAlerts(screen: ScreenFormat): void {
 
     it('should set alert noise reasons', () => {
       // set all noise reasons, checking carefully because of async setState
+      cy.get('path[id=crane-body]').should('not.exist')
+      cy.get('[data-cy=loading-spinner]').should('not.exist')
       cy.get('body').should('contain.text', 'Is this alert noise?')
       cy.get('[data-cy="False positive"] input[type="checkbox"]').check()
       cy.get('[data-cy="False positive"] input[type="checkbox"]').should(
@@ -438,7 +440,7 @@ function testAlerts(screen: ScreenFormat): void {
       cy.get('label').contains('False positive').should('not.exist')
 
       // see notice
-      const noticeTitle = 'Info: This alert has been marked as noise'
+      const noticeTitle = 'This alert has been marked as noise'
       cy.get('body').should('contain.text', noticeTitle)
       cy.get('body').should(
         'contain.text',