Skip to content

UN-2226 [UX/UI] Improve settings navigation and modal component styling #1569

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

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

UN-2226 [UX/UI] Improve settings navigation and modal component styling #1569

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5cba247
Add settings sidebar navigation and improve modal icon sizing
athul-rs Oct 8, 2025
1f54f78
Merge branch 'main' into UN-2226-UI-UX-updates
athul-rs Oct 8, 2025
dc54058
Resolve Sonar accessibility issues in SettingsLayout
athul-rs Oct 8, 2025
c2b5243
Resolve CodeRabbit review issues
athul-rs Oct 8, 2025
a0ff6be
Fix settings popup visibility and Platform button behavior
athul-rs Oct 9, 2025
80be0d2
Merge branch 'main' into UN-2226-UI-UX-updates
athul-rs Oct 9, 2025
3e17e9b
Merge branch 'main' into UN-2226-UI-UX-updates
athul-rs Oct 10, 2025
26c42b7
Merge branch 'main' into UN-2226-UI-UX-updates
athul-rs Oct 14, 2025
6b5c1bd
Fix CodeRabbit review issues
athul-rs Oct 14, 2025
ae1c00b
Merge branch 'main' into UN-2226-UI-UX-updates
athul-rs Oct 14, 2025
74fcd5e
Remove trailing slash for path consistency
athul-rs Oct 14, 2025
bdda209
Fix SonarCloud issues
athul-rs Oct 14, 2025
cfec84e
Replace navigate(-1) with safe navigation to tools page
athul-rs Oct 14, 2025
75609f1
Fix Prettier formatting issues in SettingsLayout
athul-rs Oct 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/src/components/agency/display-logs/DisplayLogs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
}

.display-logs-col-first {
font-size: 12px;
font-size: 14px;
}

.display-logs-col {
font-size: 12px;
font-size: 14px;
padding-left: 5px;
}
2 changes: 1 addition & 1 deletion frontend/src/components/custom-tools/editable-text/EditableText.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,5 @@

.input-header-text {
font-weight: bold;
font-size: 20px;
font-size: 14px;
}
12 changes: 7 additions & 5 deletions frontend/src/components/deployments/body/Body.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@ function Body({ type, columns, tableData, isTableLoading, openAddModal }) {
}
if (!tableData?.length) {
return (
<EmptyState
text={`Currently you have no ${deploymentsStaticContent[type].addBtn}`}
btnText={deploymentsStaticContent[type].addBtn}
handleClick={() => openAddModal(false)}
/>
<IslandLayout>
<EmptyState
text={`Currently you have no ${deploymentsStaticContent[type].addBtn}`}
btnText={deploymentsStaticContent[type].addBtn}
handleClick={() => openAddModal(false)}
/>
</IslandLayout>
);
}
return (
Expand Down
16 changes: 7 additions & 9 deletions frontend/src/components/input-output/data-source-card/DataSourceCard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,17 @@
}

.ds-card .cover-img {
height: 180px;
width: 90%;
height: 50%;
width: 50%;
text-align: center;
padding: 10px;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
z-index: 0;
}

.ds-card-name {
Expand All @@ -40,14 +43,9 @@

.cover-container {
position: relative;
}

.cover-img {
position: relative;
z-index: 0;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}

.ds-card.disabled {
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/input-output/data-source-card/DataSourceCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,10 @@ function DataSourceCard({ srcDetails, setSelectedSourceId, type }) {
<div className="cover-img">
<Image
src={srcDetails?.icon}
width="80%"
height="auto"
width="50%"
height="50%"
preview={false}
style={{ objectFit: "contain" }}
/>
</div>
<div className="ds-card-name display-flex-center">
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/logs-and-notifications/DisplayLogsAndNotifications.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

.logs-handle {
height: 40px;
background-color: #eee;
background-color: #fff;
border-bottom: 1px solid #ccc;
cursor: ns-resize;
user-select: none;
Expand All @@ -36,7 +36,7 @@

.tool-logs-table .ant-table {
font-family: Consolas, "Courier New", monospace;
font-size: 12px !important;
font-size: 14px !important;
background-color: #fff;
}

Expand All @@ -50,6 +50,6 @@
}

.display-logs-md {
font-size: 12px;
font-size: 14px;
padding-left: 5px;
}
3 changes: 2 additions & 1 deletion frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,11 +207,12 @@ const SideNavBar = ({ collapsed }) => {
title: "Platform",
description: "Settings for the platform",
image: PlatformSettingsIcon,
path: `/${orgName}/settings`,
path: `/${orgName}/settings/platform`,
active:
window.location.pathname === `/${orgName}/settings` ||
window.location.pathname === `/${orgName}/settings/platform` ||
window.location.pathname === `/${orgName}/settings/triad` ||
window.location.pathname === `/${orgName}/settings/review` ||
window.location.pathname === `/${orgName}/users`,
},
],
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/navigations/tool-nav-bar/ToolNavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function ToolNavBar({
<Typography
style={{
fontWeight: 600,
fontSize: "18px",
fontSize: "16px",
display: "inline",
lineHeight: "24px",
}}
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/components/onboard/onBoard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
.onboard-content {
display: flex;
justify-content: center;
margin-top: 50px;
align-items: flex-start;
height: 100vh;
overflow-y: auto;
padding: 50px 20px 20px 20px;
}

@media screen and (max-height: 900px) {
.onboard-content {
margin-top: 30px;
padding: 30px 20px 20px 20px;
}
}

Expand Down
1 change: 0 additions & 1 deletion frontend/src/components/pipelines-or-deployments/pipelines/Pipelines.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.p-or-d-layout {
background-color: var(--page-bg-2);
height: 100%;
display: flex;
flex-direction: column;
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/settings/default-triad/DefaultTriad.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import SpaceWrapper from "../../widgets/space-wrapper/SpaceWrapper.jsx";
import { SpinnerLoader } from "../../widgets/spinner-loader/SpinnerLoader.jsx";
import "./DefaultTriad.css";
import usePostHogEvents from "../../../hooks/usePostHogEvents.js";
import { SettingsLayout } from "../settings-layout/SettingsLayout.jsx";

const { Option } = Select;

Expand Down Expand Up @@ -173,7 +174,7 @@ function DefaultTriad() {
};

return (
<>
<SettingsLayout activeKey="triad">
<div className="plt-set-head">
<Button size="small" type="text" onClick={() => navigate(-1)}>
<ArrowLeftOutlined />
Expand Down Expand Up @@ -221,7 +222,7 @@ function DefaultTriad() {
)}
</IslandLayout>
</div>
</>
</SettingsLayout>
);
}

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/settings/platform/PlatformSettings.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* Styles for PlatformSettings */

.plt-set-layout {
height: 100%;
background-color: var(--page-bg-2);
height: calc(100vh - 60px);
background-color: #ffffff;
}

.plt-set-layout-2 {
Expand Down
175 changes: 90 additions & 85 deletions frontend/src/components/settings/platform/PlatformSettings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { ConfirmModal } from "../../widgets/confirm-modal/ConfirmModal.jsx";
import "./PlatformSettings.css";
import { useExceptionHandler } from "../../../hooks/useExceptionHandler.jsx";
import usePostHogEvents from "../../../hooks/usePostHogEvents.js";
import { SettingsLayout } from "../settings-layout/SettingsLayout.jsx";

const defaultKeys = [
{
Expand Down Expand Up @@ -233,100 +234,104 @@ function PlatformSettings() {
};

return (
<>
<div className="plt-set-head">
<Button size="small" type="text">
<ArrowLeftOutlined onClick={() => navigate(-1)} />
</Button>
<Typography.Text className="plt-set-head-typo">
Platform Settings
</Typography.Text>
</div>
<div className="plt-set-layout">
<IslandLayout>
<div className="plt-set-layout-2">
<div>
{keys.map((keyDetails, keyIndex) => {
return (
<div key={keyDetails?.keyName}>
<div>
<div className="plt-set-key-head">
<Row>
<Col>
<div className="plt-set-key-head-col-1">
<Typography.Text>
{keyDetails?.keyName}
</Typography.Text>
</div>
</Col>
<Col>
<div className="plt-set-key-head-col-2">
<Radio
checked={
keyDetails?.id && activeKey === keyIndex
}
disabled={keyDetails?.id === null}
onClick={() => handleToggle(keyIndex)}
>
Active Key
</Radio>
</div>
</Col>
</Row>
</div>
<SettingsLayout activeKey="platform">
<div>
<div className="plt-set-head">
<Button size="small" type="text">
<ArrowLeftOutlined onClick={() => navigate(-1)} />
</Button>
Copy link
Contributor

Choose a reason for hiding this comment

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

let's not specify previous page(-1) because if we navigate to this page directly with URL then back button will cause UI to break.

<Typography.Text className="plt-set-head-typo">
Platform Settings
</Typography.Text>
</div>
<div className="plt-set-layout">
<IslandLayout>
<div className="plt-set-layout-2">
<div>
{keys.map((keyDetails, keyIndex) => {
return (
<div key={keyDetails?.keyName}>
<div>
<Row gutter={10}>
<Col>
<div className="plt-set-key-display">
<Input
size="small"
value={keys[keyIndex].key}
suffix={
<CopyOutlined
onClick={() => copyText(keys[keyIndex].key)}
/>
}
/>
</div>
</Col>
<Col>
<Button
size="small"
loading={isLoadingIndex === keyIndex}
onClick={() => handleGenerate(keyIndex)}
>
{keyDetails?.id?.length > 0
? "Refresh"
: "Generate"}
</Button>
</Col>
<Col>
<ConfirmModal
handleConfirm={() => handleDelete(keyIndex)}
content="Want to delete this platform key? This action cannot be undone."
okText="Delete"
>
<div className="plt-set-key-head">
<Row>
<Col>
<div className="plt-set-key-head-col-1">
<Typography.Text>
{keyDetails?.keyName}
</Typography.Text>
</div>
</Col>
<Col>
<div className="plt-set-key-head-col-2">
<Radio
checked={
keyDetails?.id && activeKey === keyIndex
}
disabled={keyDetails?.id === null}
onClick={() => handleToggle(keyIndex)}
>
Active Key
</Radio>
</div>
</Col>
</Row>
</div>
<div>
<Row gutter={10}>
<Col>
<div className="plt-set-key-display">
<Input
size="small"
value={keys[keyIndex].key}
suffix={
<CopyOutlined
onClick={() =>
copyText(keys[keyIndex].key)
}
/>
}
/>
</div>
</Col>
<Col>
<Button
size="small"
disabled={keyDetails?.id === null}
loading={isDeletingIndex === keyIndex}
loading={isLoadingIndex === keyIndex}
onClick={() => handleGenerate(keyIndex)}
>
<DeleteOutlined />
{keyDetails?.id?.length > 0
? "Refresh"
: "Generate"}
</Button>
</ConfirmModal>
</Col>
</Row>
</Col>
<Col>
<ConfirmModal
handleConfirm={() => handleDelete(keyIndex)}
content="Want to delete this platform key? This action cannot be undone."
okText="Delete"
>
<Button
size="small"
disabled={keyDetails?.id === null}
loading={isDeletingIndex === keyIndex}
>
<DeleteOutlined />
</Button>
</ConfirmModal>
</Col>
</Row>
</div>
</div>
{keyIndex < keys?.length - 1 && <Divider />}
</div>
{keyIndex < keys?.length - 1 && <Divider />}
</div>
);
})}
);
})}
</div>
</div>
</div>
</IslandLayout>
</IslandLayout>
</div>
</div>
</>
</SettingsLayout>
);
}

Expand Down
Loading