Use new TextField in select location view

[olmoh]

• Adds a new secondary variant to TextField
• Adds SearchTextField component
• Uses new TextField in select location view

Fixes DES-2739

---

This change is 

[linear]

DES-2746 Add secondary variant to TextField

DES-2739 Use new TextField component in select location view

[tobias-jarvelov]

@tobias-jarvelov reviewed 29 files and all commit messages, and made 3 comments.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @olmoh).

---

desktop/packages/mullvad-vpn/src/renderer/components/search-text-field/SearchTextField.tsx line 21 at r1 (raw file):

    onValueChange?.(debouncedValue);
  }, [debouncedValue, onValueChange]);

thought: Would it make sense to use useDeferredValue instead of useDebounce? If we use useDebounce to unblock the UI while entering text then useDeferredValue is potentially a better suited candidate for that purpose.

Code quote:

  const [internalValue, setInternalValue] = React.useState(value);
  const debouncedValue = useDebounce(internalValue, internalValue === '' ? 0 : delay);

  React.useEffect(() => {
    if (debouncedValue === undefined) {
      return;
    }

    onValueChange?.(debouncedValue);
  }, [debouncedValue, onValueChange]);

---

desktop/packages/mullvad-vpn/src/renderer/lib/components/text-field/README.md line 4 at r1 (raw file):

A text input component based on the html `<input>` element. Can be used in conjunction with the
`useTextField` hook for managing state and validation.

praise: Love that you took the time to add this README 🎉

Code quote:

# Text Field

A text input component based on the html `<input>` element. Can be used in conjunction with the
`useTextField` hook for managing state and validation.

---

desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/select-location-route-object-model.ts line 8 at r1 (raw file):

export class SelectLocationRouteObjectModel {
  public readonly selectors: ReturnType<typeof createSelectors>;

issue: Making the selectors public and using them in the test breaks the encapsulation the Route Object Model class provides, however more importantly it calls into question the reason of being for the Route Object Models. Before we make this change we should discuss this.

[olmoh]

@olmoh made 2 comments.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @tobias-jarvelov).

---

desktop/packages/mullvad-vpn/src/renderer/components/search-text-field/SearchTextField.tsx line 21 at r1 (raw file):

Previously, tobias-jarvelov (Tobias Järvelöv) wrote…

thought: Would it make sense to use useDeferredValue instead of useDebounce? If we use useDebounce to unblock the UI while entering text then useDeferredValue is potentially a better suited candidate for that purpose.

Done. Nice, suggestion, useDeferredValue should work great in this case.

---

desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/select-location-route-object-model.ts line 8 at r1 (raw file):

Previously, tobias-jarvelov (Tobias Järvelöv) wrote…

issue: Making the selectors public and using them in the test breaks the encapsulation the Route Object Model class provides, however more importantly it calls into question the reason of being for the Route Object Models. Before we make this change we should discuss this.

Done. Reverted this as we discussed, did not apply the changes we discussed to all tests in select-location since I imagine these will change a lot as we rewrite the view.

[tobias-jarvelov]

Code looks good, nicely done! However we have a conflict in MtuSetting.tsx which needs to be resolved before we can merge this.

@tobias-jarvelov reviewed 6 files and all commit messages, made 2 comments, and resolved 2 discussions.
Reviewable status: complete! all files reviewed, all discussions resolved.

---

desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-location/select-location-route-object-model.ts line 8 at r1 (raw file):

Previously, olmoh (Oliver Mohlin) wrote…

Done. Reverted this as we discussed, did not apply the changes we discussed to all tests in select-location since I imagine these will change a lot as we rewrite the view.

LGTM

[tobias-jarvelov]

@tobias-jarvelov reviewed 4 files and all commit messages, and made 1 comment.
Reviewable status: complete! all files reviewed, all discussions resolved.