From 9472d4d00860243441b93d30485678053c32b207 Mon Sep 17 00:00:00 2001
From: Jules <jules@MacBook-Pro.local>
Date: Thu, 1 Aug 2024 11:15:03 +0200
Subject: [PATCH] [front/assistant_builder] - refactor: update icons for data
 source selectors

 - Change the icon for the "Websites" data source option to `GlobeAltIcon` for better representation
 - Update icons for "Select Websites", "Select Dust App", and other relevant modals to match the new icon choice
 - Replace `CloudArrowDownIcon` with `GlobeAltIcon` across various components to maintain consistency in the UI
---
 .../AssistantBuilderDataSourceModal.tsx                |  7 ++++---
 .../assistant_builder/AssistantBuilderDustAppModal.tsx | 10 ++--------
 .../assistant_builder/AssistantBuilderTablesModal.tsx  |  4 ++--
 front/components/poke/subscriptions/table.tsx          |  4 ++--
 4 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx b/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx
index 24e40dc75b73..a6f931391065 100644
--- a/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx
+++ b/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx
@@ -2,6 +2,7 @@ import {
   CloudArrowDownIcon,
   CloudArrowLeftRightIcon,
   FolderIcon,
+  GlobeAltIcon,
   Item,
   Modal,
   Page,
@@ -373,7 +374,7 @@ function PickDataSource({
         {shouldDisplayWebsiteEntry && (
           <Item.Navigation
             label="Websites"
-            icon={CloudArrowDownIcon}
+            icon={GlobeAltIcon}
             onClick={onPickWebsites}
           />
         )}
@@ -504,7 +505,7 @@ function FolderOrWebsiteResourceSelector({
       <Page>
         <Page.Header
           title={type === "folder" ? "Select Folders" : "Select Websites"}
-          icon={type === "folder" ? FolderIcon : CloudArrowDownIcon}
+          icon={type === "folder" ? FolderIcon : GlobeAltIcon}
           description={`Select the ${
             type === "folder" ? "folders" : "websites"
           } that will be used by the assistant as a source for its answers.`}
@@ -580,7 +581,7 @@ function FolderOrWebsiteTree({
       type={type === "folder" ? "leaf" : "node"}
       label={dataSource.name}
       variant="folder"
-      visual={type === "folder" ? <FolderIcon /> : <CloudArrowDownIcon />}
+      visual={type === "folder" ? <FolderIcon /> : <GlobeAltIcon />}
       className="whitespace-nowrap"
       checkbox={{
         checked: currentConfig?.isSelectAll ?? false,
diff --git a/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx b/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx
index 63739c98ff01..bfcdebba6f53 100644
--- a/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx
+++ b/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx
@@ -1,10 +1,4 @@
-import {
-  CloudArrowDownIcon,
-  CommandLineIcon,
-  Item,
-  Modal,
-  Page,
-} from "@dust-tt/sparkle";
+import { CommandLineIcon, Item, Modal, Page } from "@dust-tt/sparkle";
 import type { AppType } from "@dust-tt/types";
 import { Transition } from "@headlessui/react";
 
@@ -60,7 +54,7 @@ function PickDustApp({
   return (
     <Transition show={show} className="mx-auto max-w-6xl">
       <Page>
-        <Page.Header title="Select Dust App" icon={CloudArrowDownIcon} />
+        <Page.Header title="Select Dust App" icon={CommandLineIcon} />
         {hasSomeUnselectableApps && (
           <Page.P>
             Dust apps without a description are not selectable. To make a Dust
diff --git a/front/components/assistant_builder/AssistantBuilderTablesModal.tsx b/front/components/assistant_builder/AssistantBuilderTablesModal.tsx
index b3b5621e3e9c..22d4c8288341 100644
--- a/front/components/assistant_builder/AssistantBuilderTablesModal.tsx
+++ b/front/components/assistant_builder/AssistantBuilderTablesModal.tsx
@@ -1,6 +1,6 @@
 import {
   Button,
-  CloudArrowDownIcon,
+  GlobeAltIcon,
   Item,
   Modal,
   Page,
@@ -300,7 +300,7 @@ function PickDataSource({
             icon={
               ds.connectorProvider
                 ? CONNECTOR_CONFIGURATIONS[ds.connectorProvider].logoComponent
-                : CloudArrowDownIcon
+                : GlobeAltIcon
             }
             key={ds.id}
             onClick={() => {
diff --git a/front/components/poke/subscriptions/table.tsx b/front/components/poke/subscriptions/table.tsx
index 72e743908415..e2661e557b68 100644
--- a/front/components/poke/subscriptions/table.tsx
+++ b/front/components/poke/subscriptions/table.tsx
@@ -1,7 +1,7 @@
 import {
-  CloudArrowDownIcon,
   ConfluenceLogo,
   GithubLogo,
+  GlobeAltIcon,
   GoogleLogo,
   IntercomLogo,
   Modal,
@@ -219,7 +219,7 @@ export function ActiveSubscriptionTable({
                         <ConfluenceLogo />
                       ) : null}
                       {activePlan.limits.connections.isWebCrawlerAllowed ? (
-                        <CloudArrowDownIcon />
+                        <GlobeAltIcon />
                       ) : null}
                     </div>
                   </PokeTableCell>