Table is not refreshed after creation of a host

[dcarracedo]

Description After the user creates a host, the hosts table is not refreshed, so the user cannot see the new host until he press the refresh button.

To Reproduce

1. Go to the Hosts tab in FireEdge Sunstone.
2. Create a host.
3. See that the table is not refreshed.

Expected behavior The hosts table have to be refresh after create a host.

Details

• Affected Component: FireEdge Sunstone
• Hypervisor: N/A
• Version: 6.8

Additional context Review the other tables in FireEdge to see if this happens in other kind of resources. Video of hosts: Screencast from 05-01-24 11:56:11.webm

There is an example of how a post or put request we have to do after the response to force the refresh (onQueryStarted tag):

`updateVNTemplate: builder.mutation({
      query: (params) => {
        const name = Actions.VNTEMPLATE_UPDATE
        const command = { name, ...Commands[name] }

        return { params, command }
      },
      invalidatesTags: (_, __, { id }) => [{ type: VNTEMPLATE, id }],
      async onQueryStarted(params, { dispatch, queryFulfilled }) {
        try {
          const patchVNTemplate = dispatch(
            vNetworkTemplateApi.util.updateQueryData(
              'getVNTemplate',
              { id: params.id },
              updateTemplateOnResource(params)
            )
          )

          const patchVNTemplates = dispatch(
            vNetworkTemplateApi.util.updateQueryData(
              'getVNTemplates',
              undefined,
              updateTemplateOnResource(params)
            )
          )

          queryFulfilled.catch(() => {
            patchVNTemplate.undo()
            patchVNTemplates.undo()
          })
        } catch {}
      },
    }),`

Progress Status

• [x] Code committed
• [x] Testing - QA
• [ ] Documentation (Release notes - resolved issues, compatibility, known issues)

[jloboescalona2]

I think the best way is to update the redux when the resource is created, here is an example of how to do it!

function CreateHost() {
  const history = useHistory()

  const { enqueueSuccess } = useGeneralApi()
  const [allocate] = useAllocateHostMutation()
  const {refetch} = useGetHostsQuery({}) ---> here the parameters...

  const onSubmit = async (props) => {
    try {
      const newHostId = await allocate(props).unwrap()
      await refetch() --> here the refecth
      history.push(PATH.INFRASTRUCTURE.HOSTS.LIST)
      enqueueSuccess(`Host created - #${newHostId}`)
    } catch (s){
      console.log(s)
    }
  }

  return (
    <CreateForm onSubmit={onSubmit} fallback={<SkeletonStepsForm />}>
      {(config) => <DefaultFormStepper {...config} />}
    </CreateForm>
  )
}

The problem is that the parameters must be the same as the ones used by the datatable this is an example of the hosts datatable.

const {
    data = [],
    isFetching,
    refetch,
  } = useQuery(
    { zone: zoneId },