Skip to content

Commit db517b5

Browse files
talhainvenxiontalhainvenxion
committed
Update stack functionality
1 parent 2d7ccbd commit db517b5

File tree

18 files changed

+1326
-30
lines changed

18 files changed

+1326
-30
lines changed

‎src/routes/appRoutesConfig.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import secrets from '../ui/layouts/secrets/Secrets';
1717
import stackComponents from '../ui/layouts/stackComponents/Stacks';
1818
import registerComponents from '../ui/layouts/stackComponents/RegisterComponents';
1919
import CreateStack from '../ui/layouts/stacks/CreateStack';
20+
import UpdateStack from '../ui/layouts/stacks/UpdateStack';
2021
import RegisterSecrets from '../ui/layouts/secrets/RegisterSecret';
2122
import PipelineDetail from '../ui/layouts/pipelines/PipelineDetail/index';
2223
import StackDetail from '../ui/layouts/stacks/StackDetail/index';
@@ -206,6 +207,15 @@ const routes = [
206207
},
207208
exact: true,
208209
},
210+
211+
{
212+
path: routePaths.stacks.UpdateStack(':string', ':id'),
213+
Component: UpdateStack,
214+
visibility: {
215+
authentication: RouteVisibilityAuthentication.authenticatedOnly,
216+
},
217+
exact: true,
218+
},
209219
{
210220
path: routePaths.secrets.registerSecrets(':string'),
211221
Component: RegisterSecrets,

‎src/routes/routePaths.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ export const routePaths = {
7878
allRuns: '/stacks/all-runs',
7979
createStack: (workspace: string): string =>
8080
`/workspaces/${workspace}/create-stack/all-component`,
81+
UpdateStack: (workspace: string, id: TId): string =>
82+
`/workspaces/${workspace}/stack/${id}/update-stack`,
8183
},
8284
secrets: {
8385
base: '/secrets',

‎src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.module.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $width: 15rem;
2626
border-radius: 4px;
2727
box-shadow: $boxShadow;
2828
min-width: $width;
29-
z-index: 9;
29+
z-index: 100;
3030
top: 5rem;
3131
right: 0;
3232
text-align: end;
@@ -41,9 +41,9 @@ $width: 15rem;
4141
.popupItem:hover {
4242
background-color: $activeBgColor;
4343
}
44-
.your{
44+
.your {
4545
font-family: 'Rubik';
4646
font-size: 14px;
4747
font-weight: 300;
4848
line-height: 16.59px;
49-
}
49+
}

‎src/ui/layouts/stacks/BasePage.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react';
2-
import { Redirect, useHistory } from 'react-router-dom';
2+
import { Redirect } from 'react-router-dom';
33
import { AppRoute } from '../../../routes';
4-
import { Box, FlexBox, IfElse, PrimaryButton } from '../../components';
4+
import { Box, FlexBox, IfElse } from '../../components';
55
import { AuthenticatedLayout } from '../common/layouts/AuthenticatedLayout';
66
import { SidebarContainer } from '../common/layouts/SidebarContainer';
77
import { Tabs } from '../common/Tabs';
88
import Header from './Header';
99
import Stacks from './Stacks';
10-
import { routePaths } from '../../../routes/routePaths';
11-
import { useSelector } from '../../hooks';
12-
import { workspaceSelectors } from '../../../redux/selectors';
10+
// import { routePaths } from '../../../routes/routePaths';
11+
// import { useSelector } from '../../hooks';
12+
// import { workspaceSelectors } from '../../../redux/selectors';
1313

1414
export const BasePage: React.FC<{
1515
tabPages: TabPage[];
@@ -21,8 +21,8 @@ export const BasePage: React.FC<{
2121
renderHeaderRight?: () => JSX.Element;
2222
headerWithButtons?: boolean;
2323
}> = ({
24-
fromRegisterComponent = false,
25-
fromConfigureComponent = false,
24+
// fromRegisterComponent = false,
25+
// fromConfigureComponent = false,
2626
tabPages,
2727
title,
2828
breadcrumbs,
@@ -31,8 +31,8 @@ export const BasePage: React.FC<{
3131
headerWithButtons,
3232
children,
3333
}) => {
34-
const history = useHistory();
35-
const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
34+
// const history = useHistory();
35+
// const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
3636

3737
return (
3838
<AuthenticatedLayout breadcrumb={[...breadcrumbs]}>
@@ -79,7 +79,7 @@ export const BasePage: React.FC<{
7979
</Box>
8080
</SidebarContainer>
8181

82-
{!fromRegisterComponent && !fromConfigureComponent && (
82+
{/* {!fromRegisterComponent && !fromConfigureComponent && (
8383
<FlexBox
8484
style={{
8585
position: 'fixed',
@@ -98,7 +98,7 @@ export const BasePage: React.FC<{
9898
</PrimaryButton>
9999
</Box>
100100
</FlexBox>
101-
)}
101+
)} */}
102102
</AuthenticatedLayout>
103103
);
104104
};

‎src/ui/layouts/stacks/StackDetail/Configuration/index.module.scss‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77
.field {
88
background: rgba(168, 168, 168, 0.1);
9-
border: 1px solid #C9CBD0;
9+
border: 1px solid #c9cbd0;
1010
border-radius: 4px;
1111
}
1212
.switch {
@@ -16,7 +16,7 @@
1616
height: 20px;
1717
}
1818

19-
.switch input {
19+
.switch input {
2020
opacity: 0;
2121
width: 0;
2222
height: 0;
@@ -30,20 +30,20 @@
3030
right: 0;
3131
bottom: 0;
3232
background-color: #ccc;
33-
-webkit-transition: .4s;
34-
transition: .4s;
33+
-webkit-transition: 0.4s;
34+
transition: 0.4s;
3535
}
3636

3737
.slider:before {
3838
position: absolute;
39-
content: "";
39+
content: '';
4040
height: 17px;
4141
width: 17px;
4242
left: 1px;
4343
bottom: 2px;
4444
background-color: white;
45-
-webkit-transition: .4s;
46-
transition: .4s;
45+
-webkit-transition: 0.4s;
46+
transition: 0.4s;
4747
}
4848

4949
input:checked + .slider {
@@ -67,4 +67,18 @@ input:checked + .slider:before {
6767

6868
.slider.round:before {
6969
border-radius: 50%;
70-
}
70+
}
71+
72+
.updateButton {
73+
background: #ffffff;
74+
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
75+
border-radius: 4px;
76+
color: #443e99;
77+
}
78+
79+
.updateButton:hover {
80+
background: #443e99;
81+
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
82+
border-radius: 4px;
83+
color: #fff;
84+
}

‎src/ui/layouts/stacks/StackDetail/Configuration/index.tsx‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
FullWidthSpinner,
1313
// Container,
1414
EditField,
15+
PrimaryButton,
1516
// Paragraph,
1617
} from '../../../../components';
1718
// import { iconColors, iconSizes } from '../../../../../constants';
@@ -172,7 +173,7 @@ export const Configuration: React.FC<{
172173
</GhostButton>
173174
</Box>
174175
</FlexBox> */}
175-
<FlexBox.Row flexDirection='column' marginLeft="md" marginTop="lg">
176+
<FlexBox.Row flexDirection="column" marginLeft="md" marginTop="lg">
176177
{/* <Container> */}
177178
<Box style={{ width: '30%' }}>
178179
<EditField
@@ -188,7 +189,7 @@ export const Configuration: React.FC<{
188189
className={styles.field}
189190
/>
190191
</Box>
191-
<Box marginTop='lg' >
192+
<Box marginTop="lg">
192193
<ToggleField
193194
name="Share Component with public"
194195
value={stack.isShared}
@@ -292,6 +293,27 @@ export const Configuration: React.FC<{
292293
</Box>
293294
</SidePopup>
294295
)}
296+
<FlexBox
297+
style={{
298+
position: 'fixed',
299+
right: '0',
300+
bottom: '0',
301+
marginRight: '45px',
302+
}}
303+
>
304+
<Box marginBottom="lg">
305+
<PrimaryButton
306+
onClick={() =>
307+
history.push(
308+
routePaths.stacks.UpdateStack(selectedWorkspace, stack.id),
309+
)
310+
}
311+
className={styles.updateButton}
312+
>
313+
Update Stack
314+
</PrimaryButton>
315+
</Box>
316+
</FlexBox>
295317
</FlexBox.Column>
296318
);
297319
};

‎src/ui/layouts/stacks/StackDetail/index.tsx‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { useHistory, useLocationPath, useSelector } from '../../../hooks';
1414
import FilterComponent, {
1515
getInitialFilterStateForRuns,
1616
} from '../../../components/Filters';
17-
import { Box } from '../../../components';
17+
import { Box, FlexBox, PrimaryButton } from '../../../components';
1818
import {
1919
// stackPagesSelectors,
2020
workspaceSelectors,
@@ -32,7 +32,8 @@ import { GetHeaderCols } from './getHeaderCols';
3232

3333
const FilterWrapperForRun = () => {
3434
const locationPath = useLocationPath();
35-
35+
const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
36+
const history = useHistory();
3637
// TODO: Dev please note: getInitialFilterState is for stack inital filter value for any other component you need to modify it
3738
const [filters, setFilter] = useState([getInitialFilterStateForRuns()]);
3839
function getFilter(values: any) {
@@ -46,14 +47,35 @@ const FilterWrapperForRun = () => {
4647
return filterValuesMap;
4748
}
4849
return (
49-
<Box marginTop='lg' style={{ width: '100%' }}>
50+
<Box marginTop="lg" style={{ width: '100%' }}>
5051
<FilterComponent
5152
getInitials={getInitialFilterStateForRuns}
5253
filters={filters}
5354
setFilter={setFilter}
5455
>
55-
<Runs filter={getFilter(filters)} stackId={locationPath.split('/')[4]} />
56+
<Runs
57+
filter={getFilter(filters)}
58+
stackId={locationPath.split('/')[4]}
59+
/>
5660
</FilterComponent>
61+
<FlexBox
62+
style={{
63+
position: 'fixed',
64+
right: '0',
65+
bottom: '0',
66+
marginRight: '45px',
67+
}}
68+
>
69+
<Box marginBottom="lg">
70+
<PrimaryButton
71+
onClick={() =>
72+
history.push(routePaths.stacks.createStack(selectedWorkspace))
73+
}
74+
>
75+
Register New Stack
76+
</PrimaryButton>
77+
</Box>
78+
</FlexBox>
5779
</Box>
5880
);
5981
};

‎src/ui/layouts/stacks/Stacks/index.tsx‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ import { useService } from './useService';
99
import FilterComponent, {
1010
getInitialFilterState,
1111
} from '../../../components/Filters';
12-
import { Box } from '../../../components';
12+
import { Box, FlexBox, PrimaryButton } from '../../../components';
1313
import { workspaceSelectors } from '../../../../redux/selectors';
14-
import { useLocationPath, useSelector } from '../../../hooks';
14+
import { useHistory, useLocationPath, useSelector } from '../../../hooks';
1515
// import { useSelector } from '../../../hooks';
1616
// import { workspaceSelectors } from '../../../../redux/selectors';
1717

1818
const FilterWrapper = () => {
19+
const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
20+
const history = useHistory();
1921
// TODO: Dev please note: getInitialFilterState is for stack inital filter value for any other component you need to modify it
2022
const [filters, setFilter] = useState([getInitialFilterState()]);
2123
function getFilter(values: any) {
@@ -37,6 +39,24 @@ const FilterWrapper = () => {
3739
>
3840
<List filter={getFilter(filters)} />
3941
</FilterComponent>
42+
<FlexBox
43+
style={{
44+
position: 'fixed',
45+
right: '0',
46+
bottom: '0',
47+
marginRight: '45px',
48+
}}
49+
>
50+
<Box marginBottom="lg">
51+
<PrimaryButton
52+
onClick={() =>
53+
history.push(routePaths.stacks.createStack(selectedWorkspace))
54+
}
55+
>
56+
Register New Stack
57+
</PrimaryButton>
58+
</Box>
59+
</FlexBox>
4060
</Box>
4161
);
4262
};

0 commit comments

Comments
 (0)