Skip to content

Commit 40329e3

Browse files
snioksniok
committed
frontend: Add Activity stories
1 parent 574f27d commit 40329e3

File tree

3 files changed

+314
-0
lines changed

3 files changed

+314
-0
lines changed

‎frontend/src/components/activity/Activity.stories.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/*
2+
* Copyright 2025 The Kubernetes Authors
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { Box } from '@mui/material';
18+
import { Meta, StoryFn } from '@storybook/react';
19+
import { Provider } from 'react-redux';
20+
import { MemoryRouter } from 'react-router-dom';
21+
import store from '../../redux/stores/store';
22+
import { ActivitiesRenderer, Activity, activitySlice } from './Activity';
23+
24+
export default {
25+
title: 'Activity',
26+
component: ActivitiesRenderer,
27+
decorators: [
28+
Story => (
29+
<Provider store={store}>
30+
<MemoryRouter>
31+
<Box
32+
sx={{
33+
display: 'grid',
34+
overflow: 'hidden',
35+
flexGrow: '1',
36+
position: 'relative',
37+
gridTemplateRows: '1fr min-content',
38+
gridTemplateColumns: 'min-content 1fr',
39+
width: '100%',
40+
height: '90vh',
41+
border: '1px solid #eee',
42+
}}
43+
>
44+
<Box
45+
id="main"
46+
sx={{
47+
overflow: 'auto',
48+
position: 'relative',
49+
minHeight: '0',
50+
gridColumn: '2/3',
51+
gridRow: '1/2',
52+
}}
53+
></Box>
54+
<Story />
55+
</Box>
56+
</MemoryRouter>
57+
</Provider>
58+
),
59+
],
60+
} as Meta;
61+
62+
const makeActivity = (activity: Partial<Activity>): Activity => ({
63+
id: 'id',
64+
location: 'window',
65+
content: 'Activity Content',
66+
...activity,
67+
});
68+
69+
function setupActivities(activities: Activity[]) {
70+
activities.forEach(activity => {
71+
store.dispatch(activitySlice.actions.launchActivity(activity));
72+
});
73+
}
74+
75+
export const Basic: StoryFn = () => {
76+
setupActivities([
77+
makeActivity({ id: '1', location: 'split-left', content: 'Left' }),
78+
makeActivity({ id: '2', location: 'split-right', content: 'Right' }),
79+
]);
80+
81+
return <ActivitiesRenderer />;
82+
};
83+
84+
export const EmptyBar: StoryFn = () => {
85+
store.dispatch(activitySlice.actions.close('1'));
86+
store.dispatch(activitySlice.actions.close('2'));
87+
88+
return <ActivitiesRenderer />;
89+
};

‎frontend/src/components/activity/__snapshots__/Activity.Basic.stories.storyshot‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<body>
2+
<div>
3+
<div
4+
class="MuiBox-root css-y7vegm"
5+
>
6+
<div
7+
class="MuiBox-root css-5lww48"
8+
id="main"
9+
/>
10+
<div
11+
class="MuiBox-root css-11hh78l"
12+
/>
13+
<div
14+
class="MuiBox-root css-3xoqkk"
15+
>
16+
<div
17+
class="MuiBox-root css-1k6h1pd"
18+
>
19+
<div
20+
class="MuiBox-root css-8nuz7m"
21+
>
22+
<div
23+
class="MuiBox-root css-cc4fno"
24+
/>
25+
</div>
26+
<div
27+
class="MuiBox-root css-ha4r1w"
28+
>
29+
<div
30+
class="MuiBox-root css-19rsff"
31+
/>
32+
<p
33+
class="MuiTypography-root MuiTypography-body1 css-slk4bd-MuiTypography-root"
34+
/>
35+
<div
36+
class="MuiBox-root css-1po99kh"
37+
/>
38+
<button
39+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-hvz71z-MuiButtonBase-root-MuiIconButton-root"
40+
tabindex="0"
41+
type="button"
42+
>
43+
<span
44+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
45+
/>
46+
</button>
47+
<button
48+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-hvz71z-MuiButtonBase-root-MuiIconButton-root"
49+
tabindex="0"
50+
type="button"
51+
>
52+
<span
53+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
54+
/>
55+
</button>
56+
<button
57+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-hvz71z-MuiButtonBase-root-MuiIconButton-root"
58+
tabindex="0"
59+
type="button"
60+
>
61+
<span
62+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
63+
/>
64+
</button>
65+
</div>
66+
<div
67+
class="MuiBox-root css-lt82m0"
68+
>
69+
Left
70+
</div>
71+
</div>
72+
</div>
73+
<div
74+
class="MuiBox-root css-3xoqkk"
75+
>
76+
<div
77+
class="MuiBox-root css-s0d5u6"
78+
>
79+
<div
80+
class="MuiBox-root css-8nuz7m"
81+
>
82+
<div
83+
class="MuiBox-root css-cc4fno"
84+
/>
85+
</div>
86+
<div
87+
class="MuiBox-root css-ha4r1w"
88+
>
89+
<div
90+
class="MuiBox-root css-19rsff"
91+
/>
92+
<p
93+
class="MuiTypography-root MuiTypography-body1 css-slk4bd-MuiTypography-root"
94+
/>
95+
<div
96+
class="MuiBox-root css-1po99kh"
97+
/>
98+
<button
99+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-hvz71z-MuiButtonBase-root-MuiIconButton-root"
100+
tabindex="0"
101+
type="button"
102+
>
103+
<span
104+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
105+
/>
106+
</button>
107+
<button
108+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-hvz71z-MuiButtonBase-root-MuiIconButton-root"
109+
tabindex="0"
110+
type="button"
111+
>
112+
<span
113+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
114+
/>
115+
</button>
116+
<button
117+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-hvz71z-MuiButtonBase-root-MuiIconButton-root"
118+
tabindex="0"
119+
type="button"
120+
>
121+
<span
122+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
123+
/>
124+
</button>
125+
</div>
126+
<div
127+
class="MuiBox-root css-lt82m0"
128+
>
129+
Right
130+
</div>
131+
</div>
132+
</div>
133+
<div
134+
class="MuiBox-root css-mjas9"
135+
>
136+
<button
137+
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-18zhfjw-MuiButtonBase-root-MuiButton-root"
138+
tabindex="0"
139+
type="button"
140+
>
141+
<div
142+
class="MuiBox-root css-1ww6zew"
143+
/>
144+
<div
145+
class="MuiBox-root css-1lrrdrt"
146+
>
147+
Something
148+
</div>
149+
<button
150+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-hvz71z-MuiButtonBase-root-MuiIconButton-root"
151+
tabindex="0"
152+
type="button"
153+
>
154+
<span
155+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
156+
/>
157+
</button>
158+
<span
159+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
160+
/>
161+
</button>
162+
<button
163+
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-1j83dhb-MuiButtonBase-root-MuiButton-root"
164+
tabindex="0"
165+
type="button"
166+
>
167+
<div
168+
class="MuiBox-root css-1ww6zew"
169+
/>
170+
<div
171+
class="MuiBox-root css-1lrrdrt"
172+
>
173+
Something
174+
</div>
175+
<button
176+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-hvz71z-MuiButtonBase-root-MuiIconButton-root"
177+
tabindex="0"
178+
type="button"
179+
>
180+
<span
181+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
182+
/>
183+
</button>
184+
<span
185+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
186+
/>
187+
</button>
188+
<button
189+
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-12lxsjl-MuiButtonBase-root-MuiButton-root"
190+
tabindex="0"
191+
type="button"
192+
>
193+
<span
194+
class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
195+
/>
196+
Overview
197+
<span
198+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
199+
/>
200+
</button>
201+
</div>
202+
</div>
203+
</div>
204+
<div
205+
class="MuiBox-root css-fvswx6"
206+
/>
207+
<div
208+
class="MuiBox-root css-367vlz"
209+
/>
210+
</body>

‎frontend/src/components/activity/__snapshots__/Activity.EmptyBar.stories.storyshot‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<body>
2+
<div>
3+
<div
4+
class="MuiBox-root css-y7vegm"
5+
>
6+
<div
7+
class="MuiBox-root css-5lww48"
8+
id="main"
9+
/>
10+
<div
11+
class="MuiBox-root css-11hh78l"
12+
/>
13+
</div>
14+
</div>
15+
</body>

0 commit comments

Comments
 (0)