Replace use of Field with EditInPlace

src/components/views/elements/Field.tsx

@@ -60,8 +60,6 @@ interface IProps {
     // If specified, contents will appear as a tooltip on the element and
     // validation feedback tooltips will be suppressed.
     tooltipContent?: JSX.Element | string;
-    // If specified the tooltip will be shown regardless of feedback
-    forceTooltipVisible?: boolean;
     // If specified, the tooltip with be aligned accorindly with the field, defaults to Right.
     tooltipAlignment?: ComponentProps<typeof Tooltip>["placement"];
     // If specified alongside tooltipContent, the class name to apply to the
@@ -274,7 +272,6 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
             validateOnChange,
             validateOnFocus,
             usePlaceholderAsHint,
-            forceTooltipVisible,
             tooltipAlignment,
             ...inputProps
         } = this.props;
@@ -283,7 +280,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         const tooltipProps: Pick<React.ComponentProps<typeof Tooltip>, "aria-live" | "aria-atomic"> = {};
         let tooltipOpen = false;
         if (tooltipContent || this.state.feedback) {
-            tooltipOpen = forceTooltipVisible || this.state.feedbackVisible;
+            tooltipOpen = this.state.feedbackVisible;
             if (!tooltipContent) {
                 tooltipProps["aria-atomic"] = "true";
                 tooltipProps["aria-live"] = this.state.valid ? "polite" : "assertive";

src/components/views/settings/SetIdServer.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type IThreepid } from "matrix-js-sdk/src/matrix";
+import { EditInPlace, ErrorMessage, TooltipProvider } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -22,7 +23,6 @@ import { timeout } from "../../../utils/promise";
 import { type ActionPayload } from "../../../dispatcher/payloads";
 import InlineSpinner from "../elements/InlineSpinner";
 import AccessibleButton from "../elements/AccessibleButton";
-import Field from "../elements/Field";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import SettingsFieldset from "./SettingsFieldset";
 import { SettingsSubsectionText } from "./shared/SettingsSubsection";
@@ -120,25 +120,6 @@ export default class SetIdServer extends React.Component<IProps, IState> {
         this.setState({ idServer: u, error: undefined });
     };
 
-    private getTooltip = (): JSX.Element | undefined => {
-        if (this.state.checking) {
-            return (
-                <div>
-                    <InlineSpinner />
-                    {_t("identity_server|checking")}
-                </div>
-            );
-        } else if (this.state.error) {
-            return <strong className="warning">{this.state.error}</strong>;
-        } else {
-            return undefined;
-        }
-    };
-
-    private idServerChangeEnabled = (): boolean => {
-        return !!this.state.idServer && !this.state.busy;
-    };
-
     private saveIdServer = (fullUrl: string): void => {
         // Account data change will update localstorage, client, etc through dispatcher
         MatrixClientPeg.safeGet().setAccountData("m.identity_server", {
@@ -393,29 +374,27 @@ export default class SetIdServer extends React.Component<IProps, IState> {
 
         return (
             <SettingsFieldset legend={sectionTitle} description={bodyText}>
-                <form className="mx_SetIdServer" onSubmit={this.checkIdServer}>
-                    <Field
+                <TooltipProvider>
+                    <EditInPlace
+                        cancelButtonLabel={_t("action|reset")}
                         label={_t("identity_server|url_field_label")}
-                        type="text"
-                        autoComplete="off"
+                        onChange={this.onIdentityServerChanged}
+                        onCancel={() => this.setState((s) => ({ idServer: s.currentClientIdServer ?? "" }))}
+                        onClearServerErrors={() => this.setState({ error: undefined })}
+                        onSave={this.checkIdServer}
+                        size={48}
+                        saveButtonLabel={_t("action|change")}
+                        savedLabel={this.state.error ? undefined : _t("identity_server|changed")}
+                        savingLabel={_t("identity_server|checking")}
                         placeholder={this.state.defaultIdServer}
                         value={this.state.idServer}
-                        onChange={this.onIdentityServerChanged}
-                        tooltipContent={this.getTooltip()}
-                        forceTooltipVisible={this.state.error ? true : undefined}
-                        tooltipClassName="mx_SetIdServer_tooltip"
                         disabled={this.state.busy}
-                        forceValidity={this.state.error ? false : undefined}
-                    />
-                    <AccessibleButton
-                        kind="primary_sm"
-                        onClick={this.checkIdServer}
-                        disabled={!this.idServerChangeEnabled()}
+                        serverInvalid={!!this.state.error}
                     >
-                        {_t("action|change")}
-                    </AccessibleButton>
+                        {this.state.error && <ErrorMessage>{this.state.error}</ErrorMessage>}
+                    </EditInPlace>
                     {discoSection}
-                </form>
+                </TooltipProvider>
             </SettingsFieldset>
         );
     }

src/i18n/strings/en_EN.json

@@ -1244,6 +1244,7 @@
         "change_prompt": "Disconnect from the identity server <current /> and connect to <new /> instead?",
         "change_server_prompt": "If you don't want to use <server /> to discover and be discoverable by existing contacts you know, enter another identity server below.",
         "checking": "Checking server",
+        "changed": "Your identity server has been changed",
         "description_connected": "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.",
         "description_disconnected": "You are not currently using an identity server. To discover and be discoverable by existing contacts you know, add one below.",
         "description_optional": "Using an identity server is optional. If you choose not to use an identity server, you won't be discoverable by other users and you won't be able to invite others by email or phone.",