fixed ugly stuff

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
+            )
             """
         )
     )

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>
   );
 };

web/src/app/admin/bots/SlackBotTokensForm.tsx

@@ -1,92 +0,0 @@
-import { Form, Formik } from "formik";
-import * as Yup from "yup";
-import { PopupSpec } from "@/components/admin/connectors/Popup";
-import { SlackBot } from "@/lib/types";
-import { TextFormField } from "@/components/admin/connectors/Field";
-import CardSection from "@/components/admin/CardSection";
-import { Button } from "@/components/ui/button";
-import { updateSlackBot, SlackBotCreationRequest } from "./new/lib";
-
-interface SlackBotTokensFormProps {
-  onClose: () => void;
-  setPopup: (popupSpec: PopupSpec | null) => void;
-  existingSlackApp?: SlackBot;
-  onTokensSet?: (tokens: { bot_token: string; app_token: string }) => void;
-  embedded?: boolean;
-  noForm?: boolean;
-}
-
-export const SlackBotTokensForm = ({
-  onClose,
-  setPopup,
-  existingSlackApp,
-  onTokensSet,
-  embedded = true,
-  noForm = true,
-}: SlackBotTokensFormProps) => {
-  const Wrapper = embedded ? "div" : CardSection;
-
-  const FormWrapper = noForm ? "div" : Form;
-
-  return (
-    <Wrapper className="w-full">
-      <Formik
-        initialValues={existingSlackApp || { app_token: "", bot_token: "" }}
-        validationSchema={Yup.object().shape({
-          bot_token: Yup.string().required(),
-          app_token: Yup.string().required(),
-        })}
-        onSubmit={async (values, formikHelpers) => {
-          if (embedded && onTokensSet) {
-            onTokensSet(values);
-            return;
-          }
-
-          formikHelpers.setSubmitting(true);
-          const response = await updateSlackBot(
-            existingSlackApp?.id || 0,
-            values as SlackBotCreationRequest
-          );
-          formikHelpers.setSubmitting(false);
-          if (response.ok) {
-            setPopup({
-              message: "Successfully set Slack tokens!",
-              type: "success",
-            });
-            onClose();
-          } else {
-            const errorMsg = await response.text();
-            setPopup({
-              message: `Error setting Slack tokens - ${errorMsg}`,
-              type: "error",
-            });
-          }
-        }}
-      >
-        {({ isSubmitting }) => (
-          <FormWrapper className="w-full">
-            <TextFormField
-              width="w-full"
-              name="bot_token"
-              label="Slack Bot Token"
-              type="password"
-            />
-            <TextFormField
-              width="w-full"
-              name="app_token"
-              label="Slack App Token"
-              type="password"
-            />
-            {!embedded && (
-              <div className="flex w-full">
-                <Button type="submit" disabled={isSubmitting} variant="submit">
-                  Set Tokens
-                </Button>
-              </div>
-            )}
-          </FormWrapper>
-        )}
-      </Formik>
-    </Wrapper>
-  );
-};

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>

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,6 +15,7 @@ export const SlackTokensForm = ({
   refreshSlackBot,
   setPopup,
   router,
+  onValuesChange,
 }: {
   isUpdate: boolean;
   initialValues: any;
@@ -21,6 +23,7 @@ export const SlackTokensForm = ({
   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"} />
-            </div>
-            <TextFormField name="name" label="Slack Bot Name" type="text" />
-          </div>
-        )}
+    {({ isSubmitting, setFieldValue, values }) => {
+      useEffect(() => {
+        onValuesChange?.(values);
+      }, [values, onValuesChange]);
 
-        {!isUpdate && (
-          <div className="mb-4">
-            Please enter your Slack Bot Token and Slack App Token to give
-            Danswerbot access to your Slack!
+      return (
+        <Form className="w-full">
+          {!isUpdate && (
+            <div className="">
+              <TextFormField
+                name="name"
+                label="Name This Slack Bot:"
+                type="text"
+              />
+            </div>
+          )}
+
+          {!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>
 );

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">

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">

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>
       )}