This is an automated email from the ASF dual-hosted git repository.
ppawar pushed a commit to branch atlas-2.5
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/atlas-2.5 by this push:
new c0c78901f ATLAS-5087 : React UI : Cosmetic changes and Improvements.
(#421)
c0c78901f is described below
commit c0c78901f146ce085129663f1236d5db24f369c3
Author: farhank31 <[email protected]>
AuthorDate: Mon Sep 8 17:11:48 2025 +0530
ATLAS-5087 : React UI : Cosmetic changes and Improvements. (#421)
* ATLAS-5087 : React UI : Cosmetic changes and Improvements.
* Update table.scss
---------
Co-authored-by: Farhan Khan <[email protected]>
---
dashboard/src/App.tsx | 3 +-
dashboard/src/components/Table/TableLayout.tsx | 2 +-
dashboard/src/components/muiComponents.tsx | 1 -
dashboard/src/styles/entityForm.scss | 2 +-
dashboard/src/styles/formFields.scss | 1 +
dashboard/src/styles/table.scss | 3 -
.../EntityDetailTabs/PropertiesTab/Labels.tsx | 2 +-
dashboard/src/views/Entity/EntityForm.tsx | 11 +--
dashboard/src/views/Layout/About.tsx | 3 +-
dashboard/src/views/SideBar/SideBarBody.tsx | 105 +++++++++++++--------
.../src/views/SideBar/SideBarTree/SideBarTree.tsx | 10 +-
dashboard/src/views/Statistics/Statistics.tsx | 19 ++--
12 files changed, 85 insertions(+), 77 deletions(-)
diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
index 86359077f..35dd26d1c 100644
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -43,8 +43,7 @@ const App = () => {
}}
>
<CircularProgress
- disableShrink
- color="success"
+ color="primary"
sx={{
display: "inline-block",
position: "absolute",
diff --git a/dashboard/src/components/Table/TableLayout.tsx
b/dashboard/src/components/Table/TableLayout.tsx
index d4c03d115..41131fdd5 100644
--- a/dashboard/src/components/Table/TableLayout.tsx
+++ b/dashboard/src/components/Table/TableLayout.tsx
@@ -675,7 +675,7 @@ const TableLayout: FC<TableProps> = ({
</Stack>
)} */}
- {showPagination && (
+ {showPagination && !isFetching && (
<TablePagination
firstPage={firstPage}
getCanPreviousPage={getCanPreviousPage}
diff --git a/dashboard/src/components/muiComponents.tsx
b/dashboard/src/components/muiComponents.tsx
index 9ec048ba1..fc4492ef1 100644
--- a/dashboard/src/components/muiComponents.tsx
+++ b/dashboard/src/components/muiComponents.tsx
@@ -55,7 +55,6 @@ import MuiAccordionDetails from
"@mui/material/AccordionDetails";
const LightTooltip = styled(({ className, ...props }: any) => (
<Tooltip
sx={{ transition: "none" }}
- arrow
{...props}
classes={{ popper: className }}
TransitionComponent={Zoom}
diff --git a/dashboard/src/styles/entityForm.scss
b/dashboard/src/styles/entityForm.scss
index db8b67d06..655cbd89a 100644
--- a/dashboard/src/styles/entityForm.scss
+++ b/dashboard/src/styles/entityForm.scss
@@ -22,7 +22,7 @@
.entity-form-fieldset {
border-style: dashed;
- border-radius: 4px;
+ border-radius: 8px;
margin-bottom: 1.5rem;
border-color: #dddddd;
}
diff --git a/dashboard/src/styles/formFields.scss
b/dashboard/src/styles/formFields.scss
index f05af1cbb..3931ed5b2 100644
--- a/dashboard/src/styles/formFields.scss
+++ b/dashboard/src/styles/formFields.scss
@@ -53,6 +53,7 @@
padding: 6px 12px;
min-height: 34px;
width: 100%;
+ font: inherit;
}
.form-textfield-label {
diff --git a/dashboard/src/styles/table.scss b/dashboard/src/styles/table.scss
index f9dce88a8..e9b35cfb7 100644
--- a/dashboard/src/styles/table.scss
+++ b/dashboard/src/styles/table.scss
@@ -230,13 +230,10 @@ td:has(.searchTableName) {
}
.entity-name {
- display: inline-block;
line-height: 24px;
- width: 72px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
- // text-align: center;
}
.delete-icon {
diff --git
a/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/Labels.tsx
b/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/Labels.tsx
index 73a71ac75..0370510f5 100644
--- a/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/Labels.tsx
+++ b/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/Labels.tsx
@@ -245,7 +245,7 @@ const Labels = ({ loading, labels }: any) => {
"& .MuiChip-label": {
display: "block",
overflow: "ellipsis",
- maxWidth: "76px"
+ maxWidth: "90px"
}
}}
className="chip-items properties-labels-chip"
diff --git a/dashboard/src/views/Entity/EntityForm.tsx
b/dashboard/src/views/Entity/EntityForm.tsx
index a25df4f71..20f9c1c46 100644
--- a/dashboard/src/views/Entity/EntityForm.tsx
+++ b/dashboard/src/views/Entity/EntityForm.tsx
@@ -28,6 +28,7 @@ import FormInputText from "@components/Forms/FormInputText";
import FormSelectBoolean from "@components/Forms/FormSelectBoolean";
import FormTextArea from "@components/Forms/FormTextArea";
import CustomModal from "@components/Modal";
+import SkeletonLoader from "@components/SkeletonLoader";
import { useAppDispatch, useAppSelector } from "@hooks/reducerHook";
import { Action, DynamicObject, State } from "@models/entityFormType";
import {
@@ -619,12 +620,8 @@ const EntityForm = ({
)}
</Stack>
{loader ? (
- <Stack
- direction="row"
- alignItems={"center"}
- justifyContent={"center"}
- >
- <CircularProgress />
+ <Stack>
+ <SkeletonLoader animation="pulse" variant="text" count={5}/>
</Stack>
) : (
!isEmpty(entityTypeObj) && (
@@ -638,7 +635,7 @@ const EntityForm = ({
<>
<fieldset className="entity-form-fieldset">
<legend>
- <Typography fontSize={"14px"}>
+ <Typography fontSize={"14px"} padding={ '5px 8px'}>
{key == "attributeDefs"
? "Attributes"
: "Relationships"}
diff --git a/dashboard/src/views/Layout/About.tsx
b/dashboard/src/views/Layout/About.tsx
index 811136169..eb96b0c4f 100644
--- a/dashboard/src/views/Layout/About.tsx
+++ b/dashboard/src/views/Layout/About.tsx
@@ -16,6 +16,7 @@
*/
import { getVersion } from "@api/apiMethods/headerApiMethods";
+import SkeletonLoader from "@components/SkeletonLoader";
import {
CircularProgress,
List,
@@ -54,7 +55,7 @@ const About = () => {
<>
<Stack spacing={2}>
{loader ? (
- <CircularProgress />
+ <SkeletonLoader animation="wave" variant="text" width={'100%'}
count={3} sx={{marginTop: '0px !important'}}/>
) : (
<Stack direction="column" spacing={1}>
<Typography variant="body1">
diff --git a/dashboard/src/views/SideBar/SideBarBody.tsx
b/dashboard/src/views/SideBar/SideBarBody.tsx
index 2ecc98d63..3eeb0d217 100644
--- a/dashboard/src/views/SideBar/SideBarBody.tsx
+++ b/dashboard/src/views/SideBar/SideBarBody.tsx
@@ -53,6 +53,7 @@ import ErrorPage from "@views/ErrorPage";
import AppRoutes from "@views/AppRoutes";
import ErrorBoundaryWithNavigate from "../../ErrorBoundary";
import useHistory from "@utils/history.js";
+import SkeletonLoader from "@components/SkeletonLoader";
const Header = lazy(() => import("@views/Layout/Header"));
@@ -288,12 +289,14 @@ const SideBarBody = (props: {
>
<Suspense
fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress
- size="small"
- className="tree-item-loader"
- />
- </Stack>
+ <SkeletonLoader
+ animation="pulse"
+ variant="text"
+ width={330}
+ count={5}
+ />
+ // <Stack className="tree-item-loader-box">
+ // </Stack>
}
>
<EntitiesTree
@@ -310,12 +313,14 @@ const SideBarBody = (props: {
>
<Suspense
fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress
- size="small"
- className="tree-item-loader"
- />
- </Stack>
+ <SkeletonLoader
+ animation="pulse"
+ variant="text"
+ width={330}
+ count={5}
+ />
+ // <Stack className="tree-item-loader-box">
+ // </Stack>
}
>
<ClassificationTree
@@ -332,12 +337,14 @@ const SideBarBody = (props: {
>
<Suspense
fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress
- size="small"
- className="tree-item-loader"
- />
- </Stack>
+ <SkeletonLoader
+ animation="pulse"
+ variant="text"
+ width={330}
+ count={5}
+ />
+ // <Stack className="tree-item-loader-box">
+ // </Stack>
}
>
<BusinessMetadataTree
@@ -353,12 +360,14 @@ const SideBarBody = (props: {
>
<Suspense
fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress
- size="small"
- className="tree-item-loader"
- />
- </Stack>
+ <SkeletonLoader
+ animation="pulse"
+ variant="text"
+ width={330}
+ count={5}
+ />
+ // <Stack className="tree-item-loader-box">
+ // </Stack>
}
>
<GlossaryTree sideBarOpen={open} searchTerm={searchTerm} />
@@ -371,12 +380,14 @@ const SideBarBody = (props: {
>
<Suspense
fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress
- size="small"
- className="tree-item-loader"
- />
- </Stack>
+ <SkeletonLoader
+ animation="pulse"
+ variant="text"
+ width={330}
+ count={5}
+ />
+ // <Stack className="tree-item-loader-box">
+ // </Stack>
}
>
<RelationshipsTree
@@ -393,12 +404,14 @@ const SideBarBody = (props: {
>
<Suspense
fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress
- size="small"
- className="tree-item-loader"
- />
- </Stack>
+ <SkeletonLoader
+ animation="pulse"
+ variant="text"
+ width={330}
+ count={5}
+ />
+ // <Stack className="tree-item-loader-box">
+ // </Stack>
}
>
<CustomFiltersTree sideBarOpen={open} searchTerm={searchTerm}
/>
@@ -484,17 +497,29 @@ const SideBarBody = (props: {
position: "relative",
}}
>
- <CircularProgress
- disableShrink
- color="success"
+ <SkeletonLoader
+ animation="pulse"
+ variant="text"
+ height={50}
+ width={'80%'}
+ count={1}
sx={{
- display: "inline-block",
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
}}
/>
+ {/* <CircularProgress
+ color="primary"
+ sx={{
+ display: "inline-block",
+ position: "absolute",
+ left: "50%",
+ top: "50%",
+ transform: "translate(-50%, -50%)",
+ }}
+ /> */}
</div>
}
>
diff --git a/dashboard/src/views/SideBar/SideBarTree/SideBarTree.tsx
b/dashboard/src/views/SideBar/SideBarTree/SideBarTree.tsx
index 1d3542cf3..04813f375 100644
--- a/dashboard/src/views/SideBar/SideBarTree/SideBarTree.tsx
+++ b/dashboard/src/views/SideBar/SideBarTree/SideBarTree.tsx
@@ -75,6 +75,8 @@ import AddUpdateGlossaryForm from
"@views/Glossary/AddUpdateGlossaryForm";
import RefreshIcon from "@mui/icons-material/Refresh";
import { AntSwitch } from "@utils/Muiutils";
import { IconButton } from "@components/muiComponents";
+import SkeletonLoader from "@components/SkeletonLoader";
+import { color } from "d3";
type CustomContentRootProps = HTMLAttributes<HTMLDivElement> & {
selectedNodeType?: any;
@@ -1143,13 +1145,7 @@ const BarTreeView: FC<{
}}
>
{loader ? (
- <Stack className="tree-item-loader-box">
- <CircularProgress
- disableShrink
- size="small"
- className="tree-item-loader"
- />
- </Stack>
+ <SkeletonLoader animation="pulse" variant="text" width={300}
count={5}/>
) : (
filteredData.map((node: TreeNode) => renderTreeItem(node))
)}
diff --git a/dashboard/src/views/Statistics/Statistics.tsx
b/dashboard/src/views/Statistics/Statistics.tsx
index 9bba6f1a5..f6c0eecb6 100644
--- a/dashboard/src/views/Statistics/Statistics.tsx
+++ b/dashboard/src/views/Statistics/Statistics.tsx
@@ -23,7 +23,6 @@ import ClassificationStats from "./ClassificationStats";
import {
Autocomplete,
Badge,
- CircularProgress,
IconButton,
Stack,
TextField
@@ -37,6 +36,7 @@ import { LightTooltip } from "@components/muiComponents";
import { useAppDispatch } from "@hooks/reducerHook";
import { fetchMetricEntity } from "@redux/slice/metricsSlice";
import { toast } from "react-toastify";
+import SkeletonLoader from "@components/SkeletonLoader";
export const getStatsValue = (options: { value: any; type: any }) => {
let value = options.value;
@@ -152,7 +152,7 @@ const Statistics = ({
>
<Stack
spacing={4}
- sx={{ width: "100%", minHeight: "100px", alignItems: "flex-end" }}
+ sx={{ width: "100%", minHeight: "100px", alignItems: "flex-end",
marginBottom: '10px'}}
>
<Stack spacing={2} sx={{ alignSelf: "flex-end" }}>
<Autocomplete
@@ -183,22 +183,15 @@ const Statistics = ({
defaultValue={"Current"}
sx={{
minWidth: "250px",
- backgroundColor: "#f6f7fb"
+ backgroundColor: "#f6f7fb",
+ marginBottom: "10px !important"
}}
/>
</Stack>
{loading ? (
- <CircularProgress
- disableShrink
- sx={{
- display: "inline-block",
- position: "absolute",
- left: "50%",
- marginLeft: "-20px !important"
- }}
- />
- ) : (
+ <SkeletonLoader animation="wave" variant="text" width={'100%'}
count={4} sx={{marginTop: '0px !important'}}/>
+ ) : (
<Stack spacing={2} width="100%">
<EntityStats
selectedValue={selectedValue}
