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

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

@@ -1,65 +0,0 @@
-import React from "react";
-import { Flex, Text, Select } from "@nautobot/nautobot-ui";
-import { useSearchParams } from "react-router-dom";
-
-export default function PageSizeForm({ scroll_ref }) {
-    let [searchParams, setSearchParams] = useSearchParams();
-    function onPageSizeChange(event) {
-        let initialOffset = parseInt(searchParams.get("offset"));
-
-        let newLimit = event.target.value;
-        let newOffset;
-
-        let offsetModulo = initialOffset % newLimit;
-
-        // Properly sets the new offset based on the new limit and old offset
-        if (offsetModulo !== 0) {
-            newOffset = initialOffset - offsetModulo;
-        } else {
-            newOffset = initialOffset;
-        }
-
-        // Scroll to the top of the ObjectListTable Container on table reload
-        scroll_ref.current.scrollIntoView({
-            alignToTop: true,
-            behavior: "smooth",
-        });
-
-        setSearchParams([
-            ...[...searchParams].filter(
-                ([searchParam]) =>
-                    searchParam !== "limit" && searchParam !== "offset"
-            ),
-            ["limit", newLimit],
-            ["offset", newOffset ? newOffset : 0],
-        ]);
-    }
-
-    return (
-        <Flex align="center">
-            <Text color="gray-3" pr="sm">
-                Show
-            </Text>
-            <Select
-                value={
-                    searchParams.get("limit") ? searchParams.get("limit") : "50"
-                }
-                onChange={onPageSizeChange}
-            >
-                {/*
-                    TODO: we need a REST API endpoint to query get_settings_or_config("PER_PAGE_DEFAULTS")
-                    rather than hard-coding this.
-                */}
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-                <option value="200">200</option>
-                <option value="500">500</option>
-            </Select>
-            <Text color="gray-3" pl="sm" whiteSpace="nowrap">
-                rows per page
-            </Text>
-        </Flex>
-    );
-}

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

@@ -1,67 +0,0 @@
-import { Box, Flex } from "@nautobot/nautobot-ui";
-import { Spacer } from "@chakra-ui/react";
-import React, { useEffect, useState } from "react";
-
-import { PageSizeForm, PageNumberForm } from "@components/Pagination";
-
-function Pagination(props) {
-    const [page_size, setPageSize] = useState(props.page_size);
-    const [num_pages, setNumPages] = useState(
-        calculateNumPages(props.data_count, props.page_size)
-    );
-
-    useEffect(() => {
-        // This effect runs whenever the page_size prop changes
-        setPageSize(props.page_size);
-    }, [props.page_size]);
-
-    useEffect(() => {
-        // This effect runs whenever the page_size or data_count prop changes
-        setNumPages(calculateNumPages(props.data_count, page_size));
-    }, [page_size, props.data_count]);
-
-    let data_count = props.data_count;
-    let scroll_ref = props.scroll_ref;
-    let active_page = props.active_page;
-    if (!active_page) {
-        active_page = 0;
-    }
-
-    // trueCurrentPage increments active_page (which starts at 0) by 1 to get the accurate human-form page number
-    let trueCurrentPage = ~~active_page + 1;
-
-    function calculateNumPages(data_count, page_size) {
-        let num_pages;
-
-        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;
-
-        return num_pages;
-    }
-
-    return (
-        <Flex paddingTop="md">
-            <Box>
-                <PageNumberForm
-                    firstPage={1}
-                    lastPage={num_pages}
-                    pageSize={page_size}
-                    scroll_ref={scroll_ref}
-                    totalDataCount={data_count}
-                    trueCurrentPage={trueCurrentPage}
-                ></PageNumberForm>
-            </Box>
-            <Spacer />
-            <Box>
-                <PageSizeForm scroll_ref={scroll_ref}></PageSizeForm>
-            </Box>
-        </Flex>
-    );
-}
-export default Pagination;

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

@@ -1,3 +0,0 @@
-export { default as PageNumberForm } from "./PageNumberForm";
-export { default as PageSizeForm } from "./PageSizeForm";
-export { default as Pagination } from "./Pagination";

nautobot/ui/src/components/ReferenceDataTag.js

@@ -1,35 +0,0 @@
-import { Tag } from "@nautobot/nautobot-ui";
-import { Skeleton } from "@chakra-ui/react";
-import { useGetRESTAPIQuery } from "@utils/api";
-import { calculateLuminance } from "@utils/color";
-
-export function ReferenceDataTag(props) {
-    const { model_name, id } = props;
-    const { data, isSuccess } = useGetRESTAPIQuery({
-        app_label: "extras",
-        model_name: model_name,
-        uuid: id,
-    });
-
-    let display = "Loading...";
-    let color = "cccccc";
-
-    if (isSuccess) {
-        display = data.display || data.label;
-        color = data.color;
-    }
-
-    return (
-        <Skeleton isLoaded={isSuccess}>
-            <Tag
-                bg={"#" + color}
-                color={calculateLuminance(color) > 186 ? "#000000" : "#ffffff"}
-                {...props}
-            >
-                {display}
-            </Tag>
-        </Skeleton>
-    );
-}
-
-export default ReferenceDataTag;

nautobot/ui/src/components/Retrieve/RenderChangeLogsTab.js

@@ -1,58 +0,0 @@
-import useSWR from "swr";
-import { Flex, Heading, NtcThumbnailIcon } from "@nautobot/nautobot-ui";
-import { SkeletonText } from "@chakra-ui/react";
-
-import { useGetRESTAPIQuery, fetcher } from "@utils/api";
-import { ObjectTable } from "../ObjectTable";
-
-export default function RenderChangeLogsTab({ object_id }) {
-    const changelog_url = `/api/extras/object-changes/?changed_object_id=${object_id}&depth=1`;
-    const { data, error, isLoading, isFetching } = useSWR(
-        () => changelog_url,
-        fetcher
-    );
-    const {
-        data: schema,
-        isFetching: schemaIsFetching,
-        isLoading: schemaIsLoading,
-        isError: schemaIsError,
-    } = useGetRESTAPIQuery({
-        app_label: "extras",
-        model_name: "object-changes",
-        schema: true,
-    });
-
-    if (isLoading || isFetching || schemaIsFetching || schemaIsLoading) {
-        return (
-            <SkeletonText
-                endColor="gray.300"
-                noOfLines={10}
-                skeletonHeight="25"
-                spacing="3"
-                mt="3"
-            />
-        );
-    }
-
-    if (error || schemaIsError) {
-        return <div>Failed to load Change Log Data</div>;
-    }
-
-    const defaultHeaders = schema.view_options.list.default_fields;
-    const tableHeaders = schema.view_options.list.all_fields;
-    const tableData = data?.results || [];
-
-    return (
-        <Flex as="section" direction="column" gap="md">
-            <Heading alignItems="center" display="flex" gap="xs">
-                <NtcThumbnailIcon height="auto" width="24" />
-                Change Logs
-            </Heading>
-            <ObjectTable
-                defaultHeaders={defaultHeaders}
-                tableHeaders={tableHeaders}
-                tableData={tableData}
-            />
-        </Flex>
-    );
-}

nautobot/ui/src/components/Retrieve/RenderColumn.js

@@ -1,30 +0,0 @@
-import { NautobotGrid, NautobotGridItem } from "@nautobot/nautobot-ui";
-
-import RenderGroup from "./RenderGroup";
-
-function RenderColumn({ tabData, data, schema }) {
-    return (
-        <NautobotGrid columns="2" padding={0}>
-            {tabData.map((group, idx) => (
-                <NautobotGridItem
-                    key={idx}
-                    flexDirection="column"
-                    display="flex"
-                    gap="md"
-                >
-                    {Object.entries(group).map(([title, { fields }], idx) => (
-                        <RenderGroup
-                            key={idx}
-                            fields={fields}
-                            data={data}
-                            schema={schema}
-                            title={title}
-                        />
-                    ))}
-                </NautobotGridItem>
-            ))}
-        </NautobotGrid>
-    );
-}
-
-export default RenderColumn;

nautobot/ui/src/components/Retrieve/RenderGroup.js

@@ -1,24 +0,0 @@
-import {
-    Flex,
-    Heading,
-    NtcThumbnailIcon,
-    TableContainer,
-} from "@nautobot/nautobot-ui";
-
-import RenderTable from "./RenderTable";
-
-function RenderGroup({ fields, title, schema, data }) {
-    return (
-        <Flex as="section" direction="column" gap="md">
-            <Heading alignItems="center" display="flex" gap="xs">
-                <NtcThumbnailIcon height="auto" width="24" />
-                {title}
-            </Heading>
-            <TableContainer>
-                <RenderTable fields={fields} schema={schema} data={data} />
-            </TableContainer>
-        </Flex>
-    );
-}
-
-export default RenderGroup;

nautobot/ui/src/components/Retrieve/RenderHeader.js

@@ -1,125 +0,0 @@
-import { faCalendarPlus, faPencil } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-    BinIcon,
-    Button as UIButton,
-    ButtonGroup,
-    Divider,
-    EditIcon,
-    Flex,
-    Heading,
-    MeatballsIcon,
-    Menu,
-    MenuButton,
-    MenuList,
-    MenuItem,
-    NtcThumbnailIcon,
-    Text,
-} from "@nautobot/nautobot-ui";
-
-import { ReferenceDataTag } from "@components/ReferenceDataTag";
-import { humanFriendlyDate } from "@utils/date";
-
-export default function RenderHeader({ data }) {
-    return (
-        <Flex justify="space-between">
-            <Flex align="center" gap="md">
-                {/* TODO(Timizuo): Create a reusable component from <Heading><NtcThumbnailIcon /> {title}</Heading> */}
-                <Heading
-                    alignItems="center"
-                    as="h1"
-                    display="flex"
-                    gap="xs"
-                    size="H1"
-                >
-                    <NtcThumbnailIcon height="auto" width="24" />
-                    {data.display}
-                </Heading>
-                {data.status && (
-                    <Text size="P2">
-                        <ReferenceDataTag
-                            model_name="statuses"
-                            id={data.status.id}
-                            variant="unknown"
-                            size="sm"
-                        />
-                    </Text>
-                )}
-                <Divider height={10} orientation="vertical" />
-                {data.created && (
-                    <Text
-                        alignItems="center"
-                        color="gray-3"
-                        display="flex"
-                        gap="xs"
-                    >
-                        <FontAwesomeIcon
-                            icon={faCalendarPlus}
-                            style={{ height: 20, width: 20 }}
-                        />
-                        {humanFriendlyDate(data.created)}
-                    </Text>
-                )}
-                {data.last_updated && (
-                    <Text
-                        alignItems="center"
-                        color="gray-3"
-                        display="flex"
-                        gap="xs"
-                    >
-                        <FontAwesomeIcon
-                            icon={faPencil}
-                            style={{ height: 20, width: 20 }}
-                        />
-                        {humanFriendlyDate(data.last_updated)}
-                    </Text>
-                )}
-            </Flex>
-            <ButtonGroup alignItems="center" spacing="md">
-                <Menu>
-                    <MenuButton
-                        as={UIButton}
-                        variant="primaryAction"
-                        leftIcon={<MeatballsIcon />}
-                    >
-                        Actions
-                    </MenuButton>
-                    <MenuList>
-                        <MenuItem
-                            to={`${window.location.pathname}edit/`}
-                            icon={<EditIcon />}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                // Because there is currently no support for Edit view in the new UI for production,
-                                // the code below checks if the app is running in production and redirects the user to
-                                // the Edit 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 += "edit/";
-                                }
-                            }}
-                        >
-                            Edit
-                        </MenuItem>
-                        <MenuItem
-                            to={`${window.location.pathname}delete/`}
-                            icon={<BinIcon />}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                // Because there is currently no support for Delete view in the new UI for production,
-                                // the code below checks if the app is running in production and redirects the user to
-                                // the Delete 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 Delete View in the new UI
-                                if (process.env.NODE_ENV === "production") {
-                                    document.location.href += "delete/";
-                                }
-                            }}
-                        >
-                            Delete
-                        </MenuItem>
-                    </MenuList>
-                </Menu>
-            </ButtonGroup>
-        </Flex>
-    );
-}

nautobot/ui/src/components/Retrieve/RenderNotesTab.js

@@ -1,60 +0,0 @@
-import useSWR from "swr";
-import { Flex, Heading, NtcThumbnailIcon } from "@nautobot/nautobot-ui";
-import { SkeletonText } from "@chakra-ui/react";
-
-import { useGetRESTAPIQuery, fetcher } from "@utils/api";
-import { ObjectTable } from "../ObjectTable";
-
-export default function RenderNotesTab(props) {
-    const { app_label, model_name, object_id, isPluginView } = props;
-    const pluginPrefix = isPluginView ? "plugins/" : "";
-    const notes_url = `/api/${pluginPrefix}${app_label}/${model_name}/${object_id}/notes/`;
-    const { data, isLoading, isFetching, error } = useSWR(
-        () => notes_url,
-        fetcher
-    );
-    const {
-        data: schema,
-        isFetching: schemaIsFetching,
-        isLoading: schemaIsLoading,
-        isError: schemaIsError,
-    } = useGetRESTAPIQuery({
-        app_label: "extras",
-        model_name: "notes",
-        schema: true,
-    });
-
-    if (isLoading || isFetching || schemaIsFetching || schemaIsLoading) {
-        return (
-            <SkeletonText
-                endColor="gray.300"
-                noOfLines={10}
-                skeletonHeight="25"
-                spacing="3"
-                mt="3"
-            />
-        );
-    }
-
-    if (error || schemaIsError) {
-        return <div>Failed to load Notes Data</div>;
-    }
-
-    const defaultHeaders = schema.view_options.list.default_fields;
-    const tableHeaders = schema.view_options.list.all_fields;
-    const tableData = data?.results || [];
-
-    return (
-        <Flex as="section" direction="column" gap="md">
-            <Heading alignItems="center" display="flex" gap="xs">
-                <NtcThumbnailIcon height="auto" width="24" />
-                Notes
-            </Heading>
-            <ObjectTable
-                defaultHeaders={defaultHeaders}
-                tableHeaders={tableHeaders}
-                tableData={tableData}
-            />
-        </Flex>
-    );
-}

nautobot/ui/src/components/Retrieve/RenderTable.js

@@ -1,33 +0,0 @@
-import { Table, Tbody, Td, Tr } from "@nautobot/nautobot-ui";
-
-import { ObjectTableItem } from "@components";
-
-function RenderTable({ fields, schema, data }) {
-    return (
-        <Table>
-            <Tbody>
-                {fields.map((fieldName, idx) => {
-                    const fieldSchema = schema[fieldName];
-                    if (!fieldSchema) {
-                        return "";
-                    }
-                    const fieldData = data[fieldName];
-                    let url = null;
-                    if (fieldSchema?.modelUrl && fieldData?.id) {
-                        url = fieldSchema.modelUrl + fieldData.id + "/";
-                    }
-                    return (
-                        <Tr key={idx}>
-                            <Td>{fieldSchema.title}</Td>
-                            <Td>
-                                <ObjectTableItem obj={fieldData} url={url} />
-                            </Td>
-                        </Tr>
-                    );
-                })}
-            </Tbody>
-        </Table>
-    );
-}
-
-export default RenderTable;

nautobot/ui/src/components/Retrieve/RenderTabs.js

@@ -1,56 +0,0 @@
-import {
-    negateCssVar,
-    Tab,
-    Tabs,
-    TabList,
-    TabPanel,
-    TabPanels,
-} from "@nautobot/nautobot-ui";
-
-import { RenderColumn, RenderNotesTab, RenderChangeLogsTab } from ".";
-
-function RenderTabs({
-    layoutSchema,
-    schema,
-    data,
-    app_label,
-    model_name,
-    object_id,
-    isPluginView,
-}) {
-    return (
-        <Tabs variant="outline">
-            <TabList marginX={negateCssVar("md")} paddingX="md">
-                {Object.entries(layoutSchema.tabs).map(([tabTitle], idx) => (
-                    <Tab key={idx}>{tabTitle}</Tab>
-                ))}
-                <Tab>Notes</Tab>
-                <Tab>Change Logs</Tab>
-            </TabList>
-            <TabPanels>
-                {Object.entries(layoutSchema.tabs).map(([_, tabData], idx) => (
-                    <TabPanel key={idx} paddingBottom={0} paddingX={0}>
-                        <RenderColumn
-                            tabData={tabData}
-                            data={data}
-                            schema={schema}
-                        />
-                    </TabPanel>
-                ))}
-                <TabPanel paddingBottom={0} paddingX={0}>
-                    <RenderNotesTab
-                        app_label={app_label}
-                        model_name={model_name}
-                        object_id={object_id}
-                        isPluginView={isPluginView}
-                    />
-                </TabPanel>
-                <TabPanel paddingBottom={0} paddingX={0}>
-                    <RenderChangeLogsTab object_id={object_id} />
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    );
-}
-
-export default RenderTabs;

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

@@ -1,7 +0,0 @@
-export { default as RenderColumn } from "./RenderColumn";
-export { default as RenderTable } from "./RenderTable";
-export { default as RenderGroup } from "./RenderGroup";
-export { default as RenderNotesTab } from "./RenderNotesTab";
-export { default as RenderHeader } from "./RenderHeader";
-export { default as RenderTabs } from "./RenderTabs";
-export { default as RenderChangeLogsTab } from "./RenderChangeLogsTab";

nautobot/ui/src/components/RouterButton.js

@@ -1,10 +0,0 @@
-import { Button as UIButton } from "@nautobot/nautobot-ui";
-import { Link as ReactRouterLink } from "react-router-dom";
-
-// This provides a standard Link object we can use that marries the Button UI component with the ReactRouter Link
-export function RouterButton(props) {
-    return <UIButton as={ReactRouterLink} {...props}></UIButton>;
-}
-
-export const Button = RouterButton;
-export default RouterButton;

nautobot/ui/src/components/RouterLink.js

@@ -1,10 +0,0 @@
-import { Link as UILink } from "@nautobot/nautobot-ui";
-import { Link as ReactRouterLink } from "react-router-dom";
-
-// This provides a standard Link object we can use that marries the Link UI component with the ReactRouter Link
-export function RouterLink(props) {
-    return <UILink as={ReactRouterLink} {...props}></UILink>;
-}
-
-export const Link = RouterLink;
-export default RouterLink;