fixed ugly stuff

onyx-dot-app · Nov 22, 2024 · 3e58f9f · 3e58f9f
1 parent c6dadb2
commit 3e58f9f
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 164 deletions.
diff --git a/backend/alembic/versions/6d562f86c78b_remove_default_bot.py b/backend/alembic/versions/6d562f86c78b_remove_default_bot.py
@@ -23,6 +23,10 @@ def upgrade() -> None:
             WHERE name = 'Default Bot'
             AND bot_token = ''
             AND app_token = ''
+            AND NOT EXISTS (
+                SELECT 1 FROM slack_channel_config
+                WHERE slack_channel_config.slack_bot_id = slack_bot.id
+            )
             """
         )
     )

diff --git a/web/src/app/admin/bots/SlackBotCreationForm.tsx b/web/src/app/admin/bots/SlackBotCreationForm.tsx
@@ -1,9 +1,12 @@
 "use client";
 
+import CardSection from "@/components/admin/CardSection";
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { SlackTokensForm } from "./SlackTokensForm";
+import { SourceIcon } from "@/components/SourceIcon";
+import { AdminPageTitle } from "@/components/admin/Title";
 
 export const NewSlackBotForm = ({}: {}) => {
   const [formValues] = useState({
@@ -17,15 +20,21 @@ export const NewSlackBotForm = ({}: {}) => {
 
   return (
     <div>
-      {popup}
-      <div className="p-4">
-        <SlackTokensForm
-          isUpdate={false}
-          initialValues={formValues}
-          setPopup={setPopup}
-          router={router}
-        />
-      </div>
+      <AdminPageTitle
+        icon={<SourceIcon iconSize={36} sourceType={"slack"} />}
+        title="New Slack Bot"
+      />
+      <CardSection>
+        {popup}
+        <div className="p-4">
+          <SlackTokensForm
+            isUpdate={false}
+            initialValues={formValues}
+            setPopup={setPopup}
+            router={router}
+          />
+        </div>
+      </CardSection>
     </div>
   );
 };
diff --git a/web/src/app/admin/bots/SlackBotTokensForm.tsx b/web/src/app/admin/bots/SlackBotTokensForm.tsx
diff --git a/web/src/app/admin/bots/SlackBotUpdateForm.tsx b/web/src/app/admin/bots/SlackBotUpdateForm.tsx
@@ -78,14 +78,16 @@ export const ExistingSlackBotForm = ({
       <div className="flex items-center justify-between h-14">
         <div className="flex items-center gap-2">
           <div className="my-auto">
-            <SourceIcon iconSize={36} sourceType={"slack"} />
+            <SourceIcon iconSize={32} sourceType={"slack"} />
+          </div>
+          <div className="ml-1">
+            <EditableStringFieldDisplay
+              value={formValues.name}
+              isEditable={true}
+              onUpdate={(value) => handleUpdateField("name", value)}
+              scale={2.1}
+            />
           </div>
-          <EditableStringFieldDisplay
-            value={formValues.name}
-            isEditable={true}
-            onUpdate={(value) => handleUpdateField("name", value)}
-            scale={2.5}
-          />
         </div>
 
         <div className="flex flex-col" ref={dropdownRef}>
@@ -124,6 +126,7 @@ export const ExistingSlackBotForm = ({
                   refreshSlackBot={refreshSlackBot}
                   setPopup={setPopup}
                   router={router}
+                  onValuesChange={(values) => setFormValues(values)}
                 />
               </div>
             </div>

diff --git a/web/src/app/admin/bots/SlackTokensForm.tsx b/web/src/app/admin/bots/SlackTokensForm.tsx
@@ -5,7 +5,8 @@ import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import { createSlackBot, updateSlackBot } from "./new/lib";
 import { Button } from "@/components/ui/button";
-import { SourceIcon } from "@/components/SourceIcon";
+import { Separator } from "@/components/ui/separator";
+import { useEffect } from "react";
 
 export const SlackTokensForm = ({
   isUpdate,
@@ -14,13 +15,15 @@ export const SlackTokensForm = ({
   refreshSlackBot,
   setPopup,
   router,
+  onValuesChange,
 }: {
   isUpdate: boolean;
   initialValues: any;
   existingSlackBotId?: number;
   refreshSlackBot?: () => void;
   setPopup: (popup: { message: string; type: "error" | "success" }) => void;
   router: any;
+  onValuesChange?: (values: any) => void;
 }) => (
   <Formik
     initialValues={initialValues}
@@ -65,49 +68,65 @@ export const SlackTokensForm = ({
     }}
     enableReinitialize={true}
   >
-    {({ isSubmitting, setFieldValue, values }) => (
-      <Form className="w-full">
-        {!isUpdate && (
-          <div className="flex items-center gap-2 mb-4">
-            <div className="my-auto">
-              <SourceIcon iconSize={36} sourceType={"slack"} />
+    {({ isSubmitting, setFieldValue, values }) => {
+      useEffect(() => {
+        onValuesChange?.(values);
+      }, [values, onValuesChange]);
+
+      return (
+        <Form className="w-full">
+          {!isUpdate && (
+            <div className="">
+              <TextFormField
+                name="name"
+                label="Name This Slack Bot:"
+                type="text"
+              />
             </div>
-            <TextFormField name="name" label="Slack Bot Name" type="text" />
-          </div>
-        )}
+          )}
 
-        {!isUpdate && (
-          <div className="mb-4">
-            Please enter your Slack Bot Token and Slack App Token to give
-            Danswerbot access to your Slack!
+          {!isUpdate && (
+            <div className="mt-4">
+              <Separator />
+              Please refer to our{" "}
+              <a
+                className="text-blue-500 hover:underline"
+                href="https://docs.danswer.dev/slack_bot_setup"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                guide
+              </a>{" "}
+              if you are not sure how to get these tokens!
+            </div>
+          )}
+          <TextFormField
+            name="bot_token"
+            label="Slack Bot Token"
+            type="password"
+          />
+          <TextFormField
+            name="app_token"
+            label="Slack App Token"
+            type="password"
+          />
+          <div className="flex justify-end w-full mt-4">
+            <Button
+              type="submit"
+              disabled={
+                isSubmitting ||
+                !values.bot_token ||
+                !values.app_token ||
+                !values.name
+              }
+              variant="submit"
+              size="default"
+            >
+              {isUpdate ? "Update!" : "Create!"}
+            </Button>
           </div>
-        )}
-        <TextFormField
-          name="bot_token"
-          label="Slack Bot Token"
-          type="password"
-        />
-        <TextFormField
-          name="app_token"
-          label="Slack App Token"
-          type="password"
-        />
-        <div className="flex justify-end w-full mt-4">
-          <Button
-            type="submit"
-            disabled={
-              isSubmitting ||
-              !values.bot_token ||
-              !values.app_token ||
-              !values.name
-            }
-            variant="submit"
-            size="default"
-          >
-            {isUpdate ? "Update!" : "Create!"}
-          </Button>
-        </div>
-      </Form>
-    )}
+        </Form>
+      );
+    }}
   </Formik>
 );
diff --git a/web/src/app/admin/bots/[bot-id]/channels/SlackChannelConfigCreationForm.tsx b/web/src/app/admin/bots/[bot-id]/channels/SlackChannelConfigCreationForm.tsx
@@ -261,10 +261,12 @@ export const SlackChannelConfigCreationForm = ({
                   </Tabs>
                 </div>
 
-                <AdvancedOptionsToggle
-                  showAdvancedOptions={showAdvancedOptions}
-                  setShowAdvancedOptions={setShowAdvancedOptions}
-                />
+                <div className="mt-6">
+                  <AdvancedOptionsToggle
+                    showAdvancedOptions={showAdvancedOptions}
+                    setShowAdvancedOptions={setShowAdvancedOptions}
+                  />
+                </div>
 
                 {showAdvancedOptions && (
                   <div className="mt-4">

diff --git a/web/src/app/admin/connector/[ccPairId]/page.tsx b/web/src/app/admin/connector/[ccPairId]/page.tsx
@@ -119,16 +119,19 @@ function Main({ ccPairId }: { ccPairId: number }) {
       <BackButton
         behaviorOverride={() => router.push("/admin/indexing/status")}
       />
-      <div className="pb-1 flex mt-1">
-        <div className="mr-2 my-auto">
-          <SourceIcon iconSize={24} sourceType={ccPair.connector.source} />
+      <div className="flex items-center justify-between h-14">
+        <div className="my-auto">
+          <SourceIcon iconSize={32} sourceType={ccPair.connector.source} />
         </div>
 
-        <EditableStringFieldDisplay
-          value={ccPair.name}
-          isEditable={ccPair.is_editable_for_current_user}
-          onUpdate={handleUpdateName}
-        />
+        <div className="ml-1">
+          <EditableStringFieldDisplay
+            value={ccPair.name}
+            isEditable={ccPair.is_editable_for_current_user}
+            onUpdate={handleUpdateName}
+            scale={2.1}
+          />
+        </div>
 
         {ccPair.is_editable_for_current_user && (
           <div className="ml-auto flex gap-x-2">

diff --git a/web/src/components/EditableStringFieldDisplay.tsx b/web/src/components/EditableStringFieldDisplay.tsx
@@ -83,6 +83,7 @@ export function EditableStringFieldDisplay({
         onKeyDown={handleKeyDown}
         className={cn(
           textClassName,
+          "text-3xl font-bold text-text-800",
           "user-text",
           isEditing ? "block" : "hidden"
         )}
@@ -91,7 +92,11 @@ export function EditableStringFieldDisplay({
       {!isEditing && (
         <span
           onClick={() => isEditable && setIsEditing(true)}
-          className={cn(textClassName, "cursor-pointer user-text")}
+          className={cn(
+            textClassName,
+            "text-3xl font-bold text-text-800",
+            "cursor-pointer user-text"
+          )}
           style={{ fontSize: `${scale}rem` }}
         >
           {value}
@@ -125,7 +130,7 @@ export function EditableStringFieldDisplay({
           style={{ fontSize: `${scale}rem` }}
         >
           {isEditable && (
-            <EditIcon className={`visible ml-2`} size={8 * scale} />
+            <EditIcon className={`visible ml-2`} size={12 * scale} />
           )}
         </h1>
       )}