b778b83ac4
* refactor admin settings feature * separated save-restart bar to separate component * created new CE dir to facilitate code split * created separate ee dir and exporting everything we have in ce file. * little mod * minor fix * splitting settings types config * using object literals for category types instead of enums * CE: support use of component for each category * minor style fix * authentication page UI changes implemented * github signup doc url added back * removed comments * routing updates * made subcategories listing in left pane optional * added muted saml to auth listing * added breadcrumbs and enabled button * created separate component for auth page and auth config * added callout and disconnect components * updated breadcrumbs component * minor updates to common components * updated warning callout and added icon * ce: test cases fixed * updated test file name * warning banner callout added on auth page * updated callout banner for form login * CE: Split config files * CE: moved the window declaration in EE file as its dependency will be updated in EE * CE: Splitting ApiConstants and SocialLogin constants * CE: split login page * CE: moved getSocialLoginButtonProps func to EE file as it's dependencies will be updated in EE * added key icon * CE: created a factory class to share social auths list * Minor style fix for social btns * Updated the third party auth styles * Small fixes to styling * ce: splitting forms constants * breadcrumbs implemented for all pages in admin settings * Settings breadcrumbs separated * splitted settings breadcrumbs between ce and ee * renamed default import * minor style fix * added login form config. * updated login/signup pages to use form login disabled config * removed common functionality outside * implemented breadcrumb component from scratch without using blueprint * removed unwanted code * Small style update * updated breadcrumb categories file name and breadcrumb icon * added cypress tests for admin settings auth page * added comments * update locator for upgrade button * added link for intercom on upgrade button * removed unnecessary file * minor style fix * style fix for auth option cards * split messages constant * fixed imports for message constants splitting. * added message constants * updated unit test cases * fixed messages import in cypress index * fixed messages import again, cypress fails to read re-exported objs. * added OIDC auth method on authentication page * updated import statements from ee to @appsmith * removed dead code * updated read more link UI * PR comments fixes * some UI fixes * used color and fonts from theme * fixed some imports * fixed some imports * removed warning imports * updated OIDC logo and auth method desc copies * css changes * css changes * css changes * updated cypress test for breadcrumb * moved callout component to ads as calloutv2 * UI changes for form fields * updated css for spacing between form fields * added sub-text on auth pages * added active class for breadcrumb item * added config for disable signup toggle and fixed UI issues of restart banner * fixed admin settings page bugs * assigned true as default state for signup * fixed messages import statements * updated code for PR comments related suggestions * reverted file path change in cypress support * updated cypress test * updated cypress test Co-authored-by: Ankita Kinger <ankita@appsmith.com>
94 lines
2.2 KiB
TypeScript
94 lines
2.2 KiB
TypeScript
import styled from "styled-components";
|
|
import React from "react";
|
|
import { ReduxAction } from "constants/ReduxActionConstants";
|
|
import { Dispatch } from "react";
|
|
import { useDispatch } from "react-redux";
|
|
import Icon, { IconSize } from "../../components/ads/Icon";
|
|
import { Colors } from "constants/Colors";
|
|
|
|
export type CalloutType = "Warning" | "Info";
|
|
|
|
export const Wrapper = styled.div<{ type?: CalloutType }>`
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 8px 16px;
|
|
${(props) =>
|
|
props.type !== "Warning"
|
|
? `border-left: 5px solid ${Colors.CURIOUS_BLUE};
|
|
color: #00407d;
|
|
background: ${Colors.PALE_BLUE};`
|
|
: `color: #c91818; background: ${Colors.FAIR_PINK};
|
|
`}
|
|
margin: 16px 0;
|
|
|
|
.warning-icon {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
h4 {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
a {
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
line-height: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
letter-spacing: 0.4px;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
margin: 5px 0;
|
|
${(props) =>
|
|
props.type !== "Warning" ? `color: #00407d;` : `color: #c91818;`}
|
|
`;
|
|
|
|
export function Callout(props: {
|
|
type: CalloutType;
|
|
title: string;
|
|
actionLabel?: string;
|
|
action?: (
|
|
dispatch: Dispatch<ReduxAction<any>>,
|
|
settings?: Record<string, any>,
|
|
) => void;
|
|
url?: string;
|
|
}) {
|
|
const dispatch = useDispatch();
|
|
const linkProps: Record<string, string | (() => any)> = {};
|
|
|
|
if (props.url) {
|
|
linkProps.href = props.url;
|
|
linkProps.target = "_blank";
|
|
} else if (props.action) {
|
|
linkProps.onClick = () => {
|
|
if (props.action) {
|
|
props.action(dispatch);
|
|
}
|
|
};
|
|
}
|
|
|
|
return (
|
|
<Wrapper type={props.type}>
|
|
{props.type === "Warning" && (
|
|
<Icon
|
|
className="warning-icon"
|
|
name="warning-line"
|
|
size={IconSize.XXXXL}
|
|
/>
|
|
)}
|
|
<div>
|
|
<h4>{props.title}</h4>
|
|
<a {...linkProps}>
|
|
{props.actionLabel}
|
|
<Icon name="right-arrow" size={IconSize.LARGE} />
|
|
</a>
|
|
</div>
|
|
</Wrapper>
|
|
);
|
|
}
|