Skip to content

Commit 58afeea

Browse files
eshankvaisheshankvaish
authored
Merge pull request #2565 from devtron-labs/fix/modern-layout
fix: ui issues with modern layout and remove feature flag
2 parents 35937ed + 66fd647 commit 58afeea

File tree

14 files changed

+32
-84
lines changed

14 files changed

+32
-84
lines changed

‎.env

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,5 +66,4 @@ FEATURE_DEFAULT_LANDING_RB_ENABLE=false
6666
FEATURE_ACTION_AUDIOS_ENABLE=true
6767
FEATURE_CODE_MIRROR_ENABLE=false
6868
FEATURE_EXPERIMENTAL_THEMING_ENABLE=true
69-
FEATURE_EXPERIMENTAL_MODERN_LAYOUT_ENABLE=false
7069
FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.9.4",
7+
"@devtron-labs/devtron-fe-common-lib": "1.9.5",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/App.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -159,10 +159,6 @@ export default function App() {
159159
}
160160

161161
useEffect(() => {
162-
if (window._env_.FEATURE_EXPERIMENTAL_MODERN_LAYOUT_ENABLE) {
163-
document.body.classList.add('modern-layout')
164-
}
165-
166162
if (typeof Storage !== 'undefined') {
167163
// TODO (Arun): Remove in next packet
168164
localStorage.removeItem('undefined')
@@ -333,7 +329,7 @@ export default function App() {
333329
<Reload />
334330
</div>
335331
) : (
336-
<ErrorBoundary shouldAddFullScreenBg={window._env_.FEATURE_EXPERIMENTAL_MODERN_LAYOUT_ENABLE}>
332+
<ErrorBoundary>
337333
<BreadcrumbStore>
338334
<Switch>
339335
{isDirectApprovalNotification && GenericDirectApprovalModal && (

‎src/components/charts/list/list.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -459,6 +459,7 @@
459459
grid-template-rows: 40px 1fr;
460460
border: 1px solid var(--N200);
461461
border-radius: 4px;
462+
overflow: hidden;
462463
}
463464

464465
.readme-config--header {

‎src/components/common/ClusterMetaDataBar/ClusterMetaDataBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const ClusterMetaDataBar = ({
8787
{!isVirtualEnvironment && (
8888
<>
8989
<ArrowLeft
90-
className={`${darkTheme ? 'fcn-0 dc__opacity-0_5' : ''} rotate dc__gap-6 icon-dim-16 flex`}
90+
className="fcn-9 dc__opacity-0_5 rotate dc__gap-6 icon-dim-16 flex"
9191
style={{ ['--rotateBy' as string]: '180deg' }}
9292
/>
9393
{renderNavigationToAllResources()}

‎src/components/common/errorBoundary.tsx

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,7 @@ interface errorBoundaryState {
2525
isChunkLoadError: boolean
2626
}
2727

28-
interface ErrorBoundaryProps {
29-
/**
30-
* If true, it will add a full screen background to the error boundary
31-
*/
32-
shouldAddFullScreenBg?: boolean
33-
}
28+
interface ErrorBoundaryProps {}
3429

3530
export default class ErrorBoundary extends Component<ErrorBoundaryProps, errorBoundaryState> {
3631
constructor(props) {
@@ -63,17 +58,12 @@ export default class ErrorBoundary extends Component<ErrorBoundaryProps, errorBo
6358

6459
render() {
6560
if (this.state.hasError) {
66-
const bgClass = this.props.shouldAddFullScreenBg ? 'bg__tertiary' : ''
67-
6861
return this.state.isChunkLoadError ? (
69-
<div className={bgClass} style={{ height: '100vh' }}>
62+
<div className="bg__tertiary" style={{ height: '100vh' }}>
7063
<Reload />
7164
</div>
7265
) : (
73-
<div
74-
className={`flex column ${bgClass}`}
75-
style={{ width: '100%', height: this.props.shouldAddFullScreenBg ? '100vh' : '100%' }}
76-
>
66+
<div className="flex column bg__tertiary" style={{ width: '100%', height: '100vh' }}>
7767
<img src={bugFixing} alt="" style={{ height: '300px', width: 'auto', marginBottom: '20px' }} />
7868
<h2 style={{ marginBottom: '20px' }}>We encountered an error.</h2>
7969
<a

‎src/components/common/navigation/Navigation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,7 @@ export default class Navigation extends Component<
343343
render() {
344344
return (
345345
<>
346-
<nav className={window._env_.FEATURE_EXPERIMENTAL_MODERN_LAYOUT_ENABLE ? 'nav__modern-layout' : ''}>
346+
<nav>
347347
<aside className="short-nav nav-grid nav-grid--collapsed">
348348
<NavLink
349349
to={URLS.APP}

‎src/components/common/navigation/NavigationRoutes.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,7 @@ export default function NavigationRoutes() {
531531
)}
532532
{serverMode && (
533533
<div
534-
className={`main bg__primary ${window._env_.FEATURE_EXPERIMENTAL_MODERN_LAYOUT_ENABLE ? `main__modern-layout ${appTheme === AppThemeType.light ? 'dc__no-border' : 'border__primary-translucent'} m-8 br-6` : ''} ${
534+
className={`main bg__primary ${appTheme === AppThemeType.light ? 'dc__no-border' : 'border__primary-translucent'} m-8 br-6 ${
535535
pageOverflowEnabled ? '' : 'main__overflow-disabled'
536536
}`}
537537
>

‎src/components/common/navigation/navigation.scss

Lines changed: 12 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,8 @@
2626
}
2727

2828
.main {
29-
height: 100vh;
29+
height: calc(100vh - 16px);
3030
overflow-y: auto;
31-
32-
&__modern-layout {
33-
height: calc(100vh - 16px);
34-
}
3531
}
3632

3733
.main__overflow-disabled {
@@ -51,14 +47,17 @@
5147

5248
#root > div > main {
5349
& > nav {
50+
$transition-duration: 200ms;
51+
$transition-delay: 700ms;
52+
5453
width: 100%;
55-
background: var(--bg-sidebar);
54+
background: var(--transparent);
5655
position: sticky;
5756
top: 0;
5857
display: flex;
5958
overflow: hidden;
6059
z-index: var(--navigation-index);
61-
transition: width 200ms ease-out;
60+
transition: width $transition-duration ease-out, background 150ms ease-out 200ms;
6261

6362
.nav-grid {
6463
display: grid;
@@ -109,7 +108,7 @@
109108

110109
&:hover {
111110
.svg-container {
112-
background: var(--black-40);
111+
background: var(--bg-sidebar-item-selected);
113112
}
114113
}
115114

@@ -144,13 +143,16 @@
144143

145144
.active-nav {
146145
.svg-container {
147-
background: var(--black-40);
146+
background: var(--bg-sidebar-item-selected);
148147
}
149148
}
150149

151150
&:hover {
152151
width: 252px;
153-
transition: width 200ms ease-in 700ms;
152+
background: var(--bg-sidebar-modern-layout);
153+
border-right: 1px solid var(--border-primary-translucent);
154+
box-shadow: var(--shadow-modal);
155+
transition: width $transition-duration ease-in $transition-delay, background 150ms ease-in $transition-delay, border-right $transition-duration ease-in $transition-delay, box-shadow $transition-duration ease-in $transition-delay;
154156
}
155157

156158
.short-nav__bottom-options {
@@ -182,37 +184,6 @@
182184
height: 80px;
183185
width: 100%;
184186
}
185-
186-
& .nav__modern-layout {
187-
$transition-duration: 200ms;
188-
$transition-delay: 700ms;
189-
190-
background: var(--transparent);
191-
transition: width $transition-duration ease-out, background 150ms ease-out 200ms;
192-
193-
.short-nav {
194-
a {
195-
&:hover {
196-
.svg-container {
197-
background: var(--bg-sidebar-item-selected);
198-
}
199-
}
200-
}
201-
}
202-
203-
.active-nav {
204-
.svg-container {
205-
background: var(--bg-sidebar-item-selected);
206-
}
207-
}
208-
209-
&:hover {
210-
background: var(--bg-sidebar-modern-layout);
211-
border-right: 1px solid var(--border-primary-translucent);
212-
box-shadow: var(--shadow-modal);
213-
transition: width $transition-duration ease-in $transition-delay, background 150ms ease-in $transition-delay, border-right $transition-duration ease-in $transition-delay, box-shadow $transition-duration ease-in $transition-delay;
214-
}
215-
}
216187
}
217188

218189
.logout-card {

‎src/components/gitOps/GitOpsConfiguration.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1407,8 +1407,8 @@ class GitOpsConfiguration extends Component<GitOpsProps & { isFeatureUserDefined
14071407

14081408
return (
14091409
<div className="bg__primary flex-grow-1 w-100 h-100 flexbox-col dc__overflow-auto">
1410-
<section className="flex-1 bg__primary flex left column flexbox-col dc__overflow-auto dc__content-space">
1411-
<div className="flex left column px-20 py-16 dc__gap-24 w-100 dc__overflow-auto flex-grow-1">
1410+
<section className="flex-1 bg__primary flexbox-col dc__overflow-auto dc__content-space">
1411+
<div className="flexbox-col px-20 py-16 dc__gap-24 w-100 dc__overflow-auto flex-grow-1">
14121412
<FeatureTitleWithInfo
14131413
title={HEADER_TEXT.GITOPS.title}
14141414
renderDescriptionContent={() => HEADER_TEXT.GITOPS.description}

0 commit comments

Comments
 (0)