From 5bde16ccbb0ea6c99c74e9c3f276c8aaa1b87afe Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 9 Nov 2020 01:07:15 +0000
Subject: [PATCH] hide some validation tooltips if fields are valid.

fixes https://github.com/vector-im/element-web/issues/9683
---
 src/components/views/auth/RegistrationForm.js | 3 +++
 src/components/views/elements/Validation.tsx  | 7 +++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js
index db7d1df994..419443984a 100644
--- a/src/components/views/auth/RegistrationForm.js
+++ b/src/components/views/auth/RegistrationForm.js
@@ -250,6 +250,7 @@ export default class RegistrationForm extends React.Component {
 
     validateEmailRules = withValidation({
         description: () => _t("Use an email address to recover your account"),
+        hideDescriptionIfValid: true,
         rules: [
             {
                 key: "required",
@@ -326,6 +327,7 @@ export default class RegistrationForm extends React.Component {
 
     validatePhoneNumberRules = withValidation({
         description: () => _t("Other users can invite you to rooms using your contact details"),
+        hideDescriptionIfValid: true,
         rules: [
             {
                 key: "required",
@@ -356,6 +358,7 @@ export default class RegistrationForm extends React.Component {
 
     validateUsernameRules = withValidation({
         description: () => _t("Use lowercase letters, numbers, dashes and underscores only"),
+        hideDescriptionIfValid: true,
         rules: [
             {
                 key: "required",
diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx
index 55e5714719..667b8e99aa 100644
--- a/src/components/views/elements/Validation.tsx
+++ b/src/components/views/elements/Validation.tsx
@@ -33,6 +33,7 @@ interface IRule<T, D = void> {
 interface IArgs<T, D = void> {
     rules: IRule<T, D>[];
     description(this: T, derivedData: D): React.ReactChild;
+    hideDescriptionIfValid: Boolean;
     deriveData?(data: Data): Promise<D>;
 }
 
@@ -54,6 +55,8 @@ export interface IValidationResult {
  * @param {Function} description
  *     Function that returns a string summary of the kind of value that will
  *     meet the validation rules. Shown at the top of the validation feedback.
+ * @param {Boolean} hideDescriptionIfValid
+ *     If true, don't show the description if the validation passes validation.
  * @param {Function} deriveData
  *     Optional function that returns a Promise to an object of generic type D.
  *     The result of this Promise is passed to rule methods `skip`, `test`, `valid`, and `invalid`.
@@ -71,7 +74,7 @@ export interface IValidationResult {
  *     A validation function that takes in the current input value and returns
  *     the overall validity and a feedback UI that can be rendered for more detail.
  */
-export default function withValidation<T = undefined, D = void>({ description, deriveData, rules }: IArgs<T, D>) {
+export default function withValidation<T = undefined, D = void>({ description, hideDescriptionIfValid, deriveData, rules }: IArgs<T, D>) {
     return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise<IValidationResult> {
         if (!value && allowEmpty) {
             return {
@@ -156,7 +159,7 @@ export default function withValidation<T = undefined, D = void>({ description, d
         }
 
         let summary;
-        if (description) {
+        if (description && (details || !hideDescriptionIfValid)) {
             // We're setting `this` to whichever component holds the validation
             // function. That allows rules to access the state of the component.
             const content = description.call(this, derivedData);