-
- {providerType && getProviderLogo(providerType as ProviderType)}
-
- {providerType
- ? getProviderName(providerType as ProviderType)
- : "Unknown Provider"}
-
-
-
-
- {getProviderHelpText(providerType as string).text}
-
-
- Read the docs
-
-
+
+ {providerType && getProviderLogo(providerType as ProviderType)}
+
+ {providerType
+ ? getProviderName(providerType as ProviderType)
+ : "Unknown Provider"}
+
);
};
diff --git a/ui/components/providers/workflow/vertical-steps.tsx b/ui/components/providers/workflow/vertical-steps.tsx
deleted file mode 100644
index 2971d3080c..0000000000
--- a/ui/components/providers/workflow/vertical-steps.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-"use client";
-
-import { cn } from "@heroui/theme";
-import { useControlledState } from "@react-stately/utils";
-import { domAnimation, LazyMotion, m } from "framer-motion";
-import type { ComponentProps } from "react";
-import React from "react";
-
-export type VerticalStepProps = {
- className?: string;
- description?: React.ReactNode;
- title?: React.ReactNode;
-};
-
-export interface VerticalStepsProps
- extends React.HTMLAttributes
{
- /**
- * An array of steps.
- *
- * @default []
- */
- steps?: VerticalStepProps[];
- /**
- * The color of the steps.
- *
- * @default "primary"
- */
- color?:
- | "primary"
- | "secondary"
- | "success"
- | "warning"
- | "danger"
- | "default";
- /**
- * The current step index.
- */
- currentStep?: number;
- /**
- * The default step index.
- *
- * @default 0
- */
- defaultStep?: number;
- /**
- * Whether to hide the progress bars.
- *
- * @default false
- */
- hideProgressBars?: boolean;
- /**
- * The custom class for the steps wrapper.
- */
- className?: string;
- /**
- * The custom class for the step.
- */
- stepClassName?: string;
- /**
- * Callback function when the step index changes.
- */
- onStepChange?: (stepIndex: number) => void;
-}
-
-function CheckIcon(props: ComponentProps<"svg">) {
- return (
-
- );
-}
-
-export const VerticalSteps = React.forwardRef<
- HTMLButtonElement,
- VerticalStepsProps
->(
- (
- {
- color = "primary",
- steps = [],
- defaultStep = 0,
- onStepChange,
- currentStep: currentStepProp,
- hideProgressBars = false,
- stepClassName,
- className,
- ...props
- },
- ref,
- ) => {
- const [currentStep, setCurrentStep] = useControlledState(
- currentStepProp,
- defaultStep,
- onStepChange,
- );
-
- const colors = React.useMemo(() => {
- let userColor;
- let fgColor;
-
- const colorsVars = [
- "[--active-fg-color:var(--step-fg-color)]",
- "[--active-border-color:var(--step-color)]",
- "[--active-color:var(--step-color)]",
- "[--complete-background-color:var(--step-color)]",
- "[--complete-border-color:var(--step-color)]",
- "[--inactive-border-color:hsl(var(--heroui-default-300))]",
- "[--inactive-color:hsl(var(--heroui-default-300))]",
- ];
-
- switch (color) {
- case "primary":
- userColor = "[--step-color:hsl(var(--heroui-primary))]";
- fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
- break;
- case "secondary":
- userColor = "[--step-color:hsl(var(--heroui-secondary))]";
- fgColor = "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]";
- break;
- case "success":
- userColor = "[--step-color:hsl(var(--heroui-success))]";
- fgColor = "[--step-fg-color:hsl(var(--heroui-success-foreground))]";
- break;
- case "warning":
- userColor = "[--step-color:hsl(var(--heroui-warning))]";
- fgColor = "[--step-fg-color:hsl(var(--heroui-warning-foreground))]";
- break;
- case "danger":
- userColor = "[--step-color:hsl(var(--heroui-error))]";
- fgColor = "[--step-fg-color:hsl(var(--heroui-error-foreground))]";
- break;
- case "default":
- userColor = "[--step-color:hsl(var(--heroui-default))]";
- fgColor = "[--step-fg-color:hsl(var(--heroui-default-foreground))]";
- break;
- default:
- userColor = "[--step-color:hsl(var(--heroui-primary))]";
- fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
- break;
- }
-
- if (!className?.includes("--step-fg-color")) colorsVars.unshift(fgColor);
- if (!className?.includes("--step-color")) colorsVars.unshift(userColor);
- if (!className?.includes("--inactive-bar-color"))
- colorsVars.push(
- "[--inactive-bar-color:hsl(var(--heroui-default-300))]",
- );
-
- return colorsVars;
- }, [color, className]);
-
- return (
-
- );
- },
-);
-
-VerticalSteps.displayName = "VerticalSteps";
diff --git a/ui/components/providers/workflow/workflow-add-provider.tsx b/ui/components/providers/workflow/workflow-add-provider.tsx
deleted file mode 100644
index fbb5a3e393..0000000000
--- a/ui/components/providers/workflow/workflow-add-provider.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client";
-
-import { Progress } from "@heroui/progress";
-import { Spacer } from "@heroui/spacer";
-import { usePathname } from "next/navigation";
-import React from "react";
-
-import { VerticalSteps } from "./vertical-steps";
-
-const steps = [
- {
- title: "Choose your Cloud Provider",
- description:
- "Select the cloud provider you wish to connect and specify your preferred authentication method from the supported options.",
- href: "/providers/connect-account",
- },
- {
- title: "Enter Authentication Details",
- description:
- "Provide the necessary credentials to establish a secure connection to your selected cloud provider.",
- href: "/providers/add-credentials",
- },
- {
- title: "Verify Connection & Start Scan",
- description:
- "Ensure your credentials are correct and start scanning your cloud environment.",
- href: "/providers/test-connection",
- },
-];
-
-const ROUTE_CONFIG: Record<
- string,
- {
- stepIndex: number;
- stepOverride?: { index: number; title: string; description: string };
- }
-> = {
- "/providers/connect-account": { stepIndex: 0 },
- "/providers/add-credentials": { stepIndex: 1 },
- "/providers/test-connection": { stepIndex: 2 },
- "/providers/update-credentials": {
- stepIndex: 1,
- stepOverride: {
- index: 2,
- title: "Make sure the new credentials are valid",
- description: "Valid credentials will take you back to the providers page",
- },
- },
-};
-
-export const WorkflowAddProvider = () => {
- const pathname = usePathname();
-
- const config = ROUTE_CONFIG[pathname] || { stepIndex: 0 };
- const currentStep = config.stepIndex;
-
- const updatedSteps = steps.map((step, index) => {
- if (config.stepOverride && index === config.stepOverride.index) {
- return { ...step, ...config.stepOverride };
- }
- return step;
- });
-
- return (
-
-
- Add a Cloud Provider
-
-
- Complete these steps to configure your cloud provider and initiate your
- first scan.
-
-
-
-
-
- );
-};
diff --git a/ui/components/scans/no-providers-added.tsx b/ui/components/scans/no-providers-added.tsx
index 7e9340a6ad..da9d8bf318 100644
--- a/ui/components/scans/no-providers-added.tsx
+++ b/ui/components/scans/no-providers-added.tsx
@@ -1,39 +1,45 @@
"use client";
-import Link from "next/link";
+import { useState } from "react";
+import { ProviderWizardModal } from "@/components/providers/wizard";
import { Button, Card, CardContent } from "@/components/shadcn";
import { InfoIcon } from "../icons/Icons";
export const NoProvidersAdded = () => {
- return (
-
-
-
-
-
-
- No Cloud Providers Configured
-
-
-
-
- No cloud providers have been configured. Start by setting up a
- cloud provider.
-
-
-
+
+
+
+
+
+ No Cloud Providers Configured
+
+
+
+
+ No cloud providers have been configured. Start by setting up a
+ cloud provider.
+
+
+