fix(ui): guard against empty plugin prop on connection creation page (#8918)

Author: bujjibabukatta

config-ui/src/plugins/components/connection-form/index.tsx

@@ -110,14 +110,18 @@ export const ConnectionForm = ({ plugin, connectionId, onSuccess }: Props) => {
   const {
     name,
     connection: { docLink, fields, initialValues },
-  } = getPluginConfig(plugin);
+  } = getPluginConfig(plugin) ?? {};
 
   const disabled = useMemo(() => {
     return Object.values(errors).some(Boolean);
   }, [errors]);
 
   const sanitizedCustomHeaders = useMemo(() => sanitizeCustomHeaders(values.customHeaders), [values.customHeaders]);
 
+  if (!plugin || !name) {
+    return null;
+  }
+
   const handleTest = async () => {
     const isUpdate = type === 'update' && !!connectionId;
     await operator(

config-ui/src/routes/connection/connections.tsx

@@ -61,8 +61,9 @@ export const Connections = () => {
     setPlugin(plugin);
   };
 
-  const handleShowFormDialog = () => {
+  const handleShowFormDialog = (pluginName?: string) => {
     setType('form');
+    if (pluginName) setPlugin(pluginName);
   };
 
   const handleHideDialog = () => {
@@ -168,7 +169,7 @@ export const Connections = () => {
           <ConnectionList plugin={plugin} onCreate={handleShowFormDialog} />
         </Modal>
       )}
-      {type === 'form' && pluginConfig && (
+      {type === 'form' && plugin && pluginConfig && (
         <Modal
           open
           width={820}