Component for Empty Call To Action (#2907)

* Component for Empty Call To Action * linter * remove relative
dust-tt · Dec 18, 2023 · 28bc54c · 28bc54c
1 parent d7d7fe5
commit 28bc54c
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 104 deletions.
diff --git a/front/components/EmptyCallToAction.tsx b/front/components/EmptyCallToAction.tsx
@@ -0,0 +1,39 @@
+import { Button, PlusIcon } from "@dust-tt/sparkle";
+import Link from "next/link";
+import React, { ComponentType, MouseEvent } from "react";
+
+import { classNames } from "@app/lib/utils";
+
+export function EmptyCallToAction({
+  label,
+  disabled = false,
+  icon = PlusIcon,
+  href,
+  onClick,
+}: {
+  label: string;
+  disabled?: boolean;
+  icon?: ComponentType;
+  href?: string;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}) {
+  const button = (
+    <Button
+      disabled={disabled}
+      size="md"
+      label={label}
+      variant="primary"
+      icon={icon}
+      onClick={onClick}
+    />
+  );
+  return (
+    <div
+      className={classNames(
+        "flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
+      )}
+    >
+      {href ? <Link href={href}>{button}</Link> : button}
+    </div>
+  );
+}
diff --git a/front/components/assistant_builder/DataSourceSelectionSection.tsx b/front/components/assistant_builder/DataSourceSelectionSection.tsx
@@ -9,8 +9,8 @@ import {
 
 import { AssistantBuilderDataSourceConfiguration } from "@app/components/assistant_builder/AssistantBuilder";
 import { CONNECTOR_PROVIDER_TO_RESOURCE_NAME } from "@app/components/assistant_builder/shared";
+import { EmptyCallToAction } from "@app/components/EmptyCallToAction";
 import { CONNECTOR_CONFIGURATIONS } from "@app/lib/connector_providers";
-import { classNames } from "@app/lib/utils";
 
 export default function DataSourceSelectionSection({
   dataSourceConfigurations,
@@ -49,21 +49,11 @@ export default function DataSourceSelectionSection({
         )}
       </div>
       {!Object.keys(dataSourceConfigurations).length ? (
-        <div
-          className={classNames(
-            "flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
-          )}
-        >
-          <Button
-            labelVisible={true}
-            label="Add data sources"
-            variant="primary"
-            size="sm"
-            icon={PlusIcon}
-            onClick={openDataSourceModal}
-            disabled={!canAddDataSource}
-          />
-        </div>
+        <EmptyCallToAction
+          label="Add Data Sources"
+          disabled={!canAddDataSource}
+          onClick={openDataSourceModal}
+        />
       ) : (
         <ContextItem.List className="mt-6 border-b border-t border-structure-200">
           {Object.entries(dataSourceConfigurations).map(

diff --git a/front/components/assistant_builder/DatabaseSelectionSection.tsx b/front/components/assistant_builder/DatabaseSelectionSection.tsx
@@ -1,14 +1,8 @@
-import {
-  Button,
-  ContextItem,
-  PlusIcon,
-  ServerIcon,
-  TrashIcon,
-} from "@dust-tt/sparkle";
+import { Button, ContextItem, ServerIcon, TrashIcon } from "@dust-tt/sparkle";
 import { Transition } from "@headlessui/react";
 
 import { AssistantBuilderDatabaseQueryConfiguration } from "@app/components/assistant_builder/AssistantBuilder";
-import { classNames } from "@app/lib/utils";
+import { EmptyCallToAction } from "@app/components/EmptyCallToAction";
 
 export default function DatabaseSelectionSection({
   show,
@@ -48,21 +42,11 @@ export default function DatabaseSelectionSection({
           </div>
         </div>
         {!databaseQueryConfiguration ? (
-          <div
-            className={classNames(
-              "flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
-            )}
-          >
-            <Button
-              disabled={!canSelecDatabase}
-              labelVisible={true}
-              label="Select Database"
-              variant="primary"
-              size="md"
-              icon={PlusIcon}
-              onClick={openDatabaseModal}
-            />
-          </div>
+          <EmptyCallToAction
+            label="Select Database"
+            disabled={!canSelecDatabase}
+            onClick={openDatabaseModal}
+          />
         ) : (
           <ContextItem.List className="mt-6 border-b border-t border-structure-200">
             <ContextItem

diff --git a/front/components/assistant_builder/DustAppSelectionSection.tsx b/front/components/assistant_builder/DustAppSelectionSection.tsx
@@ -2,13 +2,12 @@ import {
   Button,
   CommandLineIcon,
   ContextItem,
-  PlusIcon,
   TrashIcon,
 } from "@dust-tt/sparkle";
 import { Transition } from "@headlessui/react";
 
 import { AssistantBuilderDustAppConfiguration } from "@app/components/assistant_builder/AssistantBuilder";
-import { classNames } from "@app/lib/utils";
+import { EmptyCallToAction } from "@app/components/EmptyCallToAction";
 
 export default function DustAppSelectionSection({
   show,
@@ -48,21 +47,11 @@ export default function DustAppSelectionSection({
           </div>
         </div>
         {!dustAppConfiguration ? (
-          <div
-            className={classNames(
-              "flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
-            )}
-          >
-            <Button
-              disabled={!canSelectDustApp}
-              labelVisible={true}
-              label="Select Dust App"
-              variant="primary"
-              size="md"
-              icon={PlusIcon}
-              onClick={openDustAppModal}
-            />
-          </div>
+          <EmptyCallToAction
+            label="Select Dust App"
+            disabled={!canSelectDustApp}
+            onClick={openDustAppModal}
+          />
         ) : (
           <ContextItem.List className="mt-6 border-b border-t border-structure-200">
             <ContextItem

diff --git a/front/pages/w/[wId]/assistant/assistants.tsx b/front/pages/w/[wId]/assistant/assistants.tsx
@@ -31,6 +31,7 @@ import {
 } from "@app/components/assistant/AssistantActions";
 import { AssistantDetails } from "@app/components/assistant/AssistantDetails";
 import { AssistantSidebarMenu } from "@app/components/assistant/conversation/SidebarMenu";
+import { EmptyCallToAction } from "@app/components/EmptyCallToAction";
 import AppLayout from "@app/components/sparkle/AppLayout";
 import {
   subNavigationAssistants,
@@ -39,7 +40,7 @@ import {
 import { SendNotificationsContext } from "@app/components/sparkle/Notification";
 import { Authenticator, getSession, getUserFromSession } from "@app/lib/auth";
 import { useAgentConfigurations } from "@app/lib/swr";
-import { classNames, subFilter } from "@app/lib/utils";
+import { subFilter } from "@app/lib/utils";
 import { PostAgentListStatusRequestBody } from "@app/pages/api/w/[wId]/members/me/agent_list_status";
 
 const { GA_TRACKING_ID = "" } = process.env;
@@ -377,21 +378,11 @@ export default function PersonalAssistants({
                 ))}
               </ContextItem.List>
             ) : (
-              <div
-                className={classNames(
-                  "relative mt-4 flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
-                )}
-              >
-                <Link
+              <div className="pt-2">
+                <EmptyCallToAction
                   href={`/w/${owner.sId}/builder/assistants/new?flow=personal_assistants`}
-                >
-                  <Button
-                    size="sm"
-                    label="Create an Assistant"
-                    variant="primary"
-                    icon={PlusIcon}
-                  />
-                </Link>
+                  label="Create an Assistant"
+                />
               </div>
             )}
           </Page.Vertical>

diff --git a/front/pages/w/[wId]/builder/assistants/index.tsx b/front/pages/w/[wId]/builder/assistants/index.tsx
@@ -27,12 +27,13 @@ import {
   DeleteAssistantDialog,
   RemoveAssistantFromWorkspaceDialog,
 } from "@app/components/assistant/AssistantActions";
+import { EmptyCallToAction } from "@app/components/EmptyCallToAction";
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { subNavigationAssistants } from "@app/components/sparkle/navigation";
 import { compareAgentsForSort } from "@app/lib/assistant";
 import { Authenticator, getSession, getUserFromSession } from "@app/lib/auth";
 import { useAgentConfigurations } from "@app/lib/swr";
-import { classNames, subFilter } from "@app/lib/utils";
+import { subFilter } from "@app/lib/utils";
 
 const { GA_TRACKING_ID = "" } = process.env;
 
@@ -281,22 +282,11 @@ export default function WorkspaceAssistants({
               ))}
             </ContextItem.List>
           ) : (
-            <div
-              className={classNames(
-                "relative mt-4 flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
-              )}
-            >
-              <Link
+            <div className="pt-2">
+              <EmptyCallToAction
                 href={`/w/${owner.sId}/builder/assistants/new?flow=workspace_assistants`}
-              >
-                <Button
-                  disabled={!isBuilder}
-                  size="sm"
-                  label="Create an Assistant"
-                  variant="primary"
-                  icon={PlusIcon}
-                />
-              </Link>
+                label="Create an Assistant"
+              />
             </div>
           )}
         </Page.Vertical>

diff --git a/front/pages/w/[wId]/builder/data-sources/static.tsx b/front/pages/w/[wId]/builder/data-sources/static.tsx
@@ -14,12 +14,12 @@ import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
+import { EmptyCallToAction } from "@app/components/EmptyCallToAction";
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { subNavigationAssistants } from "@app/components/sparkle/navigation";
 import { getDataSources } from "@app/lib/api/data_sources";
 import { Authenticator, getSession, getUserFromSession } from "@app/lib/auth";
 import { useSubmitFunction } from "@app/lib/client/utils";
-import { classNames } from "@app/lib/utils";
 
 const { GA_TRACKING_ID = "" } = process.env;
 
@@ -154,22 +154,12 @@ export default function DataSourcesView({
             />
           </div>
         ) : (
-          <div
-            className={classNames(
-              "relative mt-4 flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
-            )}
-          >
-            <Button
-              disabled={readOnly}
-              size="sm"
-              label="Create a new Folder"
-              variant="primary"
-              icon={PlusIcon}
-              onClick={async () => {
-                await handleCreateDataSource();
-              }}
-            />
-          </div>
+          <EmptyCallToAction
+            label="Create a new Folder"
+            onClick={async () => {
+              await handleCreateDataSource();
+            }}
+          />
         )}
 
         <ContextItem.List>