From 16e87ac7aefd1ff1ecc5f6f4bf5ba7e986808fdb Mon Sep 17 00:00:00 2001
From: Bjoern Michaelsen <bjoern.michaelsen@freiheit.com>
Date: Wed, 10 Jan 2024 17:19:16 +0100
Subject: [PATCH] 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: https://github.com/freiheit-com/kuberpult/issues/1187
---
 services/frontend-service/src/ui/App/index.tsx       |  2 +-
 .../src/ui/Pages/Locks/LocksPage.tsx                 |  2 +-
 .../src/ui/components/TopAppBar/TopAppBar.scss       |  8 ++++++++
 .../src/ui/components/TopAppBar/TopAppBar.tsx        | 12 ++++++------
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/services/frontend-service/src/ui/App/index.tsx b/services/frontend-service/src/ui/App/index.tsx
index 18a2eabb0..6c9defd70 100644
--- 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
index 2b8b4ff8f..8ba153f5a 100644
--- 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
index 7be475097..f74ed0588 100644
--- a/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.scss
+++ b/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.scss
@@ -33,6 +33,13 @@ 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 {
@@ -40,6 +47,7 @@ Copyright 2023 freiheit.com*/
     }
     .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
index 7f657a63c..11f6276f7 100644
--- 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