Update connections page with new UI (#1745)

<!--
Ensure the title clearly reflects what was changed.
Provide a clear and concise description of the changes made. The PR
should only contain the changes related to the issue, and no other
unrelated changes.
-->

Part of OPS-3164.

<img width="1920" height="993" alt="image"
src="https://github.com/user-attachments/assets/5378beb5-72ca-498c-9266-7e18fd5a71df"
/>


Available on UX

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* AI configuration status indicator displaying connection enable/disable
state

* **Refactor**
  * Simplified AI settings form with automatic save-on-change
  * Redesigned AI settings page with improved layout and organization
* Integrated AWS and MCP tool configuration into unified settings
interface

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Alexandru-Dan Pop <alexandrudanpop@gmail.com>

Author: 3 people

packages/react-ui/src/app/features/ai/ai-config-indicator.tsx

@@ -0,0 +1,28 @@
+import { t } from 'i18next';
+import { CircleCheck, CircleMinus } from 'lucide-react';
+
+type AiConfigIndicatorProps = {
+  enabled: boolean;
+};
+
+const AiConfigIndicator = ({ enabled }: AiConfigIndicatorProps) => {
+  return (
+    <div className="flex items-center gap-[6px] text-primary-900 font-medium">
+      {enabled ? (
+        <>
+          <CircleCheck className="text-success-300" size={24} />
+          <span>{t('OpenOps AI is enabled')}</span>
+        </>
+      ) : (
+        <>
+          <CircleMinus className="text-muted-foreground" size={24} />
+          <span>
+            {t('OpenOps AI is disabled - Configure a connection to enable it')}
+          </span>
+        </>
+      )}
+    </div>
+  );
+};
+
+export { AiConfigIndicator };

packages/react-ui/src/app/features/ai/ai-settings-form.tsx

@@ -1,157 +1,91 @@
-import {
-  aiFormSchemaResolver,
-  AiSettingsFormSchema,
-} from '@/app/features/ai/lib/ai-form-utils';
 import { ConnectionSelect } from '@/app/features/builder/step-settings/block-settings/connection-select';
 import {
   BlockMetadataModel,
   BlockMetadataModelSummary,
 } from '@openops/blocks-framework';
-import {
-  Button,
-  Form,
-  FormField,
-  FormItem,
-  Label,
-  Switch,
-} from '@openops/components/ui';
-import { AiConfig } from '@openops/shared';
+import { Form } from '@openops/components/ui';
 import equal from 'fast-deep-equal';
-import { t } from 'i18next';
-import { CircleCheck } from 'lucide-react';
+import debounce from 'lodash.debounce';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 type AiSettingsFormProps = {
   block: BlockMetadataModelSummary | BlockMetadataModel;
-  savedSettings?: AiConfig;
-  onSave: (settings: AiSettingsFormSchema) => void;
-  isSaving: boolean;
+  providerKey: string;
+  initialConnection?: string;
+  onSave: (connectionName: string) => void;
+  displayName?: string;
+  disabled?: boolean;
 };
 
-export const EMPTY_FORM_VALUE: AiSettingsFormSchema = {
-  enabled: false,
+type LocalForm = { connection: string };
+
+export const EMPTY_FORM_VALUE: LocalForm = {
   connection: '',
 };
 
 const AiSettingsForm = ({
   block,
-  savedSettings,
+  providerKey,
+  initialConnection,
   onSave,
-  isSaving,
+  displayName,
+  disabled = false,
 }: AiSettingsFormProps) => {
-  const form = useForm<AiSettingsFormSchema>({
-    resolver: aiFormSchemaResolver,
+  const form = useForm<LocalForm>({
     defaultValues: EMPTY_FORM_VALUE,
     mode: 'onChange',
   });
   const [initialFormValue, setInitialFormValue] =
-    useState<AiSettingsFormSchema>(EMPTY_FORM_VALUE);
+    useState<LocalForm>(EMPTY_FORM_VALUE);
 
   useEffect(() => {
-    const formValue: AiSettingsFormSchema = {
-      enabled: savedSettings?.enabled ?? false,
-      connection: savedSettings?.connection ?? '',
+    const formValue: LocalForm = {
+      connection: initialConnection ?? '',
     };
     setInitialFormValue(formValue);
     form.reset(formValue);
-  }, [savedSettings, form]);
+  }, [initialConnection, form]);
 
   const currentFormValue = form.watch();
+  const watchedConnection = form.watch('connection');
 
   const isFormUnchanged = useMemo(() => {
     return equal(currentFormValue, initialFormValue);
   }, [currentFormValue, initialFormValue]);
 
-  const isValidConnection = useMemo(() => {
-    const omit = (obj?: AiSettingsFormSchema) => {
-      const { enabled, ...rest } = obj ?? EMPTY_FORM_VALUE;
-      return rest;
-    };
-
-    return equal(omit(currentFormValue), omit(initialFormValue));
-  }, [currentFormValue, initialFormValue]);
-
-  const resetForm = () => {
-    form.reset();
-  };
+  const debouncedSave = useMemo(
+    () =>
+      debounce((connection: string, unchanged: boolean) => {
+        if (!unchanged) {
+          onSave(connection);
+          setInitialFormValue({ connection });
+        }
+      }, 300),
+    [onSave],
+  );
 
-  const onSaveClick = () => {
-    const formValue = form.getValues();
-    onSave({
-      ...savedSettings,
-      ...formValue,
-    });
-  };
+  useEffect(() => {
+    debouncedSave(watchedConnection ?? '', isFormUnchanged);
+  }, [debouncedSave, watchedConnection, isFormUnchanged]);
 
-  const descriptionText = t(
-    'Enables OpenOps Assistant and other AI-powered features such as the CLI command generation.',
-  );
+  useEffect(() => {
+    return () => {
+      debouncedSave.cancel();
+    };
+  }, [debouncedSave]);
 
   return (
     <Form {...form}>
-      <form className="flex-1 flex flex-col gap-4">
-        <FormField
-          control={form.control}
-          name="enabled"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <div className="flex items-center gap-[6px]">
-                <Switch
-                  id="enabled"
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-                <Label
-                  className="text-lg font-bold leading-6"
-                  htmlFor="enabled"
-                >
-                  {t('Enable OpenOps AI')}
-                </Label>
-              </div>
-              <p className="mt-8 text-base font-normal leading-6 text-primary-900">
-                {descriptionText}
-              </p>
-            </FormItem>
-          )}
+      <form>
+        <ConnectionSelect
+          disabled={disabled}
+          allowDynamicValues={false}
+          block={block}
+          providerKey={providerKey}
+          name={'connection'}
+          displayName={displayName}
         />
-        <div className="max-w-[516px]">
-          <ConnectionSelect
-            disabled={!currentFormValue.enabled}
-            allowDynamicValues={false}
-            block={block}
-            providerKey={'AI'}
-            name={'connection'}
-          />
-        </div>
-
-        <div className="flex items-center justify-between max-w-[516px]">
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              type="button"
-              onClick={resetForm}
-              disabled={isSaving || isFormUnchanged}
-            >
-              {t('Cancel')}
-            </Button>
-            <Button
-              className="w-[95px]"
-              type="button"
-              disabled={!form.formState.isValid || isFormUnchanged}
-              onClick={onSaveClick}
-              loading={isSaving}
-            >
-              {t('Save')}
-            </Button>
-          </div>
-          {savedSettings?.id && isValidConnection && (
-            <div className="flex items-center gap-2">
-              <CircleCheck size={24} className="text-success-300" />
-              <span>{t('Valid Connection')}</span>
-            </div>
-          )}
-        </div>
       </form>
     </Form>
   );