chore: migrate form message (#17369)

* use ds alpha

* Remove FormMessage, change imports

* use updated ds alpha version
This commit is contained in:
Tanvi Bhakta 2022-10-13 17:44:16 +05:30 committed by GitHub
parent ac899767d2
commit 08e6256fc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 14 additions and 100 deletions

View File

@ -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",

View File

@ -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";

View File

@ -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";

View File

@ -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 (
<StyledAction intent={props.intent}>
{isExternal ? (
<a href={props.url} rel="noreferrer" target="_blank">
{props.text}
</a>
) : (
<Link to={props.url}>{props.text}</Link>
)}
</StyledAction>
);
} else if (props.onClick) {
return (
<StyledAction intent={props.intent} onClick={props.onClick}>
{props.text}
</StyledAction>
);
}
return null;
}
export type FormMessageProps = {
intent: Intent;
message: string;
actions?: MessageAction[];
};
export function FormMessage(props: FormMessageProps) {
const actions =
props.actions &&
props.actions.map((action) => (
<ActionButton key={action.text} {...action} intent={props.intent} />
));
return (
<StyledMessage className="form-message-container" intent={props.intent}>
{props.message}
{actions && <ActionsContainer>{actions}</ActionsContainer>}
</StyledMessage>
);
}
export default FormMessage;

View File

@ -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 {

View File

@ -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";

View File

@ -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"