nautobot 2.1.0b1__py3-none-any.whl → 2.1.1__py3-none-any.whl

nautobot/ui/src/components/ObjectTable/ObjectListTable.js

@@ -1,300 +0,0 @@
-import { ButtonGroup, SkeletonText, Spacer } from "@chakra-ui/react";
-import { useLocation } from "react-router-dom";
-import { useEffect, useRef, useState } from "react";
-import {
-    Box,
-    calc,
-    Divider,
-    Flex,
-    getCssVar,
-    Heading,
-    NtcThumbnailIcon,
-    MeatballsIcon,
-    Button as UIButton,
-    TableRenderer,
-    useTableRenderer,
-    createColumnHelper,
-    PlusIcon,
-    Button,
-    EditIcon,
-    Tag,
-    TagLabel,
-} from "@nautobot/nautobot-ui";
-import { useCallback, useMemo } from "react";
-
-import {
-    FiltersPanelContent,
-    NON_FILTER_QUERY_PARAMS,
-    useFiltersPanel,
-} from "@components/FiltersPanel";
-import { Pagination } from "@components/Pagination";
-
-import LoadingWidget from "../LoadingWidget";
-import ObjectTableItem from "./ObjectTableItem";
-
-const getTableItemLink = (idx, obj) => {
-    if (idx === 0) {
-        // TODO: ui-schema should be providing the name of the field used to describe the object (name)
-        return window.location.pathname + obj.id + "/";
-    }
-    if (typeof obj !== "object" || !obj || !obj.url) {
-        return null;
-    }
-    // Remove domain + /api prefix
-    const url = obj.url.replace(window.location.origin + "/api", "");
-
-    return url;
-};
-
-// A composite component for displaying a object list table. Just the data!
-export default function ObjectListTable({
-    tableData,
-    defaultHeaders,
-    objectType,
-    tableHeaders,
-    filterData,
-    totalCount,
-    active_page_number,
-    page_size,
-    tableTitle,
-    data_loaded,
-    data_fetched,
-    include_button = true,
-}) {
-    let location = useLocation();
-    const columnHelper = useMemo(() => createColumnHelper(), []);
-    // Reference point to scroll to on table reload
-    const topRef = useRef();
-
-    const [columnVisibility, setColumnVisibility] = useState({});
-    useEffect(() => {
-        let defaultNames = defaultHeaders.map((e) => e.key);
-        let allNames = tableHeaders.map((e) => e.key);
-
-        if (defaultNames.length === 0) {
-            defaultNames = allNames;
-        }
-        let disabledNames = allNames.filter((v) => !defaultNames.includes(v));
-        let columnState = {};
-        for (const key of disabledNames) {
-            columnState[key] = false;
-        }
-        setColumnVisibility(columnState);
-    }, [defaultHeaders, tableHeaders]);
-    const columns = useMemo(
-        () =>
-            tableHeaders.map(({ key, title }, idx) =>
-                columnHelper.accessor(key, {
-                    cell: (props) => {
-                        // Get the column data from the object
-                        // e.g from {"status": {"display": "Active"}, "id": ....} get => {"display": "Active"}
-                        const column_data =
-                            idx === 0
-                                ? props.row.original
-                                : props.row.original[props.column.id];
-                        return (
-                            <ObjectTableItem
-                                name={key}
-                                obj={props.getValue()}
-                                url={getTableItemLink(idx, column_data)}
-                            />
-                        );
-                    },
-                    header: title,
-                })
-            ),
-        [columnHelper, tableHeaders]
-    );
-    const onRowSelectionChange = useCallback(() => {
-        // Do something.
-    }, []);
-
-    const ActionMenu = useCallback(
-        ({ cellContext }) => (
-            <Button
-                leftIcon={<EditIcon size="sm" />}
-                size="xs"
-                variant="table"
-                onClick={() =>
-                    alert(`Clicked ${cellContext.row.original.name}!`)
-                }
-            />
-        ),
-        []
-    );
-
-    const filtersPanel = useFiltersPanel({
-        content: (
-            <FiltersPanelContent
-                lookupFields={filterData}
-                objectType={objectType}
-            />
-        ),
-        id: "object-list-table-filters-panel",
-        title: "Filters",
-    });
-
-    const table = useTableRenderer({
-        columns: columns,
-        data: tableData,
-        enableMultiRowSelection: true,
-        onRowSelectionChange,
-        state: { columnVisibility },
-        onColumnVisibilityChange: setColumnVisibility,
-        actionMenu: ActionMenu,
-    });
-
-    const activeFiltersCount = useMemo(
-        () =>
-            [...new URLSearchParams(location.search)].filter(
-                ([searchParam]) =>
-                    !NON_FILTER_QUERY_PARAMS.includes(searchParam)
-            ).length,
-        [location]
-    );
-
-    useEffect(() => {
-        if (filtersPanel.isOpen) {
-            // This re-renders the filters panel when it is already open and the
-            // current `ObjectList` view collection is changed to another.
-            filtersPanel.open();
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [objectType, tableHeaders]);
-
-    useEffect(
-        () => () => {
-            // This closes the filters panel when users navigate away from the
-            // `ObjectList` view. Use `setTimeout` in order to delay the filters
-            // panel closing function by one cycle. Otherwise, if called
-            // immediately, some ancestor component lifecycle will mount it
-            // again, effectively cancelling the `filtersPanel.close()` call.
-            setTimeout(() => filtersPanel.close());
-        }, // eslint-disable-next-line react-hooks/exhaustive-deps
-        [] // Keep the dependency array empty to execute only on unmount.
-    );
-
-    return (
-        <Box borderRadius="md" height="full" ref={topRef}>
-            {!include_button ? null : (
-                <Flex align="center">
-                    <Heading
-                        as="h1"
-                        size="H1"
-                        display="flex"
-                        alignItems="center"
-                        gap="5px"
-                    >
-                        <NtcThumbnailIcon height="auto" width="24" />
-                        {tableTitle}
-                    </Heading>
-                    <Spacer />
-                    {!data_fetched ? (
-                        <Box marginRight="md">
-                            <LoadingWidget name={tableTitle} />
-                        </Box>
-                    ) : null}
-                    <Box>
-                        <ButtonGroup alignItems="center" spacing="md">
-                            <UIButton
-                                variant={
-                                    activeFiltersCount > 0
-                                        ? "primary"
-                                        : "secondary"
-                                }
-                                onClick={() =>
-                                    filtersPanel.isOpen
-                                        ? filtersPanel.close()
-                                        : filtersPanel.open()
-                                }
-                            >
-                                {activeFiltersCount > 0 ? (
-                                    <Tag
-                                        background="white-0"
-                                        boxShadow="none"
-                                        marginRight="xs"
-                                        size="sm"
-                                        variant="secondary"
-                                    >
-                                        <TagLabel>
-                                            {activeFiltersCount}
-                                        </TagLabel>
-                                    </Tag>
-                                ) : null}
-                                Filters
-                            </UIButton>
-                            <UIButton
-                                variant="primary"
-                                leftIcon={<MeatballsIcon />}
-                            >
-                                Actions
-                            </UIButton>
-                            <Divider height={10} orientation="vertical" />
-                            <UIButton
-                                to={`${location.pathname}add/`}
-                                leftIcon={<PlusIcon />}
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    // Because there is currently no support for Add view in the new UI for production,
-                                    // the code below checks if the app is running in production and redirects the user to
-                                    // the Add page; after the page is reloaded, nautobot takes care of rendering the legacy UI.
-                                    // TODO: Get rid of this if statement when we have a Create/Update View in the new UI
-                                    if (process.env.NODE_ENV === "production") {
-                                        document.location.href += "add/";
-                                    }
-                                }}
-                            >
-                                Add {tableTitle}
-                            </UIButton>
-                        </ButtonGroup>
-                    </Box>
-                </Flex>
-            )}
-
-            <SkeletonText
-                borderRadius="md"
-                endColor="gray-0"
-                height={calc.subtract(
-                    getCssVar("sizes.full"),
-                    // The following compensate for the section header.
-                    getCssVar("lineHeights.tall"),
-                    getCssVar("space.md"),
-                    // The following compensate for the pagination component.
-                    getCssVar("space.md"),
-                    getCssVar("sizes.40")
-                )}
-                isLoaded={data_fetched}
-                marginTop="md"
-                noOfLines={parseInt(page_size, 10)}
-                overflow="hidden"
-                skeletonHeight={calc.subtract(
-                    calc.add(
-                        getCssVar("lineHeights.normal"),
-                        calc.multiply(getCssVar("space.sm"), 2)
-                    ),
-                    "1px"
-                )}
-                spacing="1px"
-                startColor="gray-1"
-                sx={{
-                    ">": {
-                        _first: data_fetched
-                            ? { height: "full" }
-                            : { ">": { _first: { display: "none" } } },
-                    },
-                }}
-            >
-                <TableRenderer
-                    table={table}
-                    containerProps={{ height: "full" }}
-                />
-            </SkeletonText>
-            <Pagination
-                url={location.pathname}
-                data_count={totalCount}
-                page_size={page_size}
-                active_page={active_page_number}
-                scroll_ref={topRef}
-            ></Pagination>
-        </Box>
-    );
-}

nautobot/ui/src/components/ObjectTable/ObjectTable.js

@@ -1,96 +0,0 @@
-import { useEffect, useState, useMemo, useCallback } from "react";
-import {
-    TableRenderer,
-    useTableRenderer,
-    createColumnHelper,
-    Button,
-    EditIcon,
-} from "@nautobot/nautobot-ui";
-
-import ObjectTableItem from "./ObjectTableItem";
-
-function getTableItemLink(idx, obj) {
-    if (typeof obj !== "object" || !obj || !obj.url) {
-        return null;
-    }
-    // Remove domain + /api prefix
-    return obj.url.replace(window.location.origin + "/api", "");
-}
-
-function createTableColumn(tableHeaders, columnHelper) {
-    return tableHeaders.map(({ key, title }, idx) =>
-        columnHelper.accessor(key, {
-            cell: (props) => {
-                // Get the column data from the object
-                // e.g from {status: {display: "Active", id: 1, ...}, id: ....} get => {display: "Active", id: 1}
-                // In the example above it gets the col(status) value
-                const column_data =
-                    idx === 0
-                        ? props.row.original
-                        : props.row.original[props.column.id];
-                return (
-                    <ObjectTableItem
-                        name={key}
-                        obj={props.getValue()}
-                        url={getTableItemLink(idx, column_data)}
-                    />
-                );
-            },
-            header: title,
-        })
-    );
-}
-
-function renderActionButton({ cellContext }) {
-    return (
-        <Button
-            leftIcon={<EditIcon size="sm" />}
-            size="xs"
-            variant="table"
-            onClick={() => alert(`Clicked ${cellContext.row.original.name}!`)}
-        />
-    );
-}
-
-// A standard Nautobot Object table. This _may_ be beneficial to move into nautobot-ui
-export default function ObjectTable({
-    defaultHeaders,
-    tableHeaders,
-    tableData,
-}) {
-    const columnHelper = useMemo(() => createColumnHelper(), []);
-    const [columnVisibility, setColumnVisibility] = useState({});
-    const columns = useMemo(
-        () => createTableColumn(tableHeaders, columnHelper),
-        [columnHelper, tableHeaders]
-    );
-    const ActionMenu = useCallback(renderActionButton, []);
-
-    useEffect(() => {
-        let allNames = tableHeaders.map((e) => e.key);
-        let defaultNames = defaultHeaders.map((e) => e.key);
-
-        if (defaultNames.length === 0) {
-            defaultNames = allNames;
-        }
-        let disabledNames = allNames.filter((v) => !defaultNames.includes(v));
-        let columnState = {};
-        for (const key of disabledNames) {
-            columnState[key] = false;
-        }
-        setColumnVisibility(columnState);
-    }, [defaultHeaders, tableHeaders]);
-
-    const table = useTableRenderer({
-        columns: columns,
-        data: tableData,
-        enableMultiRowSelection: true,
-        state: { columnVisibility },
-        onColumnVisibilityChange: setColumnVisibility,
-        actionMenu: ActionMenu,
-    });
-
-    return (
-        <TableRenderer table={table} containerProps={{ overflow: "auto" }} />
-    );
-}

nautobot/ui/src/components/ObjectTable/ObjectTableItem.js

@@ -1,70 +0,0 @@
-// import Badge from 'react-bootstrap/Badge';
-import { Link } from "@components/RouterLink";
-import { Button, CheckIcon, CloseIcon, Flex } from "@nautobot/nautobot-ui";
-import { calculateLuminance } from "@utils/color";
-
-function TextOrButton({ obj }) {
-    if (typeof obj === "object") {
-        const display = obj.display || obj.label;
-        if (!obj.color) {
-            return display;
-        }
-        // TODO: xs button padding left/right, borderradius and margin should be defaults in nautobot-ui?
-        //       also should hover box shadow be disabled?
-        return (
-            <Button
-                size="xs"
-                bg={"#" + obj.color}
-                color={
-                    calculateLuminance(obj.color) > 186 ? "#000000" : "#ffffff"
-                }
-                borderRadius="sm"
-                pl="xs"
-                pr="xs"
-            >
-                {display}
-            </Button>
-        );
-    }
-    return obj;
-}
-
-function TableColumnDisplay({ obj }) {
-    if (obj === undefined || obj === null || obj === "") {
-        return <>&mdash;</>;
-    } else if (typeof obj === "object" && !Array.isArray(obj)) {
-        return <TextOrButton obj={obj} />;
-    } else if (Array.isArray(obj)) {
-        if (typeof obj[0] == "object") {
-            return (
-                <Flex gap="xs">
-                    {obj.map((item, idx) => (
-                        <TextOrButton obj={item} key={idx} />
-                    ))}
-                </Flex>
-            );
-        } else {
-            return obj.join(", ");
-        }
-    } else if (typeof obj === "boolean") {
-        if (obj === true) {
-            return <CheckIcon />;
-        } else {
-            return <CloseIcon />;
-        }
-    } else {
-        return obj;
-    }
-}
-
-export default function ObjectTableItem({ name, obj, url }) {
-    if (url && obj) {
-        return (
-            <Link to={url}>
-                <TableColumnDisplay obj={obj} />
-            </Link>
-        );
-    } else {
-        return <TableColumnDisplay obj={obj} />;
-    }
-}

nautobot/ui/src/components/ObjectTable/index.js

@@ -1,3 +0,0 @@
-export { default as ObjectListTable } from "./ObjectListTable";
-export { default as ObjectTable } from "./ObjectTable";
-export { default as ObjectTableItem } from "./ObjectTableItem";

nautobot/ui/src/components/Pagination/PageNumberForm.js

@@ -1,228 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useSearchParams } from "react-router-dom";
-import { Box, Flex, FormControl, Input, Text } from "@nautobot/nautobot-ui";
-import { IconButton } from "@chakra-ui/react";
-import {
-    ArrowLeftIcon,
-    ArrowRightIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-} from "@chakra-ui/icons";
-
-export default function PageNumberForm({
-    firstPage,
-    lastPage,
-    pageSize,
-    scroll_ref,
-    totalDataCount,
-    trueCurrentPage,
-}) {
-    let [searchParams, setSearchParams] = useSearchParams();
-
-    // State to track the current page number
-    const [pageNumber, setPageNumber] = useState(trueCurrentPage);
-    // State to track the page number form control input validity
-    const [isInputInvalid, setIsInputInvalid] = useState(false);
-    // State to track if the input box is focused
-    const [isInputFocused, setIsInputFocused] = useState(false);
-
-    // Keeps the pageNumber var updated to trueCurrentPage (i.e. if trueCurrentPage changes via arrow click)
-    useEffect(() => {
-        setPageNumber(trueCurrentPage);
-    }, [trueCurrentPage]);
-
-    // Sets isInputFocused to true
-    function handleOnFocus() {
-        setIsInputFocused(true);
-    }
-
-    // Changes the page number based on the input component after a blur event (i.e. when user clicks out of input box and element loses focus)
-    function handleOnBlur(event) {
-        const enteredValue = parseInt(event.target.value);
-        // Checks that the entered value is a number and within the valid page range
-        if (
-            !isNaN(enteredValue) &&
-            enteredValue >= firstPage &&
-            enteredValue <= lastPage
-        ) {
-            setPageNumber(enteredValue);
-            setIsInputInvalid(false);
-
-            // Checks that the entered value is not already the current page
-            if (enteredValue !== trueCurrentPage) {
-                onPageNumberChange(enteredValue);
-            }
-
-            // Reset input value
-            event.target.value = "";
-        }
-        // Checks if nothing is entered into input and, if so, do nothing
-        else if (event.target.value === "") {
-            setIsInputInvalid(false);
-        }
-        // Otherwise, mark input as invalid
-        else {
-            setIsInputInvalid(true);
-        }
-        setIsInputFocused(false);
-    }
-
-    function handleOnKeyDown(event) {
-        if (event.key === "Enter") {
-            event.preventDefault();
-
-            const enteredValue = parseInt(event.target.value);
-            // Checks that the entered value is a number and within the valid page range
-            if (
-                !isNaN(enteredValue) &&
-                enteredValue >= firstPage &&
-                enteredValue <= lastPage
-            ) {
-                setPageNumber(enteredValue);
-                setIsInputInvalid(false);
-
-                // Checks that the entered value is not already the current page
-                if (enteredValue !== trueCurrentPage) {
-                    onPageNumberChange(enteredValue);
-                }
-
-                // Reset input value
-                event.target.value = "";
-            }
-            // Checks if nothing is entered into input and, if so, do nothing
-            else if (event.target.value === "") {
-                setIsInputInvalid(false);
-            }
-            // Otherwise, mark input as invalid
-            else {
-                setIsInputInvalid(true);
-            }
-            setIsInputFocused(false);
-        }
-    }
-
-    function onPageNumberChange(targetPageNumber) {
-        let limit = searchParams.get("limit");
-        /* TODO: we need a REST API endpoint to query get_settings_or_config("PAGINATE_COUNT") rather than hard-coding this to 50. */
-        // Scroll to the top of the ObjectListTable Container on table reload
-        scroll_ref.current.scrollIntoView({
-            alignToTop: true,
-            behavior: "smooth",
-        });
-
-        let newPageNumber;
-        if (targetPageNumber === "<") {
-            newPageNumber = trueCurrentPage - 1;
-        } else if (targetPageNumber === ">") {
-            newPageNumber = trueCurrentPage + 1;
-        } else {
-            newPageNumber = targetPageNumber;
-        }
-
-        setIsInputInvalid(false);
-
-        setSearchParams([
-            ...[...searchParams].filter(
-                ([searchParam]) =>
-                    searchParam !== "limit" && searchParam !== "offset"
-            ),
-            ["limit", limit ? limit : 50],
-            ["offset", pageSize * (newPageNumber - 1)],
-        ]);
-    }
-
-    return (
-        <Flex align="center">
-            <Box
-                color="gray-3"
-                pl="xs"
-                pr="xs"
-                mr="lg"
-                fontSize="md"
-                border="1px"
-                borderColor="gray-1"
-                borderRadius="sm"
-            >
-                {totalDataCount} rows
-            </Box>
-            <Text color="gray-3" whiteSpace="nowrap">
-                You are on page
-            </Text>
-            {trueCurrentPage > firstPage ? (
-                <Box>
-                    <IconButton
-                        onClick={() => onPageNumberChange(firstPage)}
-                        icon={<ArrowLeftIcon boxSize={3} />}
-                        color="gray-4"
-                        variant="ghost"
-                        pl="sm"
-                        _hover={{
-                            transform: "scale(1.2)",
-                            color: "#007DFF",
-                        }}
-                    />
-                    <IconButton
-                        onClick={() => onPageNumberChange("<")}
-                        icon={<ChevronLeftIcon />}
-                        color="gray-4"
-                        variant="ghost"
-                        pl="xs"
-                        _hover={{
-                            transform: "scale(1.2)",
-                            color: "#007DFF",
-                        }}
-                    />
-                </Box>
-            ) : (
-                <Box pl="xs" />
-            )}
-            <FormControl
-                isInvalid={isInputInvalid}
-                align="center"
-                pl="xs"
-                pr="xs"
-            >
-                <Input
-                    type="number"
-                    placeholder={isInputFocused ? "" : pageNumber}
-                    textAlign="center"
-                    width="50px"
-                    onFocus={handleOnFocus}
-                    onBlur={handleOnBlur}
-                    onKeyDown={handleOnKeyDown}
-                />
-            </FormControl>
-            {trueCurrentPage < lastPage ? (
-                <Box>
-                    <IconButton
-                        onClick={() => onPageNumberChange(">")}
-                        icon={<ChevronRightIcon />}
-                        color="gray-4"
-                        variant="ghost"
-                        pr="xs"
-                        _hover={{
-                            transform: "scale(1.2)",
-                            color: "#007DFF",
-                        }}
-                    />
-                    <IconButton
-                        onClick={() => onPageNumberChange(lastPage)}
-                        icon={<ArrowRightIcon boxSize={3} />}
-                        color="gray-4"
-                        variant="ghost"
-                        pr="sm"
-                        _hover={{
-                            transform: "scale(1.2)",
-                            color: "#007DFF",
-                        }}
-                    />
-                </Box>
-            ) : (
-                <Box pr="xs" />
-            )}
-            <Text color="gray-3" whiteSpace="nowrap">
-                out of {lastPage}
-            </Text>
-        </Flex>
-    );
-}