yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-01 11:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

MINOR : fix UI issues (#15110)

Browse Source 
* fix mention feed right panel when no data is there

* support markdown parser in team table description column

* setting card height and description font size fix

* make initial and page loader in center

* remove margin from paragraph

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
This commit is contained in:
Ashish Gupta 2024-02-09 22:07:01 +05:30 committed by GitHub
parent b996f2f5f4
commit 6b770f4b75
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 70 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx
View File

@ -51,7 +51,7 @@ const ActivityFeedListV1 = ({
}, [feedList]);
useEffect(() => {
if (onFeedClick && entityThread[0]) {
if (onFeedClick) {
onFeedClick(entityThread[0]);
}
}, [entityThread, onFeedClick]);

4
openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx
View File

@ -27,7 +27,7 @@ import Loader from '../Loader/Loader';
import withSuspenseFallback from './withSuspenseFallback';
const SigninPage = withSuspenseFallback(
React.lazy(() => import('../../pages/LoginPage'))
React.lazy(() => import('../../pages/LoginPage/SignInPage'))
);
const PageNotFound = withSuspenseFallback(
React.lazy(() => import('../../pages/PageNotFound/PageNotFound'))
@ -112,7 +112,7 @@ const AppRouter = () => {
}, [handleClickEvent]);
if (loading) {
return <Loader />;
return <Loader fullScreen />;
}
if (!isAuthenticated && isProtectedRoute(location.pathname)) {

7
openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.js
View File

@ -17,7 +17,12 @@ import Loader from '../Loader/Loader';
export default function withSuspenseFallback(Component) {
return function DefaultFallback(props) {
return (
<Suspense fallback={<Loader />}>
<Suspense
fallback={
<div className="ant-layout-content flex-center">
<Loader />
</div>
}>
<Component {...props} />
</Suspense>
);

6
openmetadata-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OidcAuthenticator.tsx
View File

@ -24,7 +24,7 @@ import React, {
import { Callback, makeAuthenticator, makeUserManager } from 'react-oidc';
import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
import { ROUTES } from '../../../constants/constants';
import SigninPage from '../../../pages/LoginPage/index';
import SignInPage from '../../../pages/LoginPage/SignInPage';
import PageNotFound from '../../../pages/PageNotFound/PageNotFound';
import localState from '../../../utils/LocalStorageUtils';
import { showErrorToast } from '../../../utils/ToastUtils';
@ -125,7 +125,7 @@ const OidcAuthenticator = forwardRef<AuthenticatorRef, Props>(
</Route>
<Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
{!isSigningIn ? (
<Route exact component={SigninPage} path={ROUTES.SIGNIN} />
<Route exact component={SignInPage} path={ROUTES.SIGNIN} />
) : null}
<Route
path={ROUTES.CALLBACK}
@ -174,7 +174,7 @@ const OidcAuthenticator = forwardRef<AuthenticatorRef, Props>(
<AppWithAuth />
)}
</Switch>
{loading && isSigningIn && <Loader />}
{loading && isSigningIn && <Loader fullScreen />}
</>
);
}

6
openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/AuthProvider.tsx
View File

@ -628,7 +628,7 @@ export const AuthProvider = ({
{children}
</OidcAuthenticator>
) : (
<Loader />
<Loader fullScreen />
);
}
case AuthProviderEnum.Azure: {
@ -643,7 +643,7 @@ export const AuthProvider = ({
</MsalAuthenticator>
</MsalProvider>
) : (
<Loader />
<Loader fullScreen />
);
}
default: {
@ -687,7 +687,7 @@ export const AuthProvider = ({
return (
<AuthContext.Provider value={authContext}>
{isLoading ? <Loader /> : getProtectedApp()}
{isLoading ? <Loader fullScreen /> : getProtectedApp()}
</AuthContext.Provider>
);
};

11
openmetadata-ui/src/main/resources/ui/src/components/Loader/Loader.test.tsx
View File

@ -16,11 +16,16 @@ import React from 'react';
import Loader from './Loader';
describe('Test Loader Component', () => {
it('Component should render', () => {
it('should render component', () => {
const { getByTestId } = render(<Loader />);
const loader = getByTestId('loader');
expect(getByTestId('loader')).toBeInTheDocument();
});
expect(loader).toBeInTheDocument();
it('should render full screen loader component', () => {
const { getByTestId } = render(<Loader fullScreen />);
expect(getByTestId('full-screen-loader')).toBeInTheDocument();
expect(getByTestId('loader')).toBeInTheDocument();
});
});

14
openmetadata-ui/src/main/resources/ui/src/components/Loader/Loader.tsx
View File

@ -19,6 +19,7 @@ type Props = {
size?: 'default' | 'small' | 'x-small';
type?: 'default' | 'success' | 'error' | 'white';
className?: string;
fullScreen?: boolean;
style?: CSSProperties;
};
@ -26,6 +27,7 @@ const Loader: FunctionComponent<Props> = ({
size = 'default',
type = 'default',
className = '',
fullScreen = false,
style,
}: Props): JSX.Element => {
let classes = 'loader';
@ -60,6 +62,18 @@ const Loader: FunctionComponent<Props> = ({
break;
}
if (fullScreen) {
return (
<div className="h-min-100 flex-center" data-testid="full-screen-loader">
<div
className={classNames(classes, className)}
data-testid="loader"
style={style}
/>
</div>
);
}
return (
<div
className={classNames(classes, className)}

2
openmetadata-ui/src/main/resources/ui/src/components/PermissionProvider/PermissionProvider.tsx
View File

@ -198,7 +198,7 @@ const PermissionProvider: FC<PermissionProviderProps> = ({ children }) => {
return (
<PermissionContext.Provider value={contextValues}>
{loading ? <Loader /> : children}
{loading ? <Loader fullScreen /> : children}
</PermissionContext.Provider>
);
};

3
openmetadata-ui/src/main/resources/ui/src/components/Setting/SettingItemCard/setting-item-card.style.less
View File

@ -13,6 +13,7 @@
@import url('../../../styles/variables.less');
.setting-card-item {
height: 100%;
border: 1px solid @grey-bg-with-alpha;
border-radius: 10px;
transition: 0.3s ease-in-out;
@ -44,7 +45,7 @@
.setting-card-description {
margin-top: 5px;
font-size: 12px;
font-size: 14px;
font-weight: 400;
color: @text-grey-muted;
}

28
openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamHierarchy.tsx
View File

@ -23,6 +23,10 @@ import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import FilterTablePlaceHolder from '../../../components/common/ErrorWithPlaceholder/FilterTablePlaceHolder';
import Table from '../../../components/common/Table/Table';
import {
DESCRIPTION_LENGTH,
NO_DATA_PLACEHOLDER,
} from '../../../constants/constants';
import { TABLE_CONSTANTS } from '../../../constants/Teams.constants';
import { TeamType } from '../../../generated/api/teams/createTeam';
import { Team } from '../../../generated/entity/teams/team';
@ -34,6 +38,7 @@ import { getTeamsWithFqnPath } from '../../../utils/RouterUtils';
import { getTableExpandableConfig } from '../../../utils/TableUtils';
import { getMovedTeamData } from '../../../utils/TeamUtils';
import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
import RichTextEditorPreviewer from '../../common/RichTextEditor/RichTextEditorPreviewer';
import { DraggableBodyRowProps } from '../../Draggable/DraggableBodyRowProps.interface';
import { MovedTeamProps, TeamHierarchyProps } from './team.interface';
import './teams.less';
@ -122,17 +127,18 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
dataIndex: 'description',
width: 300,
key: 'description',
render: (description: string) => (
<Typography.Paragraph
className="m-b-0"
ellipsis={{
rows: 2,
}}
style={{ whiteSpace: 'pre-wrap' }}
title={description}>
{isEmpty(description) ? '--' : description}
</Typography.Paragraph>
),
render: (description: string) =>
isEmpty(description) ? (
<Typography.Paragraph className="m-b-0">
{NO_DATA_PLACEHOLDER}
</Typography.Paragraph>
) : (
<RichTextEditorPreviewer
markdown={description}
maxLength={DESCRIPTION_LENGTH}
showReadMoreBtn={false}
/>
),
},
];
}, [data, isFetchingAllTeamAdvancedDetails, onTeamExpand]);

2
openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
View File

@ -124,7 +124,7 @@ export const ONLY_NUMBER_REGEX = /^[0-9\b]+$/;
export const ES_UPDATE_DELAY = 500;
export const DESCRIPTIONLENGTH = 100;
export const DESCRIPTION_LENGTH = 100;
export const CHART_WIDGET_DAYS_DURATION = 14;

12
openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/index.test.tsx → openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/SignInPage.test.tsx
View File

@ -20,7 +20,7 @@ import {
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { useAuthContext } from '../../components/Auth/AuthProviders/AuthProvider';
import SigninPage from './index';
import SignInPage from './SignInPage';
const mockUseAuthContext = useAuthContext as jest.Mock;
@ -48,7 +48,7 @@ jest.mock('./LoginCarousel', () =>
jest.fn().mockReturnValue(<p>LoginCarousel</p>)
);
describe('Test SigninPage Component', () => {
describe('Test SignInPage Component', () => {
afterEach(() => {
jest.clearAllMocks();
});
@ -64,7 +64,7 @@ describe('Test SigninPage Component', () => {
onLoginHandler: jest.fn(),
onLogoutHandler: jest.fn(),
});
const { container } = render(<SigninPage />, {
const { container } = render(<SignInPage />, {
wrapper: MemoryRouter,
});
const signInPage = await findByTestId(container, 'signin-page');
@ -91,7 +91,7 @@ describe('Test SigninPage Component', () => {
onLoginHandler: jest.fn(),
onLogoutHandler: jest.fn(),
});
const { container } = render(<SigninPage />, {
const { container } = render(<SignInPage />, {
wrapper: MemoryRouter,
});
const isUnknow = provider === 'unknown-provider';
@ -113,7 +113,7 @@ describe('Test SigninPage Component', () => {
onLoginHandler: jest.fn(),
onLogoutHandler: jest.fn(),
});
const { container } = render(<SigninPage />, {
const { container } = render(<SignInPage />, {
wrapper: MemoryRouter,
});
const signinButton = await findByText(container, /label.sign-in-with-sso/i);
@ -128,7 +128,7 @@ describe('Test SigninPage Component', () => {
onLoginHandler: jest.fn(),
onLogoutHandler: jest.fn(),
});
render(<SigninPage />, {
render(<SignInPage />, {
wrapper: MemoryRouter,
});

6
openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/index.tsx → openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/SignInPage.tsx
View File

@ -36,7 +36,7 @@ import localState from '../../utils/LocalStorageUtils';
import './login.style.less';
import LoginCarousel from './LoginCarousel';
const SigninPage = () => {
const SignInPage = () => {
const [loading, setLoading] = useState(false);
const [form] = Form.useForm();
@ -170,7 +170,7 @@ const SigninPage = () => {
}, [isAuthenticated]);
if (isAuthenticated) {
return <Loader />;
return <Loader fullScreen />;
}
const handleSubmit = async ({
@ -320,4 +320,4 @@ const SigninPage = () => {
);
};
export default SigninPage;
export default SignInPage;

4
openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx
View File

@ -208,7 +208,9 @@ const MyDataPage = () => {
mainContainerClassName="p-t-0"
pageTitle={t('label.my-data')}>
{isLoading ? (
<Loader />
<div className="ant-layout-content flex-center">
<Loader />
</div>
) : (
<ReactGridLayout
className="bg-white"