fix unwanted scrollbar in explore page (#14097)

This commit is contained in:
Ashish Gupta 2023-11-24 19:10:16 +05:30 committed by GitHub
parent b25b5376cc
commit 59b048a9ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 17 additions and 10 deletions

View File

@ -29,6 +29,7 @@ import { usePaging } from '../../../../hooks/paging/usePaging';
import { getDatabaseSchemas } from '../../../../rest/databaseAPI'; import { getDatabaseSchemas } from '../../../../rest/databaseAPI';
import { searchQuery } from '../../../../rest/searchAPI'; import { searchQuery } from '../../../../rest/searchAPI';
import { schemaTableColumns } from '../../../../utils/DatabaseDetails.utils'; import { schemaTableColumns } from '../../../../utils/DatabaseDetails.utils';
import { getDecodedFqn } from '../../../../utils/StringsUtils';
import { showErrorToast } from '../../../../utils/ToastUtils'; import { showErrorToast } from '../../../../utils/ToastUtils';
import ErrorPlaceHolder from '../../../common/ErrorWithPlaceholder/ErrorPlaceHolder'; import ErrorPlaceHolder from '../../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
import NextPrevious from '../../../common/NextPrevious/NextPrevious'; import NextPrevious from '../../../common/NextPrevious/NextPrevious';
@ -43,6 +44,8 @@ export const DatabaseSchemaTable = () => {
const [schemas, setSchemas] = useState<DatabaseSchema[]>([]); const [schemas, setSchemas] = useState<DatabaseSchema[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [showDeletedSchemas, setShowDeletedSchemas] = useState<boolean>(false); const [showDeletedSchemas, setShowDeletedSchemas] = useState<boolean>(false);
const decodedDatabaseFQN = useMemo(() => getDecodedFqn(fqn), [fqn]);
const searchValue = useMemo(() => { const searchValue = useMemo(() => {
const param = location.search; const param = location.search;
const searchData = QueryString.parse( const searchData = QueryString.parse(
@ -63,14 +66,14 @@ export const DatabaseSchemaTable = () => {
const fetchDatabaseSchema = useCallback( const fetchDatabaseSchema = useCallback(
async (params?: Partial<Paging>) => { async (params?: Partial<Paging>) => {
if (isEmpty(fqn)) { if (isEmpty(decodedDatabaseFQN)) {
return; return;
} }
try { try {
setIsLoading(true); setIsLoading(true);
const { data, paging } = await getDatabaseSchemas({ const { data, paging } = await getDatabaseSchemas({
databaseName: fqn, databaseName: decodedDatabaseFQN,
limit: pageSize, limit: pageSize,
after: params?.after, after: params?.after,
before: params?.before, before: params?.before,
@ -81,12 +84,12 @@ export const DatabaseSchemaTable = () => {
setSchemas(data); setSchemas(data);
handlePagingChange(paging); handlePagingChange(paging);
} catch (error) { } catch (error) {
showErrorToast(error); showErrorToast(error as AxiosError);
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
}, },
[pageSize, fqn, showDeletedSchemas] [pageSize, decodedDatabaseFQN, showDeletedSchemas]
); );
const searchSchema = async ( const searchSchema = async (

View File

@ -34,7 +34,7 @@ function SummaryListItem({
<div className="summary-list-item-container"> <div className="summary-list-item-container">
<Row gutter={[0, 8]}> <Row gutter={[0, 8]}>
<Col <Col
className="d-flex items-center" className="d-flex items-baseline"
data-testid="title-container" data-testid="title-container"
span={24}> span={24}>
{isColumnsData && {isColumnsData &&

View File

@ -19,9 +19,6 @@
height: calc(100vh - @summary-panel-offset); height: calc(100vh - @summary-panel-offset);
z-index: 9; z-index: 9;
box-shadow: none; box-shadow: none;
border: @global-border;
border-top: none;
border-left: none;
font-size: 14px; font-size: 14px;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
@ -48,6 +45,7 @@
.entity-title { .entity-title {
font-weight: 500; font-weight: 500;
word-break: break-word;
} }
.summary-panel-title { .summary-panel-title {

View File

@ -21,6 +21,7 @@
padding-right: 0 !important; padding-right: 0 !important;
background-color: @white; background-color: @white;
border: 1px solid @border-color; border: 1px solid @border-color;
border-right: none;
border-radius: 0; border-radius: 0;
padding-left: 0 !important; padding-left: 0 !important;
border-top: 0; border-top: 0;
@ -53,6 +54,7 @@
} }
} }
.summary-panel-container { .summary-panel-container {
overflow: hidden;
height: @explore-page-height; height: @explore-page-height;
.ant-drawer-header { .ant-drawer-header {
border-bottom: none; border-bottom: none;

View File

@ -180,7 +180,7 @@ const DatabaseDetails: FunctionComponent = () => {
try { try {
setIsLoading(true); setIsLoading(true);
const { paging } = await getDatabaseSchemas({ const { paging } = await getDatabaseSchemas({
databaseName: databaseFQN, databaseName: decodedDatabaseFQN,
limit: 0, limit: 0,
}); });
@ -282,6 +282,7 @@ const DatabaseDetails: FunctionComponent = () => {
return res; return res;
}); });
getEntityFeedCount();
} catch (error) { } catch (error) {
showErrorToast( showErrorToast(
error as AxiosError, error as AxiosError,

View File

@ -35,6 +35,9 @@
.items-end { .items-end {
align-items: flex-end; align-items: flex-end;
} }
.items-baseline {
align-items: baseline;
}
// Display // Display
.d-flex { .d-flex {

View File

@ -98,7 +98,7 @@
@glossary-page-height: calc(100vh - 206px); @glossary-page-height: calc(100vh - 206px);
@domain-page-height: calc(100vh - 200px); @domain-page-height: calc(100vh - 200px);
@glossary-term-page-height: calc(100vh - 200px); @glossary-term-page-height: calc(100vh - 200px);
@explore-page-height: calc(100vh - 112px); @explore-page-height: calc(100vh - 113px);
@welcome-page-height: calc(100vh - 112px); @welcome-page-height: calc(100vh - 112px);
@data-product-page-height: calc(100vh - 156px); @data-product-page-height: calc(100vh - 156px);
@glossary-page-tab-height: calc(100vh - 206px); @glossary-page-tab-height: calc(100vh - 206px);