@okta/odyssey-react-mui 1.15.8 → 1.20.0

package/src/labs/DataComponents/DataView.tsx

@@ -0,0 +1,394 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useEffect, useMemo, useState } from "react";
+import {
+  MRT_Row,
+  MRT_RowData,
+  MRT_RowSelectionState,
+} from "material-react-table";
+import { useTranslation } from "react-i18next";
+
+import {
+  availableLayouts as allAvailableLayouts,
+  densityValues,
+} from "./constants";
+import {
+  DataLayout,
+  UniversalProps,
+  ViewProps,
+  TableState,
+} from "./componentTypes";
+import { Box } from "../../Box";
+import { BulkActionsMenu } from "./BulkActionsMenu";
+import { Callout } from "../../Callout";
+import { DataFilters } from "../DataFilters";
+import { EmptyState } from "../../EmptyState";
+import { fetchData } from "./fetchData";
+import { LayoutSwitcher } from "./LayoutSwitcher";
+import { TableSettings } from "./TableSettings";
+import { Pagination, usePagination } from "../../Pagination";
+import { TableContent } from "./TableContent";
+import { StackContent } from "./StackContent";
+import { useFilterConversion } from "./useFilterConversion";
+import { useRowReordering } from "../../DataTable/useRowReordering";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import styled from "@emotion/styled";
+
+export type DataViewProps = UniversalProps & ViewProps<DataLayout>;
+
+const DataViewContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing4,
+}));
+
+const BulkActionsContainer = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "space-between",
+}));
+
+const AdditionalActionsContainer = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "flex-end",
+}));
+
+const DataView = ({
+  availableLayouts = allAvailableLayouts,
+  bulkActionMenuItems,
+  currentPage = 1,
+  emptyPlaceholder,
+  errorMessage: errorMessageProp,
+  filters: filtersProp,
+  getData,
+  getRowId: getRowIdProp,
+  hasFilters,
+  hasPagination,
+  hasSearch,
+  hasSearchSubmitButton,
+  hasRowReordering,
+  hasRowSelection,
+  initialLayout,
+  isEmpty: isEmptyProp,
+  isLoading: isLoadingProp,
+  isNoResults: isNoResultsProp,
+  isRowReorderingDisabled,
+  noResultsPlaceholder,
+  onChangeRowSelection,
+  onReorderRows,
+  paginationType = "paged",
+  resultsPerPage = 20,
+  searchDelayTime,
+  stackOptions,
+  tableOptions,
+  totalRows,
+}: DataViewProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+
+  const [currentLayout, setCurrentLayout] = useState<DataLayout>(
+    initialLayout ?? availableLayouts[0],
+  );
+
+  const [data, setData] = useState<MRT_RowData[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(isLoadingProp ?? true);
+  const [isEmpty, setIsEmpty] = useState<boolean>(isEmptyProp ?? true);
+  const [isNoResults, setIsNoResults] = useState<boolean>(
+    isNoResultsProp ?? false,
+  );
+  const [errorMessage, setErrorMessage] =
+    useState<UniversalProps["errorMessage"]>(errorMessageProp);
+
+  const [search, setSearch] = useState<string>("");
+
+  const [initialFilters, setInitialFilters] =
+    useState<UniversalProps["filters"]>(filtersProp);
+  const [filters, setFilters] =
+    useState<UniversalProps["filters"]>(filtersProp);
+
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();
+
+  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
+
+  useEffect(() => {
+    onChangeRowSelection?.(rowSelection);
+  }, [rowSelection, onChangeRowSelection]);
+
+  const [pagination, setPagination] = useState({
+    pageIndex: currentPage,
+    pageSize: resultsPerPage,
+  });
+
+  const [tableState, setTableState] = useState<TableState>({
+    columnSorting: [],
+    columnVisibility: {},
+    rowDensity: tableOptions?.initialDensity ?? densityValues[0],
+  });
+
+  const shouldShowFilters = hasSearch || hasFilters;
+
+  const availableFilters = useFilterConversion({
+    filters: filters,
+    columns: tableOptions?.columns,
+  });
+
+  useEffect(() => {
+    if (!initialFilters && availableFilters) {
+      setInitialFilters(availableFilters);
+    }
+  }, [availableFilters, initialFilters]);
+
+  const dataQueryParams = useMemo(
+    () => ({
+      page: pagination.pageIndex,
+      resultsPerPage: pagination.pageSize,
+      search,
+      filters: availableFilters,
+      sort: tableState?.columnSorting,
+    }),
+    [
+      pagination.pageIndex,
+      pagination.pageSize,
+      search,
+      availableFilters,
+      tableState?.columnSorting,
+    ],
+  );
+
+  const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;
+
+  // Update pagination state if props change
+  useEffect(() => {
+    setPagination({
+      pageIndex: currentPage,
+      pageSize: resultsPerPage,
+    });
+  }, [currentPage, resultsPerPage]);
+
+  // Retrieve the data
+  useEffect(() => {
+    fetchData({
+      dataQueryParams,
+      errorMessageProp,
+      getData,
+      setData,
+      setErrorMessage,
+      setIsLoading,
+    });
+  }, [dataQueryParams, errorMessageProp, getData]);
+
+  // When data is updated
+  useEffect(() => {
+    setIsEmpty(
+      pagination.pageIndex === currentPage &&
+        pagination.pageSize === resultsPerPage &&
+        search === "" &&
+        filters === initialFilters &&
+        data.length === 0,
+    );
+  }, [
+    currentPage,
+    data,
+    filters,
+    initialFilters,
+    pagination,
+    resultsPerPage,
+    search,
+  ]);
+
+  // Change loading, empty and noResults state on prop change
+  useEffect(() => {
+    setIsLoading((prevValue) => isLoadingProp ?? prevValue);
+  }, [isLoadingProp]);
+
+  useEffect(() => {
+    setIsEmpty((prevValue) => isEmptyProp ?? prevValue);
+  }, [isEmptyProp]);
+
+  useEffect(() => {
+    setIsNoResults((prevValue) => isNoResultsProp ?? prevValue);
+  }, [isNoResultsProp]);
+
+  const emptyState = useMemo(() => {
+    const noResultsInnerContent = noResultsPlaceholder || (
+      <EmptyState
+        description={t("table.noresults.text")}
+        heading={t("table.noresults.heading")}
+      />
+    );
+
+    if (isEmpty) {
+      return emptyPlaceholder || noResultsInnerContent;
+    }
+
+    if (isNoResults) {
+      return noResultsInnerContent;
+    }
+
+    return;
+  }, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]);
+
+  const additionalActions = useMemo(
+    () => (
+      <>
+        {currentLayout === "table" && tableOptions && (
+          <TableSettings
+            setTableState={setTableState}
+            tableOptions={tableOptions}
+            tableState={tableState}
+          />
+        )}
+
+        {availableLayouts.length > 1 && (
+          <LayoutSwitcher
+            availableLayouts={availableLayouts}
+            currentLayout={currentLayout}
+            setCurrentLayout={setCurrentLayout}
+          />
+        )}
+      </>
+    ),
+    [currentLayout, tableOptions, tableState, availableLayouts],
+  );
+
+  const { lastRow: lastRowOnPage } = usePagination({
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    totalRows,
+  });
+
+  const rowReorderingUtilities = useRowReordering({
+    totalRows,
+    onReorderRows,
+    data,
+    setData,
+    draggingRow,
+    setDraggingRow,
+    resultsPerPage: pagination.pageSize,
+    page: pagination.pageIndex,
+  });
+
+  return (
+    <DataViewContainer odysseyDesignTokens={odysseyDesignTokens}>
+      {errorMessage && (
+        <Box>
+          <Callout severity="error" text={errorMessage} />
+        </Box>
+      )}
+
+      {shouldShowFilters && (
+        <DataFilters
+          additionalActions={additionalActions}
+          filters={hasFilters ? availableFilters : undefined}
+          hasSearchSubmitButton={hasSearchSubmitButton}
+          isDisabled={isEmpty}
+          onChangeFilters={hasFilters ? setFilters : undefined}
+          onChangeSearch={hasSearch ? setSearch : undefined}
+          searchDelayTime={searchDelayTime}
+        />
+      )}
+
+      {(bulkActionMenuItems || hasRowSelection) && (
+        <BulkActionsContainer>
+          <BulkActionsMenu
+            data={data}
+            menuItems={bulkActionMenuItems}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+          />
+          {!shouldShowFilters && additionalActions}
+        </BulkActionsContainer>
+      )}
+
+      {!shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && (
+        <AdditionalActionsContainer>
+          {additionalActions}
+        </AdditionalActionsContainer>
+      )}
+
+      {currentLayout === "table" && tableOptions && (
+        <TableContent
+          columns={tableOptions.columns}
+          data={data}
+          draggingRow={draggingRow}
+          emptyState={emptyState}
+          getRowId={getRowId}
+          hasRowReordering={hasRowReordering}
+          hasRowSelection={hasRowSelection}
+          isEmpty={isEmpty}
+          isLoading={isLoading}
+          isNoResults={isNoResults}
+          isRowReorderingDisabled={isRowReorderingDisabled}
+          onReorderRows={onReorderRows}
+          pagination={pagination}
+          rowReorderingUtilities={rowReorderingUtilities}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          setTableState={setTableState}
+          tableOptions={tableOptions}
+          tableState={tableState}
+          totalRows={totalRows}
+        />
+      )}
+      {(currentLayout === "list" || currentLayout === "grid") &&
+        stackOptions && (
+          <StackContent
+            currentLayout={currentLayout}
+            data={data}
+            draggingRow={draggingRow}
+            emptyState={emptyState}
+            getRowId={getRowId}
+            hasRowReordering={hasRowReordering}
+            hasRowSelection={hasRowSelection}
+            isEmpty={isEmpty}
+            isLoading={isLoading}
+            isNoResults={isNoResults}
+            isRowReorderingDisabled={isRowReorderingDisabled}
+            onReorderRows={onReorderRows}
+            pagination={pagination}
+            rowReorderingUtilities={rowReorderingUtilities}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            stackOptions={stackOptions}
+            totalRows={totalRows}
+          />
+        )}
+
+      {hasPagination && (
+        <Pagination
+          currentPageLabel={t("pagination.page")}
+          isDisabled={isEmpty}
+          lastRow={lastRowOnPage}
+          loadMoreLabel={t("pagination.loadmore")}
+          nextLabel={t("pagination.next")}
+          onPaginationChange={setPagination}
+          pageIndex={pagination.pageIndex}
+          pageSize={pagination.pageSize}
+          previousLabel={t("pagination.previous")}
+          rowsPerPageLabel={t("pagination.rowsperpage")}
+          totalRows={totalRows}
+          variant={paginationType}
+        />
+      )}
+    </DataViewContainer>
+  );
+};
+
+const MemoizedDataView = memo(DataView);
+MemoizedDataView.displayName = "DataView";
+
+export { MemoizedDataView as DataView };

package/src/labs/DataComponents/DetailPanel.tsx

@@ -0,0 +1,31 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { StackProps } from "./componentTypes";
+import { DataRow } from "./dataTypes";
+
+const DetailPanel = ({
+  row,
+  renderDetailPanel,
+}: {
+  row: DataRow;
+  renderDetailPanel: StackProps["renderDetailPanel"];
+}) => {
+  if (!renderDetailPanel) return null;
+  return renderDetailPanel({ row });
+};
+
+const MemoizedDetailPanel = memo(DetailPanel);
+MemoizedDetailPanel.displayName = "DetailPanel";
+
+export { MemoizedDetailPanel as DetailPanel };

package/src/labs/DataComponents/LayoutSwitcher.tsx

@@ -0,0 +1,73 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Dispatch, memo, useCallback, SetStateAction, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import { AvailableLayouts, DataLayout } from "./componentTypes";
+import { MenuButton } from "../../MenuButton";
+import { MenuItem } from "../../MenuItem";
+
+export type LayoutSwitcherProps = {
+  availableLayouts: AvailableLayouts;
+  currentLayout: DataLayout;
+  setCurrentLayout: Dispatch<SetStateAction<DataLayout>>;
+};
+
+const LayoutSwitcher = ({
+  availableLayouts,
+  currentLayout,
+  setCurrentLayout,
+}: LayoutSwitcherProps) => {
+  const { t } = useTranslation();
+
+  const changeLayout = useCallback(
+    (value: DataLayout) => {
+      setCurrentLayout(value);
+    },
+    [setCurrentLayout],
+  );
+
+  const memoizedMenuItems = useMemo(
+    () =>
+      availableLayouts.map((value: DataLayout) => ({
+        value,
+        onClick: () => changeLayout(value),
+        label: t(`dataview.layout.${value}`),
+      })),
+    [availableLayouts, changeLayout, t],
+  );
+
+  return (
+    <MenuButton
+      ariaLabel="Layout"
+      buttonLabel={`${currentLayout.charAt(0).toUpperCase()}${currentLayout.slice(1)}`}
+      menuAlignment="right"
+      shouldCloseOnSelect={false}
+    >
+      {memoizedMenuItems.map(({ value, onClick, label }) => (
+        <MenuItem
+          key={value}
+          isSelected={currentLayout === value}
+          onClick={onClick}
+        >
+          {label}
+        </MenuItem>
+      ))}
+    </MenuButton>
+  );
+};
+
+const MemoizedLayoutSwitcher = memo(LayoutSwitcher);
+MemoizedLayoutSwitcher.displayName = "LayoutSwitcher";
+
+export { MemoizedLayoutSwitcher as LayoutSwitcher };

package/src/labs/DataComponents/RowActions.tsx

@@ -0,0 +1,122 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Fragment, ReactElement, memo, useCallback } from "react";
+import { MRT_Row, MRT_RowData } from "material-react-table";
+import { useTranslation } from "react-i18next";
+
+import {
+  ArrowBottomIcon,
+  ArrowDownIcon,
+  ArrowTopIcon,
+  ArrowUpIcon,
+} from "../../icons.generated";
+import { Button } from "../../Button";
+import { MenuItem } from "../../MenuItem";
+import { DataTableProps } from "./DataTable";
+import { MenuButtonProps } from "../../MenuButton";
+
+export type RowActionsProps = {
+  isRowReorderingDisabled?: boolean;
+  row: MRT_Row<MRT_RowData> | MRT_RowData;
+  rowActionButtons?: (
+    row: MRT_RowData,
+  ) => ReactElement<typeof Button> | ReactElement<typeof Fragment>;
+  rowActionMenuItems?: (row: MRT_RowData) => MenuButtonProps["children"];
+  rowIndex: number;
+  totalRows?: DataTableProps["totalRows"];
+  updateRowOrder?: ({
+    newRowIndex,
+    rowId,
+  }: {
+    newRowIndex: number;
+    rowId: string;
+  }) => void;
+};
+
+const RowActions = ({
+  isRowReorderingDisabled,
+  row,
+  rowActionMenuItems,
+  rowIndex,
+  totalRows,
+  updateRowOrder,
+}: RowActionsProps) => {
+  const { t } = useTranslation();
+
+  const handleToFrontClick = useCallback(() => {
+    updateRowOrder && updateRowOrder({ rowId: row.id, newRowIndex: 0 });
+  }, [row.id, updateRowOrder]);
+
+  const handleForwardClick = useCallback(() => {
+    updateRowOrder &&
+      updateRowOrder({ rowId: row.id, newRowIndex: Math.max(0, rowIndex - 1) });
+  }, [row.id, rowIndex, updateRowOrder]);
+
+  const handleBackwardClick = useCallback(() => {
+    updateRowOrder &&
+      updateRowOrder({ rowId: row.id, newRowIndex: rowIndex + 1 });
+  }, [row.id, rowIndex, updateRowOrder]);
+
+  const handleToBackClick = useCallback(() => {
+    updateRowOrder &&
+      updateRowOrder({
+        rowId: row.id,
+        newRowIndex: totalRows ? totalRows - 1 : rowIndex,
+      });
+  }, [row.id, rowIndex, totalRows, updateRowOrder]);
+
+  return (
+    <>
+      {rowActionMenuItems && rowActionMenuItems(row)}
+      {rowActionMenuItems && updateRowOrder && <hr />}
+      {updateRowOrder && (
+        <>
+          <MenuItem
+            isDisabled={rowIndex <= 0 || isRowReorderingDisabled}
+            onClick={handleToFrontClick}
+          >
+            <ArrowTopIcon /> {t("table.reorder.tofront")}
+          </MenuItem>
+          <MenuItem
+            isDisabled={rowIndex <= 0 || isRowReorderingDisabled}
+            onClick={handleForwardClick}
+          >
+            <ArrowUpIcon /> {t("table.reorder.forward")}
+          </MenuItem>
+          <MenuItem
+            isDisabled={
+              (totalRows ? rowIndex >= totalRows - 1 : false) ||
+              isRowReorderingDisabled
+            }
+            onClick={handleBackwardClick}
+          >
+            <ArrowDownIcon /> {t("table.reorder.backward")}
+          </MenuItem>
+          {totalRows && (
+            <MenuItem
+              isDisabled={rowIndex >= totalRows - 1 || isRowReorderingDisabled}
+              onClick={handleToBackClick}
+            >
+              <ArrowBottomIcon /> {t("table.reorder.toback")}
+            </MenuItem>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+const MemoizedRowActions = memo(RowActions);
+MemoizedRowActions.displayName = "RowActions";
+
+export { MemoizedRowActions as RowActions };