Skip to content

Commit

Permalink
feat: narrow, but always open "planned actions" (#1896)
Browse files Browse the repository at this point in the history 
- reduced width of "planned actions" aside
- always keep the aside open, and give it a primary color background to
provide
  some hint on space separation
- reduce whitespace use in planned actions
- hide disabled apply button when there is nothing to apply. Note that
the
"lock message" input is also hidden, if there is no lock: if one adds a
lock
action to an empty plan, previously the input appeared, while the apply
button was already there. The apply button stays disabled, but for
different
  reasons (before: nothing to apply, after: missing lock message)

Ref: SRX-MVHTKH
  • Loading branch information
@bjoern-michaelsen-freiheit
bjoern-michaelsen-freiheit authored Aug 23, 2024
1 parent b47c889 commit bc902e9
Show file tree
Hide file tree
Showing 12 changed files with 192 additions and 267 deletions.
4 changes: 2 additions & 2 deletions services/frontend-service/src/assets/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ $small-warn-button-font-size: 8px;
$small-warn-button-font-weight: 700;

// Sidebar variables
$sidebar-width: 30em;
$sidebar-width: 20em;
$sidebar-planned-actions-title-right-centering: 9em;
$sidebar-apply-button-height: 3em;
$sidebar-show-button-height: 3.5em;
Expand All @@ -41,7 +41,7 @@ $sidebar-transition-duration-large-screen: 0.4s;

// Top App Bar
$top-app-bar-padding: 0.5em 0 0.5em $nav-bar-width; // 0.5em on top and bottom each
$top-app-bar-height: 5em; // 5em = 80px
$top-app-bar-height: 10em;
$top-app-bar-section-gap: 61px;
// Logo
// 4em = 64px - Logo_width(40px) = 24px / 2 = 12px
Expand Down
59 changes: 31 additions & 28 deletions services/frontend-service/src/ui/components/LocksTable/LocksTable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,37 +15,40 @@ along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>
Copyright freiheit.com*/
@use '@material/data-table/data-table';

.mdc-data-table__table {
width: 100%;
table-layout: fixed;
}

.mdc-data-table {
.locks-table {
position: relative;
min-width: fit-content;
max-width: calc(100vw - $sidebar-width - 100px); // full size minus the planned actions bar minus some buffer
margin: $locks-list-margin;
}

.mdc-data-indicator {
background-color: var(--mdc-theme-primary);
color: var(--mdc-theme-on-primary);
height: $locks-list-header-height;
border-radius: $locks-list-header-border-radius;
@extend .text-regular;

.mdc-data-indicator-header {
display: flex;
padding-inline: $locks-list-header-padding;
}

.mdc-data-header-title {
@extend .headline1;
}

.mdc-data-indicator-field {
flex: 1;
@extend .sub-headline1;
.mdc-data-table__table {
width: 100%;
table-layout: inherit;
}

.mdc-data-indicator-sort-button {
padding-inline: 0;
.mdc-data-indicator {
background-color: var(--mdc-theme-primary);
color: var(--mdc-theme-on-primary);
height: $locks-list-header-height;
border-radius: $locks-list-header-border-radius;
@extend .text-regular;

.mdc-data-indicator-header {
display: flex;
padding-inline: $locks-list-header-padding;
}

.mdc-data-header-title {
@extend .headline1;
}

.mdc-data-indicator-field {
flex: 1;
@extend .sub-headline1;
}

.mdc-data-indicator-sort-button {
padding-inline: 0;
}
}
}
3 changes: 2 additions & 1 deletion services/frontend-service/src/ui/components/LocksTable/LocksTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import * as React from 'react';
import { Button } from '../button';
import { SortAscending, SortDescending } from '../../../images';
import { useCallback } from 'react';
import classNames from 'classnames';

export const LocksTable: React.FC<{
headerTitle: string;
Expand All @@ -38,7 +39,7 @@ export const LocksTable: React.FC<{
sortLocks(locks, sort);
}, [locks, sort]);
return (
<div className="mdc-data-table">
<div className={classNames('mdc-data-table', 'locks-table')}>
<div className="mdc-data-table__table-container">
<table className="mdc-data-table__table" aria-label="Dessert calories">
<thead>
Expand Down
14 changes: 3 additions & 11 deletions services/frontend-service/src/ui/components/ReleaseDialog/ReleaseDialog.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>
Copyright freiheit.com*/
import { EnvironmentListItem, ReleaseDialog, ReleaseDialogProps } from './ReleaseDialog';
import { fireEvent, render } from '@testing-library/react';
import { UpdateAction, UpdateOverview, UpdateRolloutStatus, UpdateSidebar } from '../../utils/store';
import { UpdateAction, UpdateOverview, UpdateRolloutStatus } from '../../utils/store';
import { Environment, EnvironmentGroup, Priority, Release, RolloutStatus, UndeploySummary } from '../../../api/api';
import { Spy } from 'spy4js';
import { SideBar } from '../SideBar/SideBar';
Expand Down Expand Up @@ -452,15 +452,10 @@ describe('Release Dialog', () => {
};

describe(`Test automatic cart opening`, () => {
it('Test using direct call to open function', () => {
UpdateSidebar.set({ shown: false });
UpdateSidebar.set({ shown: true });
expect(UpdateSidebar.get().shown).toBeTruthy();
});
it('Test using direct call to open function', () => {});

describe.each(dataLocks)('click handling', (testcase) => {
it('Test using deploy button click simulation ' + testcase.name, () => {
UpdateSidebar.set({ shown: false });
UpdateAction.set({ actions: [] });
setTheStore(testcase);

Expand All @@ -475,7 +470,6 @@ describe('Release Dialog', () => {
);
const result = querySelectorSafe('.env-card-deploy-btn');
fireEvent.click(result);
expect(UpdateSidebar.get().shown).toBeTruthy();
expect(UpdateAction.get().actions).toEqual([
{
action: {
Expand Down Expand Up @@ -505,7 +499,6 @@ describe('Release Dialog', () => {
});
it('Test using add lock button click simulation', () => {
const testcase = data[0];
UpdateSidebar.set({ shown: false });
UpdateAction.set({ actions: [] });
setTheStore(testcase);

Expand All @@ -519,10 +512,9 @@ describe('Release Dialog', () => {
release={testcase.rels[0]}
/>
);
render(<SideBar toggleSidebar={Spy()} />);
render(<SideBar />);
const result = querySelectorSafe('.env-card-add-lock-btn');
fireEvent.click(result);
expect(UpdateSidebar.get().shown).toBeTruthy();
expect(UpdateAction.get().actions).toEqual([
{
action: {
Expand Down
153 changes: 80 additions & 73 deletions services/frontend-service/src/ui/components/ServiceLane/ServiceLane.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,95 +16,102 @@ 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;
// 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-lane-name {
margin-left: 5px;
}
.service-lane {
position: relative;
min-width: fit-content;
max-width: calc(100vw - $sidebar-width - 100px); // full size minus the planned actions bar minus some buffer

.service-lane-wrapper {
overflow: hidden;
@extend .sub-headline1;
.service-lane__header {
background: var(--mdc-theme-primary);
color: var(--mdc-theme-on-primary);
display: flex;
align-items: center;
}

.service-action {
border: 1px solid var(--mdc-theme-on-primary);
justify-content: space-between;
// 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;
margin-left: $service-lane-header-actions-margin-left;
height: $service-lane-header-actions-height;
color: var(--mdc-theme-on-primary);
.mdc-button__label {
padding-left: $service-lane-header-actions-button-padding-left;
@extend .text-bold;
}
}
}
height: $service-lane-header-height;

.service__releases {
display: flex;
margin: $service-lane-releases-margin;
}
white-space: nowrap;
.service-lane-name {
margin-left: 5px;
}

.service-lane__diff {
display: flex;
}
.service-lane-wrapper {
overflow: hidden;
@extend .sub-headline1;
display: flex;
align-items: center;
}

.service-lane__diff--container {
display: flex;
flex-direction: row;
align-self: center;
justify-content: space-evenly;
width: $service-lane-diff-element-width;
opacity: 100%;
.service-action {
border: 1px solid var(--mdc-theme-on-primary);
border-radius: $border-radius-medium;
margin-left: $service-lane-header-actions-margin-left;
height: $service-lane-header-actions-height;
color: var(--mdc-theme-on-primary);
.mdc-button__label {
padding-left: $service-lane-header-actions-button-padding-left;
@extend .text-bold;
}
}
}

.service-lane__diff--number {
@extend .text-bold;
.service__releases {
display: flex;
align-items: center;
box-sizing: border-box;
justify-content: space-evenly;
margin: $service-lane-releases-margin;
}

// Copied from figma
width: 24px;
height: 24px;
border: 2px solid $service-lane-diff-element-border-color;
border-radius: $border-radius-large;
.service-lane__diff {
display: flex;
}

.service-lane__diff--dot {
.service-lane__diff--container {
display: flex;
flex-direction: row;
align-self: center;
box-sizing: border-box;
justify-content: space-evenly;
width: $service-lane-diff-element-width;
opacity: 100%;

.service-lane__diff--number {
@extend .text-bold;
display: flex;
align-items: center;
box-sizing: border-box;
justify-content: space-evenly;

// Copied from figma
width: 24px;
height: 24px;
border: 2px solid $service-lane-diff-element-border-color;
border-radius: $border-radius-large;
}

// Copied from figma
width: 3px;
height: 3px;
background: $service-lane-diff-element-border-color;
border-radius: $border-radius-large;
.service-lane__diff--dot {
align-self: center;
box-sizing: border-box;

// Copied from figma
width: 3px;
height: 3px;
background: $service-lane-diff-element-border-color;
border-radius: $border-radius-large;
}
}
}
.service-lane__diff--container:hover {
cursor: pointer;
opacity: 60%;
.service-lane__diff--number {
background-color: var(--mdc-theme-surface, #fff);

.service-lane__diff--container:hover {
cursor: pointer;
opacity: 60%;
.service-lane__diff--number {
background-color: var(--mdc-theme-surface, #fff);
}
}
}

.service-lane__diff--container:active {
.service-lane__diff--number {
transform: translateY(4px);
.service-lane__diff--container:active {
.service-lane__diff--number {
transform: translateY(4px);
}
}
}
29 changes: 9 additions & 20 deletions services/frontend-service/src/ui/components/SideBar/SideBar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Copyright freiheit.com*/
}

.mdc-drawer-sidebar-list {
margin: 35px 40px;
margin: 5px;
display: flex;
flex-direction: column;
align-items: flex-start;
Expand All @@ -48,7 +48,7 @@ Copyright freiheit.com*/
border: 2px solid #f2f5f7;
border-radius: 10px;
background-color: white;
padding: 20px; // 105px 20px 20px;
padding: 5px;
width: 100%;
position: relative;
display: flex;
Expand Down Expand Up @@ -119,22 +119,14 @@ Copyright freiheit.com*/
overflow: overlay;
position: relative;
width: 100%;
background-color: #fafbfc;
height: 75vh;
}

.actions-cart__lock-message {
background: var(--mdc-theme-background);
position: relative;
background-color: var(--mdc-theme-primary);
height: 85vh;
}

.mdc-drawer-sidebar .mdc-drawer-sidebar-footer-input {
border: 2px solid #f2f5f7;
border-radius: 10px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background-color: white;
padding: 20px;
padding: 5px;
width: 100%;
position: relative;
display: flex;
Expand All @@ -150,6 +142,10 @@ Copyright freiheit.com*/
height: $sidebar-apply-button-height;
border-radius: 0 0 0 $border-radius-large;
@extend .sub-headline1;

.sidebar-apply-button-hidden {
display: none;
}
}

.mdc-drawer__drawer {
Expand All @@ -168,10 +164,3 @@ Copyright freiheit.com*/
top: 0;
width: $sidebar-width;
}

.mdc-drawer-sidebar--hidden {
position: absolute;
right: $sidebar-hidden-displacement;
top: 0;
width: $sidebar-width;
}
Loading

0 comments on commit bc902e9

Please sign in to comment.