nautobot 2.0.0a2__py3-none-any.whl → 2.0.0b1__py3-none-any.whl

nautobot/ui/src/components/SidebarNav.js

@@ -0,0 +1,147 @@
+import {
+    Accordion,
+    AccordionButton,
+    AccordionItem,
+    AccordionPanel,
+    AccordionIcon,
+    Heading,
+    SidebarButton,
+} from "@nautobot/nautobot-ui";
+import { Link as ReactRouterLink } from "react-router-dom";
+import { useSelector } from "react-redux";
+import {
+    isLoggedInSelector,
+    getCurrentContextSelector,
+    getMenuInfoSelector,
+} from "@utils/store";
+import { appContextIcons } from "@constants/icons";
+
+// The sidebar accordion
+export default function SidebarNav() {
+    const isLoggedIn = useSelector(isLoggedInSelector);
+    const currentContext = useSelector(getCurrentContextSelector);
+    const menuInfo = useSelector(getMenuInfoSelector);
+
+    let CurrentContextIcon = <></>;
+
+    if (currentContext) {
+        CurrentContextIcon = appContextIcons[currentContext];
+    }
+
+    return (
+        <>
+            <Heading variant="sidebar">
+                <CurrentContextIcon />
+                {currentContext}
+            </Heading>
+            {isLoggedIn &&
+                menuInfo !== {} &&
+                menuInfo[currentContext] !== undefined && (
+                    <Accordion allowMultiple variant="sidebarLevel0">
+                        {Object.entries(menuInfo[currentContext]).map(
+                            (group, group_idx, group_arr) => (
+                                <Accordion
+                                    allowMultiple
+                                    variant="sidebarLevel0"
+                                    key={group[0]}
+                                >
+                                    <AccordionItem>
+                                        <Heading>
+                                            <AccordionButton
+                                                isLast={
+                                                    group_idx ===
+                                                    group_arr.length - 1
+                                                }
+                                            >
+                                                {group[0]}
+                                                <AccordionIcon />
+                                            </AccordionButton>
+                                        </Heading>
+                                        <AccordionPanel>
+                                            {Object.entries(group[1]).map(
+                                                (menu, menu_idx, menu_arr) =>
+                                                    typeof menu[1] ===
+                                                    "string" ? (
+                                                        <SidebarButton
+                                                            as={ReactRouterLink}
+                                                            key={menu_idx}
+                                                            level={1}
+                                                            to={menu[1]}
+                                                            isLast={
+                                                                menu_idx ===
+                                                                menu_arr.length -
+                                                                    1
+                                                            }
+                                                        >
+                                                            {menu[0]}
+                                                        </SidebarButton>
+                                                    ) : (
+                                                        <Accordion
+                                                            allowMultiple
+                                                            variant="sidebarLevel1"
+                                                            key={menu_idx}
+                                                        >
+                                                            <AccordionItem>
+                                                                <Heading>
+                                                                    <AccordionButton
+                                                                        isLast={
+                                                                            menu_idx ===
+                                                                            menu_arr.length -
+                                                                                1
+                                                                        }
+                                                                    >
+                                                                        {
+                                                                            menu[0]
+                                                                        }
+                                                                        <AccordionIcon />
+                                                                    </AccordionButton>
+                                                                </Heading>
+                                                                <AccordionPanel>
+                                                                    {Object.entries(
+                                                                        menu[1]
+                                                                    ).map(
+                                                                        (
+                                                                            submenu,
+                                                                            submenu_idx,
+                                                                            submenu_arr
+                                                                        ) => (
+                                                                            <SidebarButton
+                                                                                as={
+                                                                                    ReactRouterLink
+                                                                                }
+                                                                                key={
+                                                                                    submenu_idx
+                                                                                }
+                                                                                level={
+                                                                                    2
+                                                                                }
+                                                                                to={
+                                                                                    submenu[1]
+                                                                                }
+                                                                                isLast={
+                                                                                    submenu_idx ===
+                                                                                    submenu_arr.length -
+                                                                                        1
+                                                                                }
+                                                                            >
+                                                                                {
+                                                                                    submenu[0]
+                                                                                }
+                                                                            </SidebarButton>
+                                                                        )
+                                                                    )}
+                                                                </AccordionPanel>
+                                                            </AccordionItem>
+                                                        </Accordion>
+                                                    )
+                                            )}
+                                        </AccordionPanel>
+                                    </AccordionItem>
+                                </Accordion>
+                            )
+                        )}
+                    </Accordion>
+                )}
+        </>
+    );
+}

nautobot/ui/src/components/Table.js

@@ -0,0 +1,48 @@
+import {
+    Checkbox,
+    Table,
+    Thead,
+    Tr,
+    Th,
+    Tbody,
+    Td,
+} from "@nautobot/nautobot-ui";
+
+import TableItem from "@components/TableItem";
+
+// A standard Nautobot table. This _may_ be beneficial to move into nautobot-ui
+export default function NautobotTable({ data, headers }) {
+    return (
+        <Table>
+            <Thead>
+                <Tr>
+                    <Th borderTopLeftRadius="md">
+                        <Checkbox></Checkbox>
+                    </Th>
+                    {headers.map(({ name, label }) => (
+                        <Th key={name}>{label}</Th>
+                    ))}
+                </Tr>
+            </Thead>
+            <Tbody>
+                {data.map((item) => (
+                    <Tr key={item.id}>
+                        <Td>
+                            <Checkbox></Checkbox>
+                        </Td>
+                        {headers.map((header, idx) => (
+                            <Td key={idx}>
+                                <TableItem
+                                    name={header.name}
+                                    obj={item[header.name]}
+                                    url={window.location.pathname + item["id"]}
+                                    link={idx === 0}
+                                />
+                            </Td>
+                        ))}
+                    </Tr>
+                ))}
+            </Tbody>
+        </Table>
+    );
+}

nautobot/ui/src/components/TableItem.js

@@ -0,0 +1,71 @@
+// import Badge from 'react-bootstrap/Badge';
+import { Link } from "@components/RouterLink";
+import { Button, CheckIcon, CloseIcon } 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"
+                m="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 (
+                <>
+                    {obj.map((item, idx) => (
+                        <TextOrButton obj={item} key={idx} />
+                    ))}
+                </>
+            );
+        } else {
+            return obj.join(", ");
+        }
+    } else if (typeof obj === "boolean") {
+        if (obj === true) {
+            return <CheckIcon />;
+        } else {
+            return <CloseIcon />;
+        }
+    } else {
+        return obj;
+    }
+}
+
+export default function TableItem({ name, obj, url }) {
+    if (url) {
+        return (
+            <Link to={url}>
+                <TableColumnDisplay obj={obj} />
+            </Link>
+        );
+    } else {
+        return <TableColumnDisplay obj={obj} />;
+    }
+}

nautobot/ui/src/components/__tests__/AppFullWidthComponents.test.js

@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import AppFullWidthComponentsWithProps from "../AppFullWidthComponents";
+
+// Set NautobotApps to {}; since we are not testing for plugin integration with nautobot
+jest.mock("../../app_imports", () => ({
+    __esModule: true,
+    default: {},
+}));
+
+describe("AppFullWidthComponentsWithProps Test", () => {
+    it("should render an empty component when route, props is not defined", () => {
+        render(AppFullWidthComponentsWithProps());
+        // expect(container.firstChild).toBe(null);
+        // Lint error for using firstChild but we should be using screen
+    });
+});

nautobot/ui/src/components/__tests__/AppTab.test.js

@@ -0,0 +1,21 @@
+describe("create_app_tab", () => {
+    it("should render a tab with correct content", async () => {
+        // const mockTab = { title: 'Test Tab', url: 'http://example.com/test' };
+        // const mockHTML = '<div id="legacy-content">Test HTML Tab</div>';
+        // // Spy on the global fetch function and provide a custom implementation to simulate a response
+        // jest.spyOn(global, 'fetch').mockImplementation(() =>
+        //   Promise.resolve({
+        //     text: () => Promise.resolve(mockHTML),
+        //   })
+        // );
+        // let container;
+        // await act(async () => {
+        //   const renderResult = render(<Tabs>{create_app_tab({ tab: mockTab })}</Tabs>);
+        //   container = renderResult.container;
+        // });
+        // await screen.findByText('Test HTML Tab');
+        // const innerHTML = container.querySelector('.nav-link.active').innerHTML;
+        // expect(innerHTML).toEqual('Test Tab');
+        // global.fetch.mockRestore();
+    });
+});

nautobot/ui/src/components/__tests__/Apps.test.js

@@ -0,0 +1,14 @@
+import Apps from "../Apps";
+
+// As of now we are not testing any plugin integration; so mock default value would be empty
+jest.mock("../../app_imports", () => ({
+    __esModule: true,
+    default: {},
+}));
+
+describe("get_components", () => {
+    it("should return empty object with the expected keys if no plugins found", () => {
+        expect(Apps.FullWidthComponents).toEqual({});
+        expect(Apps.CustomViews).toEqual({});
+    });
+});

nautobot/ui/src/components/__tests__/Layout.test.js

@@ -0,0 +1,33 @@
+// import { render, screen } from "@testing-library/react";
+import { useLocation } from "react-router-dom";
+// import Layout from "../Layout";
+
+jest.mock("react-router-dom", () => ({
+    useLocation: jest.fn(),
+}));
+
+describe("Layout", () => {
+    const mockLocation = { pathname: "/test" };
+    beforeEach(() => {
+        useLocation.mockReturnValue(mockLocation);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("should render Menu, Alert, and children", () => {
+        // TODO: Need to setup Redux for Jest: https://redux.js.org/usage/writing-tests#setting-up-a-reusable-test-render-function
+        // render(
+        //     <Layout>
+        //         <div data-testid="child-div">Child Text</div>
+        //     </Layout>
+        // );
+
+        // const alert = screen.getByRole("alert");
+        // expect(alert.innerHTML).toBe("Current route is /test");
+        // const childrenDom = screen.getByTestId("child-div");
+        // expect(childrenDom.innerHTML).toBe("Child Text");
+        expect(true).toBe(true);
+    });
+});

nautobot/ui/src/components/__tests__/Table.test.js

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import NautobotTable from "../Table";
+
+const mockHeaders = [
+    { name: "name", label: "Name" },
+    { name: "description", label: "Description" },
+];
+const mockData = [
+    { id: 1, name: "Item 1", description: "Description 1" },
+    { id: 2, name: "Item 2", description: "Description 2" },
+];
+
+describe("NautobotTable", () => {
+    it("renders table headers and data", () => {
+        render(
+            <BrowserRouter>
+                <NautobotTable headers={mockHeaders} data={mockData} />
+            </BrowserRouter>
+        );
+
+        // Check that table headers are rendered
+        screen.getByText("Name");
+        screen.getByText("Description");
+
+        // // Check that table data is rendered
+        screen.getByText("Item 1");
+        screen.getByText("Description 1");
+        screen.getByText("Item 2");
+        screen.getByText("Description 2");
+
+        // Check that a checkbox is rendered for each item
+        const checkboxes = screen.getAllByRole("checkbox");
+        expect(checkboxes.length).toBe(3);
+    });
+});

nautobot/ui/src/components/__tests__/TableItem.test.js

@@ -0,0 +1,37 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import TableItem from "../TableItem";
+
+describe("TableItem", () => {
+    it("renders em dash when obj is null", () => {
+        const { container } = render(<TableItem name="test" obj={null} />);
+        expect(container.innerHTML).toBe("—");
+    });
+
+    it("renders span with className=badge when obj is an array", () => {
+        const obj = [{ label: "test", color: "123456" }];
+        render(<TableItem name="test" obj={obj} />);
+        expect(screen.getByRole("button")).toHaveStyle(
+            `background-color: #${obj[0].color}`
+        );
+        expect(screen.getByRole("button").innerHTML).toBe(obj[0].label);
+    });
+
+    it("renders text when obj is an object", () => {
+        const obj = { display: "test" };
+        const { container } = render(<TableItem name="test" obj={obj} />);
+        expect(container.innerHTML).toBe(obj.display);
+    });
+
+    it("renders text when obj is a string", () => {
+        const obj = "test";
+        const { container } = render(<TableItem name="test" obj={obj} />);
+        expect(container.innerHTML).toBe(obj);
+    });
+
+    it("renders em dash when obj is an empty string", () => {
+        const { container } = render(<TableItem name="test" obj="" />);
+        expect(container.innerHTML).toBe("—");
+    });
+});

nautobot/ui/src/components/__tests__/paginator.test.js

@@ -0,0 +1,43 @@
+import { render } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import Paginator from "../paginator";
+
+describe("Paginator", () => {
+    it("renders the paginator form with correct start and end range", () => {
+        const data_count = 30;
+        const page_size = 10;
+        const active_page = 1;
+        const url = "https://example.com/list";
+
+        render(
+            <BrowserRouter>
+                <Paginator
+                    url={url}
+                    data_count={data_count}
+                    page_size={page_size}
+                    active_page={active_page}
+                />
+            </BrowserRouter>
+        );
+
+        // const allPaginationButton = document.evaluate('//*[contains(@class, "page-link")]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+        // const firstPageButton = allPaginationButton.snapshotItem(0)
+        // const totalBtn = allPaginationButton.snapshotLength
+        // const lastPageButton = allPaginationButton.snapshotItem(totalBtn-1)
+        // const pageOneButton = allPaginationButton.snapshotItem(1)
+        // const pageTwoButton = allPaginationButton.snapshotItem(2)
+        // const pageThreeButton = allPaginationButton.snapshotItem(3)
+
+        // // Assert we only have 5 buttons, i.e First, 1, 2, 3 and Last
+        // expect(allPaginationButton.snapshotLength).toBe(5)
+
+        // Assert all has approriate href links
+        // expect(firstPageButton.getAttribute("href")).toBe("https://example.com/list?limit=10&offset=0")
+        // expect(pageOneButton.getAttribute("href")).toBe("https://example.com/list?limit=10&offset=0")
+        // expect(pageTwoButton.getAttribute("href")).toBe("https://example.com/list?limit=10&offset=10")
+        // expect(pageThreeButton.getAttribute("href")).toBe("https://example.com/list?limit=10&offset=20")
+        // expect(lastPageButton.getAttribute("href")).toBe("https://example.com/list?limit=10&offset=20")
+
+        // TODO(timizuo): Include test to get active Button
+    });
+});

nautobot/ui/src/components/__tests__/paginator_form.test.js

@@ -0,0 +1,13 @@
+import { render } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import PaginatorForm from "../paginator_form";
+
+it("PaginatorForm", () => {
+    render(
+        <BrowserRouter>
+            <PaginatorForm start={0} end={50} total_count={100} />
+        </BrowserRouter>
+    );
+    // TODO(timizuo): Can test for more things
+    // screen.findByText("Showing 0 - 50 of 100");
+});

nautobot/ui/src/components/pagination.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { usePagination } from "./usePagination";
+import { useSearchParams } from "react-router-dom";
+import { Button } from "@nautobot/nautobot-ui";
+
+export default function Pagination({
+    totalDataCount,
+    siblingCount = 1,
+    currentPage,
+    pageSize,
+    scroll_ref,
+}) {
+    let [searchParams, setSearchParams] = useSearchParams();
+
+    const paginationRange = usePagination({
+        currentPage,
+        totalDataCount,
+        siblingCount,
+        pageSize,
+    });
+
+    // If there is only one/zero page in the pagination range, we do not render anything.
+    if (paginationRange.length < 2) {
+        return null;
+    }
+    function onPageNumberChange(pageNumber) {
+        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",
+        });
+        setSearchParams({
+            offset: pageSize * (pageNumber - 1),
+            limit: limit ? limit : 50,
+        });
+    }
+    currentPage = ~~currentPage;
+
+    let lastPage = totalDataCount / pageSize;
+    lastPage = ~~lastPage + 1;
+    let firstPage = 1;
+
+    const ul_css = {
+        display: "flex",
+        listStyleType: "none",
+    };
+    const li_css = {
+        padding: "2px",
+    };
+
+    return (
+        <ul style={ul_css}>
+            <li style={li_css} onClick={() => onPageNumberChange(firstPage)}>
+                <Button variant="secondary">{"<"}</Button>
+            </li>
+            {paginationRange.map((pageNumber) => {
+                if (pageNumber === "...") {
+                    return (
+                        <li style={li_css}>
+                            <Button variant="secondary">&#8230;</Button>
+                        </li>
+                    );
+                }
+                // pageNumber (starts from 1) is always one greater than the currentPage (starts from 0)
+                // we add one here to make sure that the correct pageNumber is highlighted.
+                if (pageNumber === currentPage + 1) {
+                    return (
+                        <li
+                            style={li_css}
+                            onClick={() => onPageNumberChange(pageNumber)}
+                        >
+                            <Button variant="primary">{pageNumber}</Button>
+                        </li>
+                    );
+                } else {
+                    return (
+                        <li
+                            style={li_css}
+                            onClick={() => onPageNumberChange(pageNumber)}
+                        >
+                            <Button variant="secondary">{pageNumber}</Button>
+                        </li>
+                    );
+                }
+            })}
+            <li style={li_css} onClick={() => onPageNumberChange(lastPage)}>
+                <Button variant="secondary">{">"}</Button>
+            </li>
+        </ul>
+    );
+}

nautobot/ui/src/components/paginator.js

@@ -0,0 +1,79 @@
+import { Frame } from "@nautobot/nautobot-ui";
+import React from "react";
+
+import PaginatorForm from "@components/paginator_form";
+import Pagination from "@components/pagination";
+
+import { NautobotGrid, NautobotGridItem } from "@nautobot/nautobot-ui";
+
+class Paginator extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    render() {
+        let num_pages;
+        let data_count;
+        let page_size;
+        let active_page;
+        let scroll_ref;
+        data_count = this.props.data_count;
+        active_page = this.props.active_page;
+        scroll_ref = this.props.scroll_ref;
+        if (!active_page) {
+            active_page = 0;
+        }
+
+        if (Object.keys(this.state).length === 0) {
+            page_size = this.props.page_size;
+        } else {
+            page_size = this.state.page_size;
+        }
+
+        if (data_count % page_size === 0) {
+            num_pages = data_count / page_size;
+        } else {
+            num_pages = data_count / page_size + 1;
+        }
+        // convert float to int
+        num_pages = ~~num_pages;
+        // const pages = [];
+
+        // let list_url = url.split("?")[0]; // strip the query parameters to retain the original list url
+        let start_range;
+        let end_range;
+
+        if (active_page === num_pages - 1) {
+            start_range = active_page * page_size + 1;
+            end_range = data_count;
+        } else {
+            start_range = active_page * page_size + 1;
+            end_range = (active_page + 1) * page_size;
+        }
+
+        return (
+            <Frame>
+                <NautobotGrid>
+                    <NautobotGridItem colSpan="4">
+                        <Pagination
+                            totalDataCount={data_count}
+                            currentPage={active_page}
+                            pageSize={page_size}
+                            scroll_ref={scroll_ref}
+                        ></Pagination>
+                    </NautobotGridItem>
+                    <NautobotGridItem colSpan="4">
+                        <PaginatorForm
+                            start={start_range}
+                            end={end_range}
+                            total_count={data_count}
+                            scroll_ref={scroll_ref}
+                        ></PaginatorForm>
+                    </NautobotGridItem>
+                </NautobotGrid>
+            </Frame>
+        );
+    }
+}
+export default Paginator;