From 08e6256fc667388fdca30c0a26c5699ec9c33aea Mon Sep 17 00:00:00 2001 From: Tanvi Bhakta Date: Thu, 13 Oct 2022 17:44:16 +0530 Subject: [PATCH] chore: migrate form message (#17369) * use ds alpha * Remove FormMessage, change imports * use updated ds alpha version --- app/client/package.json | 2 +- app/client/src/ce/pages/UserAuth/Login.tsx | 3 +- app/client/src/ce/pages/UserAuth/SignUp.tsx | 3 +- .../components/ads/formFields/FormMessage.tsx | 85 ------------------- .../src/pages/UserAuth/ForgotPassword.tsx | 3 +- .../src/pages/UserAuth/ResetPassword.tsx | 10 ++- app/client/yarn.lock | 8 +- 7 files changed, 14 insertions(+), 100 deletions(-) delete mode 100644 app/client/src/components/ads/formFields/FormMessage.tsx diff --git a/app/client/package.json b/app/client/package.json index 4bbde68a7f..e01c1eb747 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -46,7 +46,7 @@ "cypress-log-to-output": "^1.1.2", "dayjs": "^1.10.6", "deep-diff": "^1.0.2", - "design-system": "npm:@appsmithorg/design-system@1.0.26", + "design-system": "npm:@appsmithorg/design-system@1.0.26-alpha.7", "downloadjs": "^1.4.7", "draft-js": "^0.11.7", "emoji-mart": "^3.0.1", diff --git a/app/client/src/ce/pages/UserAuth/Login.tsx b/app/client/src/ce/pages/UserAuth/Login.tsx index 96658c76d9..d4fd0f216e 100644 --- a/app/client/src/ce/pages/UserAuth/Login.tsx +++ b/app/client/src/ce/pages/UserAuth/Login.tsx @@ -30,9 +30,8 @@ import { NEW_TO_APPSMITH, createMessage, } from "@appsmith/constants/messages"; -import FormMessage from "components/ads/formFields/FormMessage"; import FormGroup from "components/ads/formFields/FormGroup"; -import { Button, Size } from "design-system"; +import { Button, FormMessage, Size } from "design-system"; import FormTextField from "components/utils/ReduxFormTextField"; import ThirdPartyAuth from "@appsmith/pages/UserAuth/ThirdPartyAuth"; import { ThirdPartyLoginRegistry } from "pages/UserAuth/ThirdPartyLoginRegistry"; diff --git a/app/client/src/ce/pages/UserAuth/SignUp.tsx b/app/client/src/ce/pages/UserAuth/SignUp.tsx index 6e117c8612..4b4300523b 100644 --- a/app/client/src/ce/pages/UserAuth/SignUp.tsx +++ b/app/client/src/ce/pages/UserAuth/SignUp.tsx @@ -29,12 +29,11 @@ import { ALREADY_HAVE_AN_ACCOUNT, createMessage, } from "@appsmith/constants/messages"; -import FormMessage from "components/ads/formFields/FormMessage"; import FormGroup from "components/ads/formFields/FormGroup"; import FormTextField from "components/utils/ReduxFormTextField"; import ThirdPartyAuth from "@appsmith/pages/UserAuth/ThirdPartyAuth"; import { ThirdPartyLoginRegistry } from "pages/UserAuth/ThirdPartyLoginRegistry"; -import { Button, Size } from "design-system"; +import { Button, FormMessage, Size } from "design-system"; import { isEmail, isStrongPassword, isEmptyString } from "utils/formhelpers"; diff --git a/app/client/src/components/ads/formFields/FormMessage.tsx b/app/client/src/components/ads/formFields/FormMessage.tsx deleted file mode 100644 index cdfa07f01f..0000000000 --- a/app/client/src/components/ads/formFields/FormMessage.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import { Intent } from "constants/DefaultTheme"; -import { getTypographyByKey } from "constants/DefaultTheme"; -import { Link } from "react-router-dom"; - -export type MessageAction = { - url?: string; - onClick?: () => void; - text: string; - intent: Intent; -}; - -const StyledMessage = styled.div<{ intent: Intent }>` - & { - ${(props) => getTypographyByKey(props, "p1")} - width: 100%; - padding: ${(props) => props.theme.spaces[4]}px; - color: ${(props) => props.theme.colors.formMessage.text[props.intent]}; - background-color: ${(props) => - props.theme.colors.formMessage.background[props.intent]}; - } -`; - -export const ActionsContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; -`; - -const StyledAction = styled.div<{ intent: Intent }>` - margin-top: ${(props) => props.theme.spaces[5]}px; - ${(props) => getTypographyByKey(props, "h5")} - font-weight: 600; - & a { - text-decoration: none; - color: ${(props) => props.theme.colors.formMessage.text[props.intent]}; - } -`; - -export function ActionButton(props: MessageAction) { - if (props.url) { - const isExternal = props.url.indexOf("//") !== -1; - return ( - - {isExternal ? ( - - {props.text} - - ) : ( - {props.text} - )} - - ); - } else if (props.onClick) { - return ( - - {props.text} - - ); - } - return null; -} - -export type FormMessageProps = { - intent: Intent; - message: string; - actions?: MessageAction[]; -}; - -export function FormMessage(props: FormMessageProps) { - const actions = - props.actions && - props.actions.map((action) => ( - - )); - return ( - - {props.message} - {actions && {actions}} - - ); -} - -export default FormMessage; diff --git a/app/client/src/pages/UserAuth/ForgotPassword.tsx b/app/client/src/pages/UserAuth/ForgotPassword.tsx index 16e3a9dea4..ade0da0d37 100644 --- a/app/client/src/pages/UserAuth/ForgotPassword.tsx +++ b/app/client/src/pages/UserAuth/ForgotPassword.tsx @@ -28,11 +28,10 @@ import { createMessage, } from "@appsmith/constants/messages"; import { AUTH_LOGIN_URL } from "constants/routes"; -import FormMessage from "components/ads/formFields/FormMessage"; import { FORGOT_PASSWORD_FORM_NAME } from "@appsmith/constants/forms"; import FormGroup from "components/ads/formFields/FormGroup"; import FormTextField from "components/utils/ReduxFormTextField"; -import { Button, Size } from "design-system"; +import { Button, FormMessage, Size } from "design-system"; import { Icon } from "@blueprintjs/core"; import { isEmail, isEmptyString } from "utils/formhelpers"; import { diff --git a/app/client/src/pages/UserAuth/ResetPassword.tsx b/app/client/src/pages/UserAuth/ResetPassword.tsx index 9bbd7c73b6..9f45aa7545 100644 --- a/app/client/src/pages/UserAuth/ResetPassword.tsx +++ b/app/client/src/pages/UserAuth/ResetPassword.tsx @@ -9,12 +9,14 @@ import { getIsTokenValid, getIsValidatingToken } from "selectors/authSelectors"; import { Icon } from "@blueprintjs/core"; import FormGroup from "components/ads/formFields/FormGroup"; import FormTextField from "components/utils/ReduxFormTextField"; -import FormMessage, { - MessageAction, +import { + Button, + FormMessage, FormMessageProps, -} from "components/ads/formFields/FormMessage"; + MessageAction, + Size, +} from "design-system"; import Spinner from "components/editorComponents/Spinner"; -import { Button, Size } from "design-system"; import StyledForm from "components/editorComponents/Form"; import { isEmptyString, isStrongPassword } from "utils/formhelpers"; diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 483274852d..a452d61549 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -6211,10 +6211,10 @@ depd@~1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz" -"design-system@npm:@appsmithorg/design-system@1.0.26": - version "1.0.26" - resolved "https://registry.yarnpkg.com/@appsmithorg/design-system/-/design-system-1.0.26.tgz#1462626f56ebad576d83746e01d878d9bfee5a6c" - integrity sha512-2Dr0PqXUY3Y5IiuPAK9uuUC51CP/FRfJBP5MZH/ft1wowr97h3rLhp0nKkoRAoPR4vPQUSjZ8m/qZlywFxQh5Q== +"design-system@npm:@appsmithorg/design-system@1.0.26-alpha.7": + version "1.0.26-alpha.7" + resolved "https://registry.yarnpkg.com/@appsmithorg/design-system/-/design-system-1.0.26-alpha.7.tgz#a8c446e923bd829a8f3ce8905931d46bd60ddb0f" + integrity sha512-GNZRGwQcO2JgU3IvoHBqvjGtZmdGZxrVMb2pDdru0wMJGc49QOEtu4/AJ7eGH8ZlSDDlcJLcS3fE60XPKRkqnA== dependencies: "@blueprintjs/datetime" "3.23.6" copy-to-clipboard "^3.3.1"