@digital-ai/plugin-dai-release
Version:
Frontend functionalities for the dai-release backstage plugin
425 lines (422 loc) • 13.8 kB
JavaScript
import { LocalizationProvider, DateTimePicker } from '@mui/x-date-pickers';
import { makeStyles, Paper, IconButton, Grid, MenuItem } from '@material-ui/core';
import React, { useState } from 'react';
import Select from '@mui/material/Select';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import Autocomplete from '@mui/material/Autocomplete';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import Chip from '@mui/material/Chip';
import ClearAllOutlined from '@material-ui/icons/ClearAllOutlined';
import Close from '@material-ui/icons/Close';
import Drawer from '@mui/material/Drawer';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import ListItemText from '@mui/material/ListItemText';
import LocalOfferIcon from '@material-ui/icons/LocalOffer';
import OutlinedInput from '@mui/material/OutlinedInput';
import SelectAll from '@material-ui/icons/SelectAll';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
const FilterComponent = ({
fromDate,
toDate,
orderBy,
searchTitle,
statusTags,
tags,
error,
showDrawer,
filterCount,
onFromDateChange,
onToDateChange,
onOrderByChange,
onSearchByTitle,
onStatusTagChange,
onShowDrawer,
onSetTags,
resetState
}) => {
const statuses = [
{ status: "Aborted", color: "rgb(102, 115, 133)" },
{ status: "Completed", color: "rgb(73, 133, 0)" },
{ status: "Failed", color: "rgb(214, 31, 33)" },
{ status: "Failing", color: "rgb(255, 158, 73)" },
{ status: "In progress", color: "rgb(61, 108, 158)" },
{ status: "Paused", color: "rgb(102, 115, 133)" },
{ status: "Planned", color: "rgb(102, 115, 133)" }
];
const useStyles = makeStyles((theme) => ({
statusIcon: {
borderRadius: "50%",
display: "inline-block",
height: theme.spacing(1.5),
margin: theme.spacing("auto", 1, "auto", 0),
width: theme.spacing(1.5)
},
inputRoot: {
fontSize: "12px"
},
datePickerInputRoot: {
fontSize: "12px"
},
inputLabelRoot: {
fontSize: "12px"
},
openCalenderPickerIcon: {
height: "16px",
width: "16px"
},
statusTagLabel: {
float: "left",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
overflow: "hidden",
width: "140px"
},
selectButton: {
fontSize: "10px",
textTransform: "none",
color: "inherit"
},
drawerHeader: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between"
},
clearGrid: {
display: "flex",
justifyContent: "space-between",
alignItems: "center"
},
fullWidth: {
width: "100%"
},
root: {
width: 500,
"& > * + *": {
marginTop: theme.spacing(3)
}
},
inputItem: {
width: "100%",
fontSize: "0.875rem"
}
}));
const classes = useStyles();
const onStatusChange = (event) => {
const {
target: { value }
} = event;
onStatusTagChange?.(typeof value === "string" ? value.split(",") : value);
};
const [customValues, setCustomValues] = useState([]);
const [inputValue, setInputValue] = useState("");
const handleChange = (_event, newValue) => {
setCustomValues(newValue);
onSetTags?.(newValue);
resetState?.();
};
const handleKeyDown = (event) => {
if (event.key === "Enter" && inputValue.trim() !== "") {
event.preventDefault();
if (!customValues.includes(inputValue.trim())) {
const newCustomValues = [...customValues, inputValue.trim()];
onSetTags?.(newCustomValues);
setCustomValues(newCustomValues);
setInputValue("");
}
}
};
const clearAllState = () => {
onSetTags?.([]);
onSearchByTitle?.("");
resetState?.();
onFromDateChange?.(null);
onToDateChange?.(null);
onOrderByChange?.("start_date");
onStatusTagChange?.([]);
setCustomValues?.([]);
setInputValue?.("");
};
return /* @__PURE__ */ React.createElement(
Drawer,
{
anchor: "right",
open: showDrawer,
onClose: () => onShowDrawer(false)
},
/* @__PURE__ */ React.createElement(Paper, { elevation: 1, style: { padding: "16px" } }, /* @__PURE__ */ React.createElement("div", { className: classes.drawerHeader }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, "Filters"), /* @__PURE__ */ React.createElement(
IconButton,
{
key: "dismiss",
title: "Close the Filter",
color: "inherit",
size: "small",
onClick: () => onShowDrawer(false)
},
/* @__PURE__ */ React.createElement(Close, { fontSize: "inherit" })
))),
/* @__PURE__ */ React.createElement(FormControl, { sx: { mx: 2, my: 3 } }, /* @__PURE__ */ React.createElement(
Grid,
{
container: true,
spacing: 3,
direction: "column",
justifyContent: "flex-start",
style: { width: "300px" }
},
/* @__PURE__ */ React.createElement(Grid, { item: true, className: classes.clearGrid }, /* @__PURE__ */ React.createElement("span", { "data-testid": "appliedFilterid" }, "Applied filters (", filterCount, ")"), /* @__PURE__ */ React.createElement(
Button,
{
variant: "outlined",
onClick: () => clearAllState(),
size: "small",
className: classes.inputLabelRoot,
style: {
textTransform: "none"
}
},
"Clear all"
)),
onStatusTagChange && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ React.createElement(
InputLabel,
{
className: classes.inputRoot,
id: "status-multiple-checkbox-label"
},
"Status"
), /* @__PURE__ */ React.createElement(
Select,
{
renderValue: (selected) => /* @__PURE__ */ React.createElement("span", { className: classes.statusTagLabel }, selected.join(", ")),
labelId: "status-multiple-checkbox-label",
id: "status-multiple-checkbox",
multiple: true,
value: statusTags,
onChange: onStatusChange,
input: /* @__PURE__ */ React.createElement(
OutlinedInput,
{
label: "Status",
className: classes.inputRoot
}
),
inputProps: { size: "small" }
},
/* @__PURE__ */ React.createElement(MenuItem, { style: { gap: "5px" } }, /* @__PURE__ */ React.createElement(
Button,
{
variant: "text",
size: "small",
startIcon: /* @__PURE__ */ React.createElement(SelectAll, null),
onClick: (event) => {
event.stopPropagation();
const statusValues = statuses.map((item) => item.status);
onStatusTagChange(statusValues);
},
className: classes.selectButton
},
"Select All"
), /* @__PURE__ */ React.createElement(
Button,
{
variant: "text",
size: "small",
startIcon: /* @__PURE__ */ React.createElement(ClearAllOutlined, null),
onClick: (event) => {
event.stopPropagation();
onStatusTagChange([]);
},
className: classes.selectButton
},
"Clear All"
)),
statuses.map((data) => /* @__PURE__ */ React.createElement(MenuItem, { key: data.status, value: data.status }, /* @__PURE__ */ React.createElement(
Checkbox,
{
size: "small",
checked: statusTags && statusTags.indexOf(data.status) > -1
}
), /* @__PURE__ */ React.createElement(
"i",
{
className: classes.statusIcon,
style: { backgroundColor: data.color }
}
), /* @__PURE__ */ React.createElement(
ListItemText,
{
primary: data.status,
classes: { primary: classes.inputRoot }
}
)))
))),
onOrderByChange && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ React.createElement(
InputLabel,
{
id: "orderby-select-label-id",
className: classes.inputRoot
},
"Order by"
), /* @__PURE__ */ React.createElement(
Select,
{
labelId: "orderby-select-label-id",
id: "orderby-select-label",
value: orderBy,
label: "Order by",
onChange: (event) => {
onOrderByChange(event.target.value);
},
input: /* @__PURE__ */ React.createElement(
OutlinedInput,
{
label: "Order by",
className: classes.inputRoot
}
),
inputProps: { size: "small" },
defaultValue: "start_date"
},
/* @__PURE__ */ React.createElement(MenuItem, { value: "start_date", className: classes.inputRoot }, "Start Date")
))),
onFromDateChange && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs }, /* @__PURE__ */ React.createElement(
DateTimePicker,
{
slotProps: {
textField: {
size: "small",
InputProps: {
classes: {
root: classes.datePickerInputRoot
}
},
InputLabelProps: {
classes: { root: classes.inputLabelRoot }
}
},
openPickerIcon: {
classes: { root: classes.openCalenderPickerIcon }
},
digitalClockSectionItem: {
classes: { root: classes.inputLabelRoot }
},
popper: {
placement: "left-start"
}
},
label: "From",
ampm: true,
value: fromDate,
onAccept: onFromDateChange,
className: classes.fullWidth
}
))),
onToDateChange && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs }, /* @__PURE__ */ React.createElement(
DateTimePicker,
{
slotProps: {
textField: {
size: "small",
InputProps: {
classes: {
root: classes.datePickerInputRoot
}
},
InputLabelProps: {
classes: { root: classes.inputLabelRoot }
}
},
openPickerIcon: {
classes: { root: classes.openCalenderPickerIcon }
},
digitalClockSectionItem: {
classes: { root: classes.inputLabelRoot }
},
popper: {
placement: "left-start"
}
},
label: "To",
ampm: true,
value: toDate,
onAccept: onToDateChange,
className: classes.fullWidth
}
))),
onSearchByTitle && /* @__PURE__ */ React.createElement(Grid, { item: true, className: classes.inputItem }, /* @__PURE__ */ React.createElement(
TextField,
{
id: "outlined-basic",
label: "Search by name",
variant: "outlined",
value: searchTitle,
onChange: (event) => {
onSearchByTitle(event.target.value);
if (resetState) {
resetState();
}
},
size: "small",
disabled: !!error,
fullWidth: true,
InputLabelProps: {
style: {
fontSize: "0.875rem"
// Custom font size
}
}
}
)),
onSetTags && /* @__PURE__ */ React.createElement(Grid, { item: true, className: classes.inputItem }, /* @__PURE__ */ React.createElement(
Autocomplete,
{
multiple: true,
freeSolo: true,
id: "tags-outlined",
options: [],
value: tags,
onChange: handleChange,
inputValue,
filterSelectedOptions: true,
onInputChange: (_event, newValue) => setInputValue(newValue),
renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ React.createElement(
Chip,
{
icon: /* @__PURE__ */ React.createElement(
LocalOfferIcon,
{
"data-testid": `chip-icon-${index}`,
style: { color: "green" }
}
),
label: option,
...getTagProps({ index }),
onDelete: getTagProps({ index }).onDelete
}
)),
renderInput: (params) => /* @__PURE__ */ React.createElement(
TextField,
{
...params,
label: "Search by tags",
placeholder: "Type and press Enter",
onKeyDown: handleKeyDown,
size: "small",
id: "outlined-basic",
InputLabelProps: {
style: {
fontSize: "0.875rem"
// Custom font size
}
}
}
)
}
))
))
);
};
export { FilterComponent };
//# sourceMappingURL=FilterComponent.esm.js.map