feat(ui): Display app locks more prominently

Ref: SRX-KNBOC7 This renders app locks on the main page with a orange-ish background color, as part of the service lane header (where the app name appears on the home page). Also added tooltips to the app name and team name.
freiheit-com · Aug 16, 2024 · 4208915 · 4208915
1 parent 23ef039
commit 4208915
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 35 deletions.
diff --git a/services/frontend-service/src/assets/_variables.scss b/services/frontend-service/src/assets/_variables.scss
@@ -146,6 +146,8 @@ $main-content-padding: ($top-app-bar-height + 0.5em) 1em 1em ($nav-bar-width + 1
 
 $warning-color: #e0d541;
 
+$warning-color-locked: #ff8c00;
+
 :root {
     // Colors
     --mdc-theme-primary: #2d70d6;

diff --git a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.scss b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.scss
@@ -13,18 +13,27 @@ You should have received a copy of the MIT License
 along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
 
 Copyright freiheit.com*/
+
+@import '../../../assets/variables';
+
 .service-lane__header {
     background: var(--mdc-theme-primary);
     color: var(--mdc-theme-on-primary);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: $service-lane-header-padding;
+    // the padding here has to be big enough, so that
+    // the border-radius of the whole lane does not break
+    padding: 0 4px 0 0;
     border-radius: $border-radius-medium;
     height: $service-lane-header-height;
 
     white-space: nowrap;
-    .service__name {
+    .service-lane-name {
+        margin-left: 5px;
+    }
+
+    .service-lane-wrapper {
         overflow: hidden;
         @extend .sub-headline1;
         display: flex;

diff --git a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.test.tsx b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.test.tsx
@@ -600,7 +600,7 @@ const dataAppLockSummary: TestDataAppLockSummary[] = (() => {
                     locks: {},
                 },
             ],
-            expected: '"test1" has 1 application lock. Click on a tile to see details.',
+            expected: '"test1" has 1 lock. Click on a tile to see details.',
         },
         {
             name: 'test two locks',
@@ -623,7 +623,7 @@ const dataAppLockSummary: TestDataAppLockSummary[] = (() => {
                     locks: {},
                 },
             ],
-            expected: '"test1" has 2 application locks. Click on a tile to see details.',
+            expected: '"test1" has 2 locks. Click on a tile to see details.',
         },
     ];
     return result;

diff --git a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.tsx b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.tsx
@@ -29,7 +29,7 @@ import { ReleaseCard } from '../ReleaseCard/ReleaseCard';
 import { DeleteWhite, HistoryWhite } from '../../../images';
 import { Application, Environment, UndeploySummary } from '../../../api/api';
 import * as React from 'react';
-import { AppLockSummary, TeamLockSummary } from '../chip/EnvironmentGroupChip';
+import { AppLockSummary } from '../chip/EnvironmentGroupChip';
 import { WarningBoxes } from './Warnings';
 import { DotsMenu, DotsMenuButton } from './DotsMenu';
 import { useCallback, useState } from 'react';
@@ -211,19 +211,16 @@ export const ServiceLane: React.FC<{ application: Application }> = (props) => {
         <div className="service-lane">
             {dialog}
             <div className="service-lane__header">
-                <div className="service__name">
-                    {application.team ? application.team : '<No Team> '}
-                    {teamLocks.length >= 1 && (
-                        <div className={'test-app-lock-summary'}>
-                            <TeamLockSummary team={application.team} numLocks={teamLocks.length} />
-                        </div>
-                    )}
-                    {' | ' + application.name}
+                <div className="service-lane-wrapper">
                     {appLocks.length >= 1 && (
                         <div className={'test-app-lock-summary'}>
-                            <AppLockSummary app={application.name} numLocks={appLocks.length} />
+                            <AppLockSummary app={application.name} numLocks={appLocks.length + teamLocks.length} />
                         </div>
                     )}
+                    <div className={'service-lane-name'}>
+                        <span title={'team name'}>{application.team ? application.team : '<No Team> '} </span>
+                        {' | '} <span title={'app name'}> {application.name}</span>
+                    </div>
                 </div>
                 <div className="service__actions__">{dotsMenu}</div>
             </div>

diff --git a/services/frontend-service/src/ui/components/chip/EnvironmentGroupChip.tsx b/services/frontend-service/src/ui/components/chip/EnvironmentGroupChip.tsx
@@ -33,28 +33,14 @@ export const AppLockSummary: React.FC<{
     const plural = numLocks === 1 ? 'lock' : 'locks';
     return (
         <div
+            className={'app-lock-summary'}
             key={'app-lock-hint-' + app}
-            title={'"' + app + '" has ' + numLocks + ' application ' + plural + '. Click on a tile to see details.'}>
-            <div>
-                &nbsp;
-                <LocksWhite className="env-card-env-lock-icon" width="16px" height="16px" />
-            </div>
-        </div>
-    );
-};
-
-export const TeamLockSummary: React.FC<{
-    team: string;
-    numLocks: number;
-}> = ({ team, numLocks }) => {
-    const plural = numLocks === 1 ? 'lock' : 'locks';
-    return (
-        <div
-            key={'app-lock-hint-' + team}
-            title={'"' + team + '" has ' + numLocks + ' team ' + plural + '. Click on an icon to see details.'}>
-            <div>
-                &nbsp;
-                <LocksWhite className="env-card-env-lock-icon" width="16px" height="16px" />
+            title={'"' + app + '" has ' + numLocks + ' ' + plural + '. Click on a tile to see details.'}>
+            <div className={'app-lock-summary-wrapper'}>
+                <div className={'app-lock-summary-lock'}>
+                    <LocksWhite className="env-card-env-lock-icon" width="20px" height="20px" />
+                </div>
+                <div className={'app-lock-summary-text'}>Locked</div>
             </div>
         </div>
     );

diff --git a/services/frontend-service/src/ui/components/chip/chip.scss b/services/frontend-service/src/ui/components/chip/chip.scss
@@ -14,6 +14,7 @@ along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>
 
 Copyright freiheit.com*/
 @use '@material/chips/styles';
+@import '../../../assets/variables';
 
 .mdc-evolution-chip {
     height: $env-chip-height;
@@ -71,3 +72,26 @@ Copyright freiheit.com*/
 .environment-priority-unrecognized {
     background-color: $env-color-unrecognized;
 }
+
+
+.app-lock-summary {
+    min-width: 4.5em;
+    background-color: $warning-color-locked;
+    border-radius: 6px;
+
+    .app-lock-summary-wrapper {
+        display: flex;
+        margin-left: 6px;
+        margin-right: 6px;
+    }
+
+    .app-lock-summary-text {
+        font-size: small;
+        line-height: 40px;
+    }
+    .app-lock-summary-lock{
+        margin-top: 8px;
+    }
+
+}
+