fbc3bd663b
* Icon component deleted and changed the imports in refrence places * design system package version changed * import changes * Delete TextInput.tsx * Change imports * Change single named import * Update package * Update package * Delete ScrollIndicator.tsx * Change imports * Icon import completed * Event type added * Changed Button component imports * import change button * Button onclick type fix * Label with Tooltip import changes * Changed breadcrumbs import * EmojiPicker and Emoji Reaction import changes * AppIcon import change * import bug fix * Menu Item import chnages * Icon selector imports changed * Delete LabelWithTooltip.tsx * Change imports across the app * Update package version * Update version number for design-system * Delete Checkbox.tsx * Remove the exports * Add lock file for ds package update * Change imports * default import -> named * Update release version * Make arg type explicit * Updated design-system to latest release * Missing file mysteriously comes back and is updated accordingly * changes design-system package version * Add types to arguments in the onChange for text input * onBlur type fix * Search component in property pane * WDS button changes reverted * package version bumped * conflict fix * Remove Dropdown, change imports * Category import fix * fix: table icon size import * Bump version of design system package * Yarn lock Co-authored-by: Tanvi Bhakta <tanvibhakta@gmail.com>
80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { Button, Size, Category } from "design-system";
|
|
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;
|