Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(PageError): add component for pretty display error of page #852

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(PageError): add component for pretty display error of page #852

wants to merge 1 commit into from

Conversation

Daniil-Pabolkov
Copy link
Collaborator

@Daniil-Pabolkov Daniil-Pabolkov commented Nov 8, 2024 •
edited by github-actions bot
Loading

@Daniil-Pabolkov Daniil-Pabolkov force-pushed the YTFRONT-4049 branch 5 times, most recently from 9b8a876 to 40a355b Compare November 11, 2024 11:25
@Daniil-Pabolkov Daniil-Pabolkov marked this pull request as ready for review November 11, 2024 11:52
@Daniil-Pabolkov Daniil-Pabolkov force-pushed the YTFRONT-4049 branch 2 times, most recently from 78f692c to 1c6ebe8 Compare November 11, 2024 13:15
ma-efremoff
ma-efremoff reviewed Nov 11, 2024
View reviewed changes
packages/ui/src/ui/components/ErrorDetails/ErrorDetails.js Outdated
{code !== undefined && <React.Fragment>[{ypath.getValue(code)}]</React.Fragment>}
{code !== undefined && (
<>
&#32;<span className={b('error-code')}>[{ypath.getValue(code)}]</span>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

&#32;?

packages/ui/src/ui/components/ErrorDetails/ErrorDetails.scss Outdated
@@ -26,6 +26,10 @@
margin-bottom: 0;
}

&__error-code {
white-space: nowrap;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The value of the block is single number. Do you know other cases?

packages/ui/src/ui/components/PageError/PageError.scss Outdated
flex-direction: row;
align-items: stretch;
gap: 30px;
max-width: 90vw;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if we want to use the block in a modal dialog?

packages/ui/src/ui/components/PageError/PageError.scss Outdated
justify-content: center;
flex: 1;
min-width: 100%;
min-height: 100%;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need min-width, min-height here?

packages/ui/src/ui/components/PageError/PageError.scss Outdated
color: var(--g-color-text-complementary);
font-family: var(--g-text-body-font-family);
font-size: var(--g-text-subheader-1-font-size);
line-height: var(--g-text-subheader-1-line-height);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it better to use <Text ... /> from @gravity-ui/uikit.

packages/ui/src/ui/store/selectors/navigation/index.ts Outdated
@@ -0,0 +1,58 @@
import {createSelector} from 'reselect';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is alway better to use git mv to keep history of changes of renamed files.

packages/ui/src/ui/store/selectors/navigation/navigation.ts Outdated
@@ -134,23 +135,14 @@ export const getSupportedTabs = createSelector(
},
);

const emptyHandler = () => undefined;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need it?

packages/ui/src/ui/components/PageError/PageError.scss Outdated
&__title {
font-family: var(--g-text-body-font-family);
font-size: var(--g-text-subheader-3-font-size);
line-height: var(--g-text-subheader-3-line-height);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<Text ... />

packages/ui/src/ui/components/WordWraps/WordWrapPath.tsx Outdated
import React, {useMemo} from 'react';

const tokenRegex =
/(\/{1,2}@[^/]+?[^/.,_-]+)|(\/{1,2}[^/.,_-]+)|([.,_-]{1,3}[^/.,_-]+)|([.,_-]{1,3})/g;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is better to use YPath to split path.

packages/ui/src/ui/components/WordWraps/WordWrapPath.tsx Outdated
path: string;
}

export const WordWrapPath: React.FC<WordWrapPathProps> = ({path}) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you prefer useMemo instead of React.memo?

ma-efremoff
ma-efremoff reviewed Nov 11, 2024
View reviewed changes
packages/ui/src/ui/pages/navigation/Navigation/Navigation.tsx Outdated
</div>
<PageError
error={permissionDeniedError ?? details}
type={isPermissionDenied ? PageErrorType.PermissionsDenied : PageErrorType.NotFound}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a lot of other types of errors except PermissionDenied and NotFound

packages/ui/src/ui/pages/operations/OperationDetail/OperationDetail.tsx Outdated
@@ -365,7 +365,13 @@ class OperationDetail extends React.Component<ReduxProps & RouteProps> {
renderError() {
const {errorData} = this.props;

return <Error message={errorData.message} error={errorData.details} />;
return (
<PageError
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a lot of other types of errors except PermissionDenied and NotFound

@KostyaAvtushko KostyaAvtushko self-requested a review as a code owner December 16, 2024 11:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ma-efremoff ma-efremoff ma-efremoff left review comments

@evtaranov evtaranov Awaiting requested review from evtaranov evtaranov is a code owner

@SimbiozizV SimbiozizV Awaiting requested review from SimbiozizV SimbiozizV is a code owner

@KostyaAvtushko KostyaAvtushko Awaiting requested review from KostyaAvtushko KostyaAvtushko is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Daniil-Pabolkov @ma-efremoff