@evenicanpm/admin-integrate 1.1.0

package/src/components/list-filter/list-filter.tsx

@@ -0,0 +1,409 @@
+"use client";
+import { debounce } from "lodash";
+import { useTranslations } from "next-intl";
+import React, { useEffect, useState } from "react";
+
+import {
+  Search,
+  FilterAltOutlined,
+  CloseOutlined,
+  ArrowForwardIos,
+  Delete,
+} from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  IconButton,
+  TextField,
+  InputAdornment,
+  Select,
+  MenuItem,
+  Theme,
+  useTheme,
+  Paper,
+  Popper,
+  Badge,
+  ClickAwayListener,
+} from "@mui/material";
+import {
+  Filters,
+  FilterResult,
+  ListFilterOutput,
+  FilterConfig,
+} from "./list-filter-types";
+
+import { OutlinedIconButton } from "../button";
+import SelectFilterComponent from "./select-filter";
+import MultiSelectFilterComponent from "./multi-select-filter";
+import DateFilterComponent from "./date-filter";
+import DateRangeFilterComponent from "./date-range-filter";
+
+interface FilterProps<FilterShape extends Filters> {
+  setFilters: (filterUpdate: ListFilterOutput<FilterShape>) => void;
+  clearFilters: () => void;
+  filters?: FilterShape;
+  config?: FilterConfig;
+  manualClose?: boolean;
+}
+
+type FilterErrors<FilterShape extends Filters> = {
+  [Property in keyof FilterShape]: boolean;
+};
+
+const ListFilter = function ListFilter<FilterShape extends Filters>(
+  props: FilterProps<FilterShape>,
+) {
+  const t = useTranslations("Integrate.Filter");
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const {
+    setFilters,
+    clearFilters,
+    filters = {} as FilterShape,
+    manualClose = false,
+    config: { pagination = {}, search = {} } = {},
+  } = props;
+
+  const { pageOptions = [10, 20, 30], pageDefault = 10 } = pagination || {};
+
+  const { label: searchLabel = t("defaultSearchLabel") } = search || {};
+
+  const defaultValues = Object.entries(filters).reduce(
+    (values, [key, filter]) => {
+      if (filter.type === "select" && filter.value)
+        return {
+          ...values,
+          [key]: filter.options.find((o) => o.id === filter.value[0].id),
+        };
+      if (filter.type === "multiSelect" && filter.value)
+        return {
+          ...values,
+          [key]: filter.options.filter((o) =>
+            filter.value.find((v) => v.id === o.id),
+          ),
+        };
+
+      return { ...values, [key]: filter.value };
+    },
+    {},
+  ) as FilterResult<FilterShape>;
+
+  const filterErrorsBase: FilterErrors<FilterShape> = Object.keys(
+    filters,
+  ).reduce(
+    (values, key) => ({
+      ...values,
+      [key]: false,
+    }),
+    {},
+  ) as FilterErrors<FilterShape>;
+
+  const [perPage, setPerPage] = useState(pageDefault);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [open, setOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [filterErrors, setFilterErrors] = useState(filterErrorsBase);
+  const [publishedFilterValues, setPublishedFilterValues] =
+    useState<FilterResult<FilterShape>>(defaultValues);
+  const [filterValues, setFilterValues] = useState<FilterResult<FilterShape>>(
+    publishedFilterValues,
+  );
+
+  const activeFilterCount = Object.entries(publishedFilterValues).reduce(
+    (sum, [key, value]) => {
+      if (!value) return sum;
+
+      const activeFilters =
+        filters[key].type === "multiSelect" ? value.length : 1;
+
+      return sum + activeFilters;
+    },
+    0,
+  );
+
+  const updateFilterValue = (name, value) => {
+    if (Array.isArray(value) && !value.length) value = null;
+    setFilterValues({
+      ...filterValues,
+      [name]: value || null,
+    });
+  };
+
+  const updateFilterErrors = (name: keyof FilterShape, error: boolean) => {
+    setFilterErrors({
+      ...filterErrors,
+      [name]: error,
+    });
+  };
+
+  const sendFilterOutput = (
+    update: {
+      search?: string;
+      itemsPerPage?: number;
+      filters?: FilterResult<FilterShape>;
+    } = {},
+  ) => {
+    setFilters({
+      search: searchTerm,
+      itemsPerPage: perPage,
+      filters: publishedFilterValues,
+      ...update,
+    });
+  };
+
+  const handleFilterMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (!open) {
+      setFilterValues(publishedFilterValues);
+      setAnchorEl(event.currentTarget);
+    }
+    setOpen(!open);
+  };
+
+  const handleFilterSet = () => {
+    setPublishedFilterValues(filterValues);
+    sendFilterOutput({ filters: filterValues });
+    setOpen(false);
+  };
+
+  const handleFilterClear = () => {
+    const emptyFilterValues = Object.keys(filterValues).reduce(
+      (values, key) => ({ ...values, [key]: null }),
+      {},
+    ) as FilterResult<FilterShape>;
+    setPublishedFilterValues(emptyFilterValues);
+    setOpen(false);
+    clearFilters();
+  };
+
+  const debounceSendSearchOutput = debounce(
+    (s) => sendFilterOutput({ search: s }),
+    400,
+  );
+
+  useEffect(() => {
+    debounceSendSearchOutput(searchTerm);
+    return debounceSendSearchOutput.cancel;
+  }, [searchTerm]);
+
+  const handlePerPageUpdate = (itemsPerPage: number) => {
+    setPerPage(itemsPerPage);
+    sendFilterOutput({ itemsPerPage });
+  };
+
+  return (
+    <Box sx={styles.filter}>
+      {Object.keys(filters).length ? (
+        <ClickAwayListener
+          onClickAway={() => !manualClose && setOpen(false)}
+          mouseEvent="onMouseUp"
+        >
+          <Box>
+            <Badge
+              badgeContent={activeFilterCount}
+              color="error"
+              invisible={!activeFilterCount}
+            >
+              <OutlinedIconButton
+                color="info"
+                onClick={(e) => handleFilterMenuClick(e)}
+              >
+                <FilterAltOutlined />
+              </OutlinedIconButton>
+            </Badge>
+            <Popper open={open} anchorEl={anchorEl} placement="bottom-start">
+              <Paper sx={styles.popOut} elevation={3}>
+                <Box sx={styles.closeRow}>
+                  {manualClose ? (
+                    <IconButton
+                      centerRipple={false}
+                      onClick={() => setOpen(false)}
+                    >
+                      <CloseOutlined />
+                    </IconButton>
+                  ) : (
+                    <Box sx={styles.bufferRow} />
+                  )}
+                </Box>
+
+                <Box sx={styles.filterRows}>
+                  {Object.entries(filters)
+                    .sort(([keyA, { sort: a }], [keyB, { sort: b }]) => a - b)
+                    .map(([name, filter]) => {
+                      switch (filter.type) {
+                        case "select":
+                          return (
+                            <SelectFilterComponent
+                              key={name}
+                              filter={filter}
+                              current={
+                                filterValues[name] as (typeof filter)["value"]
+                              }
+                              onSet={(v) => updateFilterValue(name, v)}
+                              onError={(e) => updateFilterErrors(name, e)}
+                            />
+                          );
+                        case "multiSelect":
+                          return (
+                            <MultiSelectFilterComponent
+                              key={name}
+                              filter={filter}
+                              current={
+                                filterValues[name] as (typeof filter)["value"]
+                              }
+                              onSet={(v) => updateFilterValue(name, v)}
+                              onError={(e) => updateFilterErrors(name, e)}
+                            />
+                          );
+                        case "date":
+                          return (
+                            <DateFilterComponent
+                              key={name}
+                              filter={filter}
+                              current={
+                                filterValues[name] as (typeof filter)["value"]
+                              }
+                              onSet={(v) => updateFilterValue(name, v)}
+                              onError={(e) => updateFilterErrors(name, e)}
+                            />
+                          );
+                        case "dateRange":
+                          return (
+                            <DateRangeFilterComponent
+                              key={name}
+                              filter={filter}
+                              current={
+                                filterValues[name] as (typeof filter)["value"]
+                              }
+                              onSet={(v) => updateFilterValue(name, v)}
+                              onError={(e) => updateFilterErrors(name, e)}
+                            />
+                          );
+                      }
+                    })}
+                  <Box sx={styles.buttonRow}>
+                    {activeFilterCount ? (
+                      <Button
+                        variant="contained"
+                        color="error"
+                        startIcon={<Delete />}
+                        onClick={handleFilterClear}
+                      >
+                        Clear
+                      </Button>
+                    ) : (
+                      ""
+                    )}
+
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      startIcon={<ArrowForwardIos />}
+                      disabled={Object.values(filterErrors).some((v) => v)}
+                      onClick={handleFilterSet}
+                    >
+                      Filter
+                    </Button>
+                  </Box>
+                </Box>
+              </Paper>
+            </Popper>
+          </Box>
+        </ClickAwayListener>
+      ) : (
+        ""
+      )}
+
+      {search ? (
+        <TextField
+          sx={styles.search}
+          variant="outlined"
+          label={searchLabel}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <Search />
+                </InputAdornment>
+              ),
+            },
+          }}
+        />
+      ) : (
+        ""
+      )}
+      {pagination ? (
+        <Select
+          sx={styles.select}
+          value={perPage}
+          onChange={(e) => handlePerPageUpdate(e.target.value as number)}
+        >
+          {pageOptions.map((option) => (
+            <MenuItem value={option}>
+              {option} {t("itemsPerPage")}
+            </MenuItem>
+          ))}
+        </Select>
+      ) : (
+        ""
+      )}
+    </Box>
+  );
+};
+
+const getStyles = (theme: Theme) => {
+  return {
+    filter: {
+      width: "100%",
+      maxWidth: "600px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      columnGap: theme.spacing(2),
+    },
+    popOut: {
+      width: "512px",
+      padding: theme.spacing(2),
+      paddingTop: theme.spacing(1),
+      margin: theme.spacing(1, 0),
+    },
+    filterRows: {
+      display: "flex",
+      flexDirection: "column",
+      rowGap: theme.spacing(2),
+    },
+    closeRow: {
+      display: "flex",
+      justifyContent: "end",
+    },
+    bufferRow: {
+      paddingTop: theme.spacing(1),
+    },
+    buttonRow: {
+      width: "100%",
+      display: "flex",
+      justifyContent: "end",
+      columnGap: theme.spacing(1),
+    },
+    search: {
+      "& .MuiOutlinedInput-root": {
+        "& input": {
+          padding: theme.spacing(1.5),
+        },
+      },
+      backgroundColor: theme.palette.common.white,
+      width: "100%",
+      flexGrow: "1",
+    },
+    select: {
+      "& .MuiSelect-select": {
+        padding: theme.spacing(1.5),
+      },
+      backgroundColor: theme.palette.common.white,
+    },
+  };
+};
+
+export default ListFilter;

package/src/components/list-filter/multi-select-filter.tsx

@@ -0,0 +1,117 @@
+import { useTranslations } from "next-intl";
+import {
+  Box,
+  Typography,
+  IconButton,
+  InputAdornment,
+  Select,
+  MenuItem,
+  Theme,
+  useTheme,
+  FormControl,
+  Chip,
+} from "@mui/material";
+import { CloseOutlined } from "@mui/icons-material";
+import React, { useState } from "react";
+import {
+  FilterOption,
+  MultiSelectFilter,
+  FilterProps,
+} from "./list-filter-types";
+
+const MultiSelectFilterComponent: React.FC<FilterProps<MultiSelectFilter>> = ({
+  filter,
+  onSet,
+  onError,
+  current,
+}) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const t = useTranslations("Integrate");
+
+  const mappedOptionDictionary = filter.options.reduce(
+    (dictionary, option) => ({
+      ...dictionary,
+      [option.id]: {
+        id: option.id,
+        value: t(option.value),
+      },
+    }),
+    {},
+  ) as { [id: string | number]: FilterOption };
+
+  const [value, setValue] = useState(current);
+
+  const updateValue = (optionIds: (string | number)[] | null) => {
+    const newValue = optionIds?.map((id) => mappedOptionDictionary[id]) || null;
+
+    setValue(newValue);
+    onSet(newValue);
+  };
+
+  return (
+    <FormControl>
+      <Typography>{filter.label}</Typography>
+      <Select
+        sx={styles.select}
+        multiple
+        value={(value || []).map(({ id }) => id)}
+        onChange={(e) => updateValue(e.target.value as (string | number)[])}
+        renderValue={(selected) => (
+          <Box sx={styles.chipSelect}>
+            {selected.map((id) => (
+              <Chip
+                key={id}
+                label={mappedOptionDictionary[id].value}
+                size="small"
+              />
+            ))}
+          </Box>
+        )}
+        endAdornment={
+          value ? (
+            <InputAdornment sx={styles.inputClearButton} position="end">
+              <IconButton
+                onClick={() => {
+                  updateValue(null);
+                }}
+              >
+                <CloseOutlined></CloseOutlined>
+              </IconButton>
+            </InputAdornment>
+          ) : (
+            ""
+          )
+        }
+      >
+        {filter.options.map((option) => (
+          <MenuItem key={option.id} value={option.id}>
+            {t(option.value)}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+const getStyles = (theme: Theme) => ({
+  inputClearButton: {
+    position: "absolute",
+    right: theme.spacing(3),
+  },
+  chipSelect: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: theme.spacing(1),
+    marginRight: theme.spacing(1),
+  },
+  select: {
+    "& .MuiSelect-select": {
+      padding: theme.spacing(1),
+      minHeight: theme.spacing(3),
+    },
+  },
+});
+
+export default MultiSelectFilterComponent;

package/src/components/list-filter/select-filter.tsx

@@ -0,0 +1,82 @@
+import {
+  Typography,
+  IconButton,
+  InputAdornment,
+  Select,
+  MenuItem,
+  Theme,
+  useTheme,
+  FormControl,
+} from "@mui/material";
+import { CloseOutlined } from "@mui/icons-material";
+import React, { useState } from "react";
+import { FilterOption, SelectFilter, FilterProps } from "./list-filter-types";
+
+const SelectFilterComponent: React.FC<FilterProps<SelectFilter>> = ({
+  filter,
+  onSet,
+  onError,
+  current,
+}) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const [value, setValue] = useState(current);
+
+  const mappedOptionDictionary = filter.options.reduce(
+    (dictionary, option) => ({
+      ...dictionary,
+      [option.id]: option,
+    }),
+    {},
+  ) as { [id: string | number]: FilterOption };
+
+  const updateValue = (optionId: string | number) => {
+    const newValue = mappedOptionDictionary[optionId] || null;
+    setValue(newValue && [newValue]);
+    onSet(newValue && [newValue]);
+  };
+
+  return (
+    <FormControl>
+      <Typography>{filter.label}</Typography>
+      <Select
+        value={value?.[0]?.id || ""}
+        onChange={(e) => updateValue(e.target.value)}
+        endAdornment={
+          value ? (
+            <InputAdornment sx={styles.inputClearButton} position="end">
+              <IconButton
+                onClick={() => {
+                  updateValue(null);
+                }}
+              >
+                <CloseOutlined></CloseOutlined>
+              </IconButton>
+            </InputAdornment>
+          ) : (
+            ""
+          )
+        }
+        renderValue={(selected) =>
+          selected && mappedOptionDictionary[selected]?.value
+        }
+      >
+        {filter.options.map((option) => (
+          <MenuItem key={option.id} value={option.id}>
+            {option.value}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+const getStyles = (theme: Theme) => ({
+  inputClearButton: {
+    position: "absolute",
+    right: theme.spacing(3),
+  },
+});
+
+export default SelectFilterComponent;

package/src/hooks/use-breadcrumbs.ts

@@ -0,0 +1,45 @@
+import { Crumb } from "../components/breadcrumbs/breadcrumbs";
+
+const baseUrl = "/e4integrate";
+
+const lookup: { [key: string]: Crumb } = {
+  dashboard: {
+    name: "Dashboard",
+    url: `${baseUrl}/dashboard`,
+  },
+  executions: {
+    name: "Executions",
+    url: `${baseUrl}/executions`,
+  },
+  integrations: {
+    name: "Integrations",
+    url: `${baseUrl}/integrations`,
+  },
+  scheduler: {
+    name: "Schedules",
+    url: `${baseUrl}/scheduler`,
+  },
+};
+
+// hook that generates breadcrumbs based on url & name of integration if applicable
+const useBreadcrumbs = (url: string, integrationName?: string) => {
+  // Dashboard crumb is always the root (breadcrumbs not shown on Dashboard page itself)
+  const breadcrumbs: Crumb[] = [lookup.dashboard];
+
+  const splitUrl = url.split("/").splice(4);
+  const path = splitUrl[0];
+  if (!lookup[path])
+    throw new Error(`Breadcrumb entry does not exist for path ${path}`);
+  if (path !== "dashboard") {
+    breadcrumbs.push(lookup[path]);
+  }
+
+  if (integrationName) {
+    breadcrumbs.push({ name: integrationName, url: "" });
+  }
+  delete breadcrumbs.at(-1).url;
+
+  return breadcrumbs;
+};
+
+export default useBreadcrumbs;

package/src/hooks/use-timestamp.tsx

@@ -0,0 +1,25 @@
+export default function useTimestamp(dateTime: string) {
+  const then = new Date(dateTime);
+  const diffTime = Date.now() - then.getTime();
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+  let result: string;
+  if (diffDays === 0) {
+    const diffMin = Math.floor(diffTime / (1000 * 60));
+    if (diffMin === 0) {
+      result = "Now";
+    } else if (diffMin >= 60) {
+      result = Math.floor(diffTime / (1000 * 60 * 60)) + "h ago";
+    } else {
+      result = diffMin + "m ago";
+    }
+  } else {
+    if (diffDays === 1) {
+      result = "Yesterday";
+    } else {
+      result = diffDays + " days ago";
+    }
+  }
+
+  return result;
+}