fix: show app filter on the locks page (SRX-1X2H6E) (#1268)

- make application filter visible on locks page - adjust CSS to prevent filter controls to resize switching between home/app/locks page - adjust order of top bar elements - fix "vv" version prefix in top bar Reference: #1187
freiheit-com · Jan 10, 2024 · 16e87ac · 16e87ac
1 parent 0182f9d
commit 16e87ac
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/services/frontend-service/src/ui/App/index.tsx b/services/frontend-service/src/ui/App/index.tsx
@@ -59,7 +59,7 @@ export const App: React.FC = () => {
     const kuberpultVersion = useKuberpultVersion();
     React.useEffect(() => {
         if (kuberpultVersion !== '') {
-            document.title = 'Kuberpult v' + kuberpultVersion;
+            document.title = 'Kuberpult ' + kuberpultVersion;
         }
     }, [kuberpultVersion, api]);
 

diff --git a/services/frontend-service/src/ui/Pages/Locks/LocksPage.tsx b/services/frontend-service/src/ui/Pages/Locks/LocksPage.tsx
@@ -86,7 +86,7 @@ export const LocksPage: React.FC = () => {
     }
     return (
         <div>
-            <TopAppBar showAppFilter={false} showTeamFilter={false} />
+            <TopAppBar showAppFilter={true} showTeamFilter={false} />
             <main className="main-content">
                 <LocksTable headerTitle="Environment Locks" columnHeaders={environmentFieldHeaders} locks={envLocks} />
                 <LocksTable headerTitle="Application Locks" columnHeaders={applicationFieldHeaders} locks={appLocks} />

diff --git a/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.scss b/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.scss
@@ -33,13 +33,21 @@ Copyright 2023 freiheit.com*/
             width: 100%;
             height: 100%;
         }
+        .top-app-bar--wide-filter {
+            flex-basis: 400px;
+        }
+        .top-app-bar--narrow-filter {
+            flex-basis: 200px;
+            flex-grow: 0.01;
+        }
     }
 
     .mdc-top-app-bar__section {
         gap: $top-app-bar-section-gap;
     }
     .mdc-top-app-bar__title {
         @extend .headline1;
+        flex-grow: 0;
     }
 
     .mdc-text-field {

diff --git a/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.tsx b/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.tsx
@@ -59,7 +59,7 @@ export const TopAppBar: React.FC<TopAppBarProps> = (props) => {
 
     const renderedAppFilter =
         props.showAppFilter === true ? (
-            <div className="mdc-top-app-bar__section">
+            <div className="mdc-top-app-bar__section top-app-bar--wide-filter">
                 <Textfield
                     className={'top-app-bar-search-field'}
                     floatingLabel={'Application Name'}
@@ -68,25 +68,25 @@ export const TopAppBar: React.FC<TopAppBarProps> = (props) => {
                 />
             </div>
         ) : (
-            ''
+            <div className="mdc-top-app-bar__section top-app-bar--wide-filter"></div>
         );
     const renderedTeamsFilter =
         props.showTeamFilter === true ? (
-            <div className="mdc-top-app-bar__section">
+            <div className="mdc-top-app-bar__section top-app-bar--narrow-filter">
                 <Dropdown className={'top-app-bar-search-field'} floatingLabel={'Teams'} leadingIcon={'search'} />
             </div>
         ) : (
-            ''
+            <div className="mdc-top-app-bar__section top-app-bar--narrow-filter"></div>
         );
     return (
         <div className="mdc-top-app-bar" ref={control}>
             <div className="mdc-top-app-bar__row">
                 <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-                    <span className="mdc-top-app-bar__title">Kuberpult v{version}</span>
+                    <span className="mdc-top-app-bar__title">Kuberpult {version}</span>
                 </div>
-                <div className="mdc-top-app-bar__section">{renderedWarnings}</div>
                 {renderedAppFilter}
                 {renderedTeamsFilter}
+                <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">{renderedWarnings}</div>
                 <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
                     <strong className="sub-headline1">Planned Actions</strong>
                     <Button