feat(security-questionnaire): add tooltip and disable CTA for unpublished policies (#1761)

Co-authored-by: Tofik Hasanov <annexcies@gmail.com>

Author: github-actions[bot]

apps/app/src/app/(app)/[orgId]/security-questionnaire/page.tsx

@@ -47,6 +47,8 @@ export default async function SecurityQuestionnairePage() {
             imageSrcDark="/questionaire/tmp-questionaire-empty-state.png"
             imageAlt="Security Questionnaire"
             sheetName="create-policy-sheet"
+            ctaDisabled={true}
+            ctaTooltip="To use this feature you need to publish policy"
             faqs={[
               {
                 questionKey: 'What is a security questionnaire?',

apps/app/src/components/app-onboarding.tsx

@@ -4,6 +4,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@c
 import { Badge } from '@comp/ui/badge';
 import { Button } from '@comp/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@comp/ui/card';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@comp/ui/tooltip';
 import { BookOpen, HelpCircle, PlusIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import Image from 'next/image';
@@ -25,6 +26,8 @@ type Props = {
   faqs?: FAQ[];
   sheetName?: string;
   href?: string;
+  ctaDisabled?: boolean;
+  ctaTooltip?: string;
 };
 
 export function AppOnboarding({
@@ -37,6 +40,8 @@ export function AppOnboarding({
   faqs,
   sheetName,
   href,
+  ctaDisabled = false,
+  ctaTooltip,
 }: Props) {
   const [open, setOpen] = useQueryState(sheetName ?? 'sheet');
   const isOpen = Boolean(open);
@@ -102,23 +107,52 @@ export function AppOnboarding({
 
                   {cta && (
                     <div className="mt-4 flex w-full">
-                      {href ? (
-                        <Link href={href}>
-                          <Button variant="default" className="flex w-full items-center gap-2">
-                            <PlusIcon className="h-4 w-4" />
-                            {cta}
-                          </Button>
-                        </Link>
-                      ) : (
-                        <Button
-                          variant="default"
-                          className="flex w-full items-center gap-2"
-                          onClick={() => setOpen('true')}
-                        >
-                          <PlusIcon className="h-4 w-4" />
-                          {cta}
-                        </Button>
-                      )}
+                      <TooltipProvider delayDuration={100}>
+                        {href ? (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span className={`w-full ${ctaDisabled ? 'cursor-not-allowed' : ''}`}>
+                                <Link href={href}>
+                                  <Button
+                                    variant="default"
+                                    className={`flex w-full items-center gap-2 ${ctaDisabled ? 'cursor-not-allowed' : ''}`}
+                                    disabled={ctaDisabled}
+                                  >
+                                    <PlusIcon className="h-4 w-4" />
+                                    {cta}
+                                  </Button>
+                                </Link>
+                              </span>
+                            </TooltipTrigger>
+                            {ctaDisabled && ctaTooltip && (
+                              <TooltipContent>
+                                <p>{ctaTooltip}</p>
+                              </TooltipContent>
+                            )}
+                          </Tooltip>
+                        ) : (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span className={`w-full ${ctaDisabled ? 'cursor-not-allowed' : ''}`}>
+                                <Button
+                                  variant="default"
+                                  className={`flex w-full items-center gap-2 ${ctaDisabled ? 'cursor-not-allowed' : ''}`}
+                                  onClick={() => setOpen('true')}
+                                  disabled={ctaDisabled}
+                                >
+                                  <PlusIcon className="h-4 w-4" />
+                                  {cta}
+                                </Button>
+                              </span>
+                            </TooltipTrigger>
+                            {ctaDisabled && ctaTooltip && (
+                              <TooltipContent>
+                                <p>{ctaTooltip}</p>
+                              </TooltipContent>
+                            )}
+                          </Tooltip>
+                        )}
+                      </TooltipProvider>
                     </div>
                   )}
                 </div>