Refactor FormMessage (#22376)

frontend/src/metabase/components/form/FormMessage.jsx

-/* eslint-disable react/prop-types */
-import React, { Component } from "react";
-import { t } from "ttag";
-
-import { FormMessageStyled } from "./FormMessage.styled";
-
-export const SERVER_ERROR_MESSAGE = t`Server error encountered`;
-export const UNKNOWN_ERROR_MESSAGE = t`Unknown error encountered`;
-
-export default class FormMessage extends Component {
-  render() {
-    const { className, message, formSuccess, noPadding } = this.props;
-
-    const treatedMessage = getMessage(this.props);
-
-    return (
-      <FormMessageStyled
-        className={className}
-        visible={!!message}
-        noPadding={noPadding}
-        hasSucceeded={formSuccess}
-      >
-        {treatedMessage}
-      </FormMessageStyled>
-    );
-  }
-}
-
-const getMessage = ({ message, formError, formSuccess }) => {
-  if (message) {
-    return message;
-  }
-
-  if (formError) {
-    return getErrorMessage(formError);
-  }
-
-  return getSuccessMessage(formSuccess);
-};
-
-export const getErrorMessage = formError => {
-  if (formError) {
-    if (formError.data && formError.data.message) {
-      return formError.data.message;
-    } else if (formError.status >= 400) {
-      return SERVER_ERROR_MESSAGE;
-    } else {
-      return UNKNOWN_ERROR_MESSAGE;
-    }
-  }
-};
-
-export const getSuccessMessage = formSuccess => {
-  if (formSuccess && formSuccess.data.message) {
-    return formSuccess.data.message;
-  }
-};

frontend/src/metabase/components/form/FormMessage.styled.jsx → frontend/src/metabase/components/form/FormMessage/FormMessage.styled.tsx

@@ -4,7 +4,11 @@ import { css } from "@emotion/react";
 import { space } from "metabase/styled-components/theme";
 import { color } from "metabase/lib/colors";
 
-export const FormMessageStyled = styled.span`
+export const FormMessageStyled = styled.span<{
+  visible?: boolean;
+  hasSucceeded?: boolean;
+  noPadding?: boolean;
+}>`
   color: ${({ hasSucceeded }) =>
     hasSucceeded ? color("success") : color("error")};
   float: left;

frontend/src/metabase/components/form/FormMessage/FormMessage.tsx

+import React from "react";
+import { t } from "ttag";
+
+import { FormMessageStyled } from "./FormMessage.styled";
+
+type Response = {
+  status: number;
+  data?: {
+    message?: string;
+  };
+};
+
+interface FormMessageProps {
+  className?: string;
+  message?: string;
+  noPadding?: boolean;
+  formSuccess?: Response;
+  formError?: Response;
+}
+
+const getMessage = ({
+  message,
+  formError,
+  formSuccess,
+}: Pick<FormMessageProps, "message" | "formError" | "formSuccess">) => {
+  if (message) {
+    return message;
+  }
+  if (formError) {
+    return getErrorMessage(formError);
+  }
+  return getSuccessMessage(formSuccess);
+};
+
+export const getErrorMessage = (formError?: Response) => {
+  if (formError) {
+    if (formError.data && formError.data.message) {
+      return formError.data.message;
+    } else if (formError.status >= 400) {
+      return t`Server error encountered`;
+    } else {
+      return t`Unknown error encountered`;
+    }
+  }
+};
+
+export const getSuccessMessage = (formSuccess?: Response) => {
+  return formSuccess?.data?.message;
+};
+
+function FormMessage({
+  className,
+  message,
+  formSuccess,
+  formError,
+  noPadding,
+}: FormMessageProps) {
+  const treatedMessage = getMessage({ message, formSuccess, formError });
+  return (
+    <FormMessageStyled
+      className={className}
+      visible={!!message}
+      noPadding={noPadding}
+      hasSucceeded={!!formSuccess}
+    >
+      {treatedMessage}
+    </FormMessageStyled>
+  );
+}
+
+export default FormMessage;

frontend/src/metabase/components/form/FormMessage/index.ts

+export { default } from "./FormMessage";