chore: migrate form message (#17369)
* use ds alpha * Remove FormMessage, change imports * use updated ds alpha version
This commit is contained in:
parent
ac899767d2
commit
08e6256fc6
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user