upcoming: Enable Linode Interface query only when Delete Interface dialog is open and update Dialog title

[coliu-akamai]

Description 📝

• small PR to only enable useLinodeInterfaceQuery in Delete Interface dialog if dialog is open

Changes 🔄

• enable query when dialog is open (and when interface ID exists)
• updated dialog title a bit

Preview 📷

Before	After
	no queries when delete dialog closed

How to test 🧪

Using devenv
Have a linode using new interfaces

Reproduction steps

• On the develop branch, navigate to the Linode's network section
• notice queries to get a linode interface erroring out

Verification

• On this branch, confirm that there are no queries to linode/instances/{id}/interfaces/{interfaceId} when Delete Dialog isn't open

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[bnussman-akamai]

Thanks for fixing my mistake! This type of data-fetching bug is far too common 😖

[hkhalil-akamai]

This change is not mentioned in the PR description; was it meant to be included here?

[hkhalil-akamai]

This type of data-fetching bug is far too common 😖

I've been thinking about this pattern which will make this type of bug easier to avoid:

export const useLinodeInterfaceQuery = (
  linodeId: number,
  interfaceId: number | undefined,
  enabled: boolean = true;
) => {
  return useQuery<LinodeInterface, APIError[]>({
    ...linodeQueries
      .linode(linodeId)
      ._ctx.interfaces._ctx.interface(interfaceId ?? -1),
     enabled && interfaceId !== undefined,
  });
};

const {
    ...
} = useLinodeInterfaceQuery(
    linodeId,
    interfaceId,
    open
  );

cc @bnussman-akamai

[bnussman-akamai]

@hkhalil-akamai Yeah, that would work. It does feel a bit weird to pass an undefined interfaceId but it does the job

[coliu-akamai]

switched to your suggestion @hkhalil-akamai - ty!

[linode-gh-bot]

Cloud Manager UI test results

🎉 539 passing tests on test run #4 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	539 Passing	3 Skipped	114m 3s