Skip to content

Commit

Permalink
frontend: idea to add action button to all tables
Browse files Browse the repository at this point in the history 
Signed-off-by: farodin91 <github@jan-jansen.net>
  • Loading branch information
@farodin91
farodin91 committed Jul 1, 2024
1 parent df4efdd commit 89b7e73
Show file tree
Hide file tree
Showing 79 changed files with 4,518 additions and 3,654 deletions.
108 changes: 106 additions & 2 deletions frontend/src/components/App/Home/__snapshots__/index.Base.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,8 +287,8 @@
class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root"
>
<table
class="MuiTable-root css-168xlf9-MuiTable-root"
style="--header-name-size: 180; --col-name-size: 180; --header-1-size: 180; --col-1-size: 180; --header-2-size: 180; --col-2-size: 180; --header-3-size: 180; --col-3-size: 180; --header-4-size: 180; --col-4-size: 180;"
class="MuiTable-root css-15ywfg9-MuiTable-root"
style="--header-name-size: 180; --col-name-size: 180; --header-1-size: 180; --col-1-size: 180; --header-2-size: 180; --col-2-size: 180; --header-3-size: 180; --col-3-size: 180; --header-4-size: 180; --col-4-size: 180; --header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70;"
>
<thead
class="MuiTableHead-root css-114s3s2-MuiTableHead-root"
Expand Down Expand Up @@ -678,6 +678,29 @@
</div>
</div>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-tb4te8-MuiTableCell-root"
colspan="1"
data-index="5"
scope="col"
>
<div
class="Mui-TableHeadCell-Content MuiBox-root css-1w86f15"
>
<div
class="Mui-TableHeadCell-Content-Labels MuiBox-root css-4ng264"
>
<div
class="Mui-TableHeadCell-Content-Wrapper MuiBox-root css-bbxzxe"
>
Actions
</div>
</div>
<div
class="Mui-TableHeadCell-Content-Actions MuiBox-root css-epvm6"
/>
</div>
</th>
</tr>
</thead>
<tbody
Expand Down Expand Up @@ -747,6 +770,33 @@
</button>
<div />
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-e3iv5e-MuiTableCell-root"
data-index="5"
>
<button
aria-label="Row Actions"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cxdeyj-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="MoreHorizIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</td>
</tr>
<tr
class="MuiTableRow-root css-n8542r-MuiTableRow-root"
Expand Down Expand Up @@ -812,6 +862,33 @@
</button>
<div />
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-e3iv5e-MuiTableCell-root"
data-index="5"
>
<button
aria-label="Row Actions"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cxdeyj-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="MoreHorizIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</td>
</tr>
<tr
class="MuiTableRow-root css-n8542r-MuiTableRow-root"
Expand Down Expand Up @@ -877,6 +954,33 @@
</button>
<div />
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-e3iv5e-MuiTableCell-root"
data-index="5"
>
<button
aria-label="Row Actions"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cxdeyj-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="MoreHorizIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</td>
</tr>
</tbody>
<tfoot
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/App/Home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,7 @@ function HomeComponent(props: HomeComponentProps) {
>
<ResourceTable
defaultSortingColumn={{ id: 'name', desc: false }}
noActions
columns={[
{
id: 'name',
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/App/Notifications/List.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ export default function NotificationList() {
}}
>
<Table
noActions
columns={[
{
header: t('translation|Message'),
Expand Down
6 changes: 3 additions & 3 deletions ...nts/App/PluginSettings/__snapshots__/PluginSettingsDetails.WithAutoSave.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1a2ml2f-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="false"
for="mui-141"
id="mui-141-label"
for="mui-144"
id="mui-144-label"
>
Normal Input
</label>
Expand All @@ -67,7 +67,7 @@
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
id="mui-141"
id="mui-144"
type="text"
value=""
/>
Expand Down
6 changes: 3 additions & 3 deletions .../App/PluginSettings/__snapshots__/PluginSettingsDetails.WithoutAutoSave.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1a2ml2f-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="false"
for="mui-142"
id="mui-142-label"
for="mui-145"
id="mui-145-label"
>
Normal Input
</label>
Expand All @@ -67,7 +67,7 @@
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
id="mui-142"
id="mui-145"
type="text"
value=""
/>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@
style="width: 100px;"
>
<div
aria-controls="mui-145"
aria-controls="mui-148"
aria-expanded="false"
aria-haspopup="listbox"
class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"
Expand Down
108 changes: 106 additions & 2 deletions frontend/src/components/cluster/__snapshots__/Overview.Events.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -733,8 +733,8 @@
class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root"
>
<table
class="MuiTable-root css-466wbf-MuiTable-root"
style="--header-0-size: 180; --col-0-size: 180; --header-1-size: 180; --col-1-size: 180; --header-namespace-size: 180; --col-namespace-size: 180; --header-3-size: 180; --col-3-size: 180; --header-4-size: 180; --col-4-size: 180; --header-last_seen-size: 180; --col-last_seen-size: 180;"
class="MuiTable-root css-1uwc46g-MuiTable-root"
style="--header-0-size: 180; --col-0-size: 180; --header-1-size: 180; --col-1-size: 180; --header-namespace-size: 180; --col-namespace-size: 180; --header-3-size: 180; --col-3-size: 180; --header-4-size: 180; --col-4-size: 180; --header-last_seen-size: 180; --col-last_seen-size: 180; --header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70;"
>
<thead
class="MuiTableHead-root css-114s3s2-MuiTableHead-root"
Expand Down Expand Up @@ -1203,6 +1203,29 @@
</div>
</div>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-tb4te8-MuiTableCell-root"
colspan="1"
data-index="6"
scope="col"
>
<div
class="Mui-TableHeadCell-Content MuiBox-root css-1w86f15"
>
<div
class="Mui-TableHeadCell-Content-Labels MuiBox-root css-4ng264"
>
<div
class="Mui-TableHeadCell-Content-Wrapper MuiBox-root css-bbxzxe"
>
Actions
</div>
</div>
<div
class="Mui-TableHeadCell-Content-Actions MuiBox-root css-epvm6"
/>
</div>
</th>
</tr>
</thead>
<tbody
Expand Down Expand Up @@ -1280,6 +1303,33 @@
3mo
</p>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-e3iv5e-MuiTableCell-root"
data-index="6"
>
<button
aria-label="Row Actions"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cxdeyj-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="MoreHorizIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</td>
</tr>
<tr
class="MuiTableRow-root css-n8542r-MuiTableRow-root"
Expand Down Expand Up @@ -1353,6 +1403,33 @@
3mo
</p>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-e3iv5e-MuiTableCell-root"
data-index="6"
>
<button
aria-label="Row Actions"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cxdeyj-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="MoreHorizIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</td>
</tr>
<tr
class="MuiTableRow-root css-n8542r-MuiTableRow-root"
Expand Down Expand Up @@ -1426,6 +1503,33 @@
3mo
</p>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-e3iv5e-MuiTableCell-root"
data-index="6"
>
<button
aria-label="Row Actions"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cxdeyj-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="MoreHorizIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</td>
</tr>
</tbody>
<tfoot
Expand Down
17 changes: 16 additions & 1 deletion frontend/src/components/common/ActionButton/ActionButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import { Icon, IconifyIcon, IconProps } from '@iconify/react';
import { ListItemIcon, ListItemText, MenuItem } from '@mui/material';
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import React from 'react';

export type ButtonStyle = 'action' | 'menu';

export interface ActionButtonProps {
/** A short description of the action. */
description: string;
/** Either a string icon, or imported icon. */
icon: string | IconifyIcon;
/** The action when it's activated. */
onClick: React.MouseEventHandler<HTMLButtonElement>;
onClick: React.MouseEventHandler<HTMLElement>;
/** A longer description of the action. Used in the tooltip. */
longDescription?: string;
/** The icon color. */
Expand All @@ -22,6 +25,7 @@ export interface ActionButtonProps {
* with content above or below, without ruining the border size and shape).
*/
edge?: false | 'end' | 'start' | undefined;
buttonStyle?: ButtonStyle;
iconButtonProps?: IconButtonProps;
iconProps?: IconProps;
}
Expand All @@ -41,7 +45,18 @@ export default function ActionButton({
edge,
iconButtonProps,
iconProps,
buttonStyle = 'action',
}: ActionButtonProps) {
if (buttonStyle === 'menu') {
return (
<MenuItem onClick={onClick}>
<ListItemIcon>
<Icon icon={icon} color={color} width={width} {...iconProps} />
</ListItemIcon>
<ListItemText>{longDescription || description}</ListItemText>
</MenuItem>
);
}
return (
<Tooltip title={longDescription || description}>
<IconButton
Expand Down
Loading

0 comments on commit 89b7e73

Please sign in to comment.