refactor: [M3-6257] - React Query for Firewalls

[bnussman-akamai]

Description 📝

• Firewalls used react query but this moves firewalls away from the "fetch all" approach

How to test 🧪

• Test all firewall create, update, delete actions
• Test adding and removing Linodes from a Firewall
• yarn test Firewall
• Run migrate-linode-with-firewall.spec.ts with yarn cy:debug

[jdamore-linode]

Are we gradually replacing all of our multi selects with <TextField />s wrapped in <Autocomplete />s, or is there a specific technical need/UX convention/etc that dictates when to use one over the other?

[bnussman-akamai]

I moved to a <Autocomplete /> simply because it is built into MUI and is much more easy to use then our crazily abstracted EnhancedSelect component that has no type safety. I wanted to focus on the implementation of the pagination and filtering and I didn't want to fight with our "EnhancedSelect" component

[jdamore-linode]

Related to the question above, I'm noticing some visual differences between the old multi selects and the new auto complete text fields. The screenshots are from the Attach Volume form, but also applies to the LinodeMultiSelect:

Old:

New:

Specifically seeing differences in the placeholder text color, arrow/chevron icon on the right, size and positioning of the popper, and the selection highlight style.

[jaalah-akamai]

If we want to use the same icon as before, we can do popupIcon={<DropdownIndicator />} except we'll either have to add an sx prop to remove the marginRight or some custom class for now. The other styles should be easy to replicate 🤞

[jaalah-akamai]

Approving pending style updates - Solid changes!

[cpathipa]

Nice work! @bnussman. Overall, it looks great! I only left a comment for a minor change to improve readability.

[cpathipa]

We can improve code readability by decoupling onSubmit logic from this code block. We could rename formikBag and handleSubmitAsync, I took it as example.

onSubmit: (values, formikBag) => handleSubmitAsync(values, formikBag),

  const handleSubmitAsync = async (
    values: any,
    { setSubmitting, setErrors, setStatus }: any
  ) => {
    // Clear drawer error state
    setStatus(undefined);
    setErrors({});
    const payload = { ...values };

    if (payload.label === '') {
      payload.label = undefined;
    }

    if (
      Array.isArray(payload.rules.inbound) &&
      payload.rules.inbound.length === 0
    ) {
      payload.rules.inbound = undefined;
    }

    if (
      Array.isArray(payload.rules.outbound) &&
      payload.rules.outbound.length === 0
    ) {
      payload.rules.outbound = undefined;
    }

    try {
      await mutateAsync(payload);
      setSubmitting(false);
      onClose();
    } catch (err) {
      const mapErrorToStatus = () =>
        setStatus({ generalError: getErrorMap([], err).none });

      setSubmitting(false);
      handleFieldErrors(setErrors, err);
      handleGeneralErrors(mapErrorToStatus, err, 'Error creating Firewall.');
    }
  };

[cpathipa]

Thank you for adding test coverage!