PromucFlow_constructor/app/client/src/pages/Editor/EntityNotFoundPane.tsx
Pranav Kanade b778b83ac4
refactor: admin settings (#9906)
* 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>
2022-02-11 23:38:46 +05:30

80 lines
1.9 KiB
TypeScript

import React from "react";
import styled from "styled-components";
import Button, { Size, Category } from "components/ads/Button";
import PageUnavailableImage from "assets/images/invalid-page.png";
import {
PAGE_NOT_FOUND_ERROR,
INVALID_URL_ERROR,
createMessage,
} from "@appsmith/constants/messages";
import { useHistory } from "react-router-dom";
const Wrapper = styled.div`
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: flex-start;
padding-top: 15%;
background: #fcfcfc;
position: absolute;
width: 100%;
height: 100%;
.page-details {
display: flex;
flex-direction: column;
align-items: center;
width: 450px;
}
.bold-text {
font-weight: ${(props) => props.theme.fontWeights[3]};
font-size: 24px;
margin-top: 20px;
}
.page-message {
margin-top: 14px;
color: #716e6e;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.733333px;
}
.page-unavailable-img {
width: 72px;
}
.button-position {
margin-top: 14px;
}
`;
type Props = {
goBackFn?: () => void; // custom function for returning to any declared route.
};
function EntityNotFoundPane(props: Props) {
const history = useHistory();
return (
<Wrapper>
<img
alt="Page Unavailable"
className="page-unavailable-img"
src={PageUnavailableImage}
/>
<div className="page-details">
<p className="bold-text">{createMessage(INVALID_URL_ERROR)}</p>
<p className="page-message">{createMessage(PAGE_NOT_FOUND_ERROR)}</p>
<Button
category={Category.secondary}
className="button-position"
cypressSelector="t--invalid-page-go-back"
onClick={props.goBackFn ? props.goBackFn : history.goBack}
size={Size.large}
tag="button"
text="Go Back"
/>
</div>
</Wrapper>
);
}
export default EntityNotFoundPane;