feat: [M3-7016] - Add Basic Filtering for Firewall Devices

[tyler-akamai]

Description 📝

Added device filtering for the Linode and Nodebalancer firewall tabs.

Major Changes 🔄

• Added device filtering using the DebouncedSearchTextField component

Preview 📷

Before	After

How to test 🧪

1. Navigate to http://localhost:3000/firewalls
2. Click on any of the firewall
3. Navigate to the linodes tab
4. Make sure to add linodes to the firewall
5. Ensure the filter works properly
6. Navigate to the nodebalancers tab
7. Make sure to add nodebalancers to the firewall
8. Ensure the filter works properly

[cpathipa]

We could use ActionsPanel here to avoid variations for primary actions button.

[tyler-akamai]

it seems like the ActionsPanel is also dependent on the primary actions button. Let me know if I misinterpreted your comment.

[cpathipa]

@tyler-akamai Yes, you are right. My intention is to use the ActionsPanel component to render the Primary button instead of having isolated references to the primary button, unless the ActionsPanel doesn't meet our requirements. This approach would make future maintenance easier.

[tyler-akamai]

This is a good callout. I checked with the team on this. They said that for one off selections like "Add a Nodebalancer/Linode" we should use the Button component. We should only use the ActionsPanel component if there are multiple actions to select from, or we are in a modal or drawer.

[tyler-akamai]

I added an ActionsPanel storybook component and added this clarification to the documentation page.

[abailly-akamai]

@tyler-akamai i know this is a draft, but just heads up this PR is modifying two core components and you shouldn't have to do that.

• Removing a required label prop isn't recommended
• you already have a hideLabel prop on the textfield component

[tyler-akamai]

@tyler-akamai i know this is a draft, but just heads up this PR is modifying two core components and you shouldn't have to do that.

• Removing a required label prop isn't recommended
• you already have a hideLabel prop on the textfield component

yes, great catch.

[abailly-akamai]

Coming along! some more needed changes

[abailly-akamai]

you may want to set a lower debounceTime than the default (250 instead of 400)

[tyler-akamai]

Okay! is there a reason its at 400? Should we change the default to something lower?

[abailly-akamai]

We may want to discuss this for a later PR, but see how the experience feels with 400. I find it to feel laggy

[abailly-akamai]

Looks good!

Tested in the browser and text field behaves as expected

[carrillo-erik]

I'm experiencing a noticeable delay when adding or removing devices to the Firewall. I did not observe this in the other PR where the functionality to add devices was introduced.

Screen.Recording.2023-09-12.at.2.17.24.PM.mov

It might be a state management issue because the number of devices is updated upon adding/removing devices, it's just that the table of devices is not updated until the page refreshes.

[cpathipa]

@tyler-akamai Over all LGTM, Othe than below observations:

The Linode firewall's table does not refresh successfully after adding Linodes until the page is manually refreshed.

Same Behavior when Remove action is performed

It would be nice to have descriptive tooltip message saying clear all or deselect all for X button.

[carrillo-erik]

    //   const devices =
    //   allDevices?.filter((device) => device.entity.type === type) || [];

    const [filteredDevices, setFilteredDevices] = React.useState<
      FirewallDevice[]
    >([]);

    React.useEffect(() => {
      setFilteredDevices(allDevices?.filter((device) => device.entity.type === type) || []);
    }, [allDevices, type]);

 const selectedDevice = filteredDevices?.find(
      (device) => device.id === selectedDeviceId
    );

    const filter = (value: string) => {
      setSearchText(value);
      const filtered = filteredDevices.filter((device) => {
        return device.entity.label.toLowerCase().includes(value.toLowerCase());
      });
      setFilteredDevices(filtered);
    };

Screen.Recording.2023-09-12.at.3.49.44.PM.mov

[tyler-akamai]

    //   const devices =
    //   allDevices?.filter((device) => device.entity.type === type) || [];

    const [filteredDevices, setFilteredDevices] = React.useState<
      FirewallDevice[]
    >([]);

    React.useEffect(() => {
      setFilteredDevices(allDevices?.filter((device) => device.entity.type === type) || []);
    }, [allDevices, type]);

 const selectedDevice = filteredDevices?.find(
      (device) => device.id === selectedDeviceId
    );

    const filter = (value: string) => {
      setSearchText(value);
      const filtered = filteredDevices.filter((device) => {
        return device.entity.label.toLowerCase().includes(value.toLowerCase());
      });
      setFilteredDevices(filtered);
    };

Screen.Recording.2023-09-12.at.3.49.44.PM.mov

Huge thank you!