diff --git a/components/filters/CustomSearchInput.tsx b/components/filters/CustomSearchInput.tsx index 513ff739a9..f5f4508a5a 100644 --- a/components/filters/CustomSearchInput.tsx +++ b/components/filters/CustomSearchInput.tsx @@ -3,7 +3,7 @@ import { XCircle } from "lucide-react"; import { useRouter, useSearchParams } from "next/navigation"; import React, { useCallback, useEffect, useState } from "react"; -import { useDebounce } from "../../hooks/useDebounce"; +// import { useDebounce } from "../../hooks/useDebounce"; export const CustomSearchInput: React.FC = () => { const router = useRouter(); @@ -13,8 +13,8 @@ export const CustomSearchInput: React.FC = () => { // }); const [searchQuery, setSearchQuery] = useState(""); - const debouncedSearchQuery = useDebounce(searchQuery, 500); - console.log("debouncedSearchQuery", debouncedSearchQuery); + // const debouncedSearchQuery = useDebounce(searchQuery, 500); + // console.log("debouncedSearchQuery", debouncedSearchQuery); const applySearch = useCallback( (query: string) => { diff --git a/components/icons/Icons.tsx b/components/icons/Icons.tsx index 6024849b2d..f665b49628 100644 --- a/components/icons/Icons.tsx +++ b/components/icons/Icons.tsx @@ -464,6 +464,117 @@ export const NotificationIcon: React.FC = ({ ); +export const IdIcon: React.FC = ({ + size = 24, + width, + height, + ...props +}) => ( + + + +); + +export const DoneIcon: React.FC = ({ + size, + height, + width, + ...props +}) => { + return ( + + + + ); +}; + +export const CopyIcon: React.FC = ({ + size, + height, + width, + ...props +}) => { + return ( + + + + ); +}; + +export const FlowIcon: React.FC = ({ + size, + height, + width, + ...props +}) => { + return ( + + + + ); +}; + +export const ConnectionIcon: React.FC = ({ + size, + height, + width, + ...props +}) => { + return ( + + + + ); +}; + export const SuccessIcon: React.FC = ({ size = 24, width, diff --git a/components/providers/ProviderInfo.tsx b/components/providers/ProviderInfo.tsx index 8730e6cfcd..39d33a62fb 100644 --- a/components/providers/ProviderInfo.tsx +++ b/components/providers/ProviderInfo.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { WifiIcon, WifiOffIcon, WifiPendingIcon } from "../icons"; +import { ConnectionIcon } from "../icons"; import { AWSProviderBadge, AzureProviderBadge, @@ -12,24 +12,35 @@ interface ProviderInfoProps { connected: boolean | null; provider: "aws" | "azure" | "gcp" | "kubernetes"; providerAlias: string; - providerId: string; } export const ProviderInfo: React.FC = ({ connected, provider, providerAlias, - providerId, }) => { const getIcon = () => { switch (connected) { case true: - return ; + return ( +
+ +
+ ); case false: - return ; + return ( +
+ +
+ ); case null: + return ( +
+ +
+ ); default: - return ; + return ; } }; @@ -49,13 +60,15 @@ export const ProviderInfo: React.FC = ({ }; return ( -
-
-
{getIcon()}
-
{getProviderLogo()}
-
- {providerAlias} - {providerId} +
+
+
+
{getProviderLogo()}
+
{getIcon()}
+
+ {providerAlias} + {providerAlias} +
diff --git a/components/providers/SnippetIdProvider.tsx b/components/providers/SnippetIdProvider.tsx new file mode 100644 index 0000000000..775e72eaf7 --- /dev/null +++ b/components/providers/SnippetIdProvider.tsx @@ -0,0 +1,28 @@ +import { Snippet } from "@nextui-org/react"; +import React from "react"; + +import { CopyIcon, DoneIcon, IdIcon } from "../icons"; + +interface SnippetIdProviderProps { + providerId: string; +} +export const SnippetIdProvider: React.FC = ({ + providerId, +}) => { + return ( + } + checkIcon={} + > +

+ + {providerId} +

+ + ); +}; diff --git a/components/providers/index.ts b/components/providers/index.ts index 58c8dae90f..a0129d3520 100644 --- a/components/providers/index.ts +++ b/components/providers/index.ts @@ -7,6 +7,7 @@ export * from "./DateWithTime"; export * from "./DeleteProvider"; export * from "./ProviderInfo"; export * from "./ScanStatus"; +export * from "./SnippetIdProvider"; export * from "./table/ColumnsProvider"; export * from "./table/DataTableColumnHeader"; export * from "./table/DataTablePagination"; diff --git a/components/providers/table/ColumnsProvider.tsx b/components/providers/table/ColumnsProvider.tsx index e08050e620..725a4e6fd1 100644 --- a/components/providers/table/ColumnsProvider.tsx +++ b/components/providers/table/ColumnsProvider.tsx @@ -31,6 +31,8 @@ import { EditDocumentBulkIcon, } from "@nextui-org/shared-icons"; +import { SnippetIdProvider } from "../SnippetIdProvider"; + const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0"; @@ -46,18 +48,29 @@ export const ColumnsProvider: ColumnDef[] = [ ), cell: ({ row }) => { const { - attributes: { connection, provider, alias, provider_id }, + attributes: { connection, provider, alias }, } = getProviderData(row); return ( ); }, }, + { + accessorKey: "account", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const { + attributes: { provider_id }, + } = getProviderData(row); + return ; + }, + }, { accessorKey: "status", header: "Scan Status", @@ -144,6 +157,7 @@ export const ColumnsProvider: ColumnDef[] = [ key="new" description="Check the connection to the provider" shortcut="⌘N" + textValue="Check Connection" startContent={} > @@ -152,6 +166,7 @@ export const ColumnsProvider: ColumnDef[] = [ key="edit" description="Allows you to edit the provider" shortcut="⌘⇧E" + textValue="Edit Provider" startContent={ }