Added connector configuration link and external link icon to web connector page.

web/src/app/admin/connectors/web/page.tsx

@@ -4,7 +4,7 @@ import useSWR, { useSWRConfig } from "swr";
 import * as Yup from "yup";
 
 import { LoadingAnimation } from "@/components/Loading";
-import { GlobeIcon } from "@/components/icons/icons";
+import { GlobeIcon, GearIcon, ArrowSquareOutIcon } from "@/components/icons/icons";
 import { fetcher } from "@/lib/fetcher";
 import {
   SelectorFormField,
@@ -119,13 +119,16 @@ export default function Web() {
             {
               header: "Base URL",
               key: "base_url",
-              getValue: (ccPairConfig) => {
+              getValue: (ccPairStatus: ConnectorIndexingStatus<WebConfig, any>) => {
                 const connectorConfig =
-                  ccPairConfig.connector.connector_specific_config;
+                  ccPairStatus.connector.connector_specific_config;
                 return (
-                  <a className="text-blue-500" href={connectorConfig.base_url}>
+                  <div className="flex w-fit"><a className="text-blue-500 ml-1 my-auto flex" href={connectorConfig.base_url}>
                     {connectorConfig.base_url}
+                    <ArrowSquareOutIcon className="my-auto flex flex-shrink-0 text-blue-500" />
                   </a>
+                  <a className="my-auto" href={`/admin/connector/${ccPairStatus.cc_pair_id}`}><GearIcon className="ml-2 my-auto flex flex-shrink-0 text-gray-400" /></a>
+                  </div>
                 );
               },
             },

web/src/components/icons/icons.tsx

@@ -12,6 +12,8 @@ import {
   X,
   Question,
   Users,
+  Gear,
+  ArrowSquareOut,
 } from "@phosphor-icons/react";
 import {
   FiCheck,
@@ -83,6 +85,20 @@ export const UsersIcon = ({
   return <Users size={size} className={className} />;
 };
 
+export const GearIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return <Gear size={size} className={className} />;
+};
+
+export const ArrowSquareOutIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return <ArrowSquareOut size={size} className={className} />;
+}
+
 export const TrashIcon = ({
   size = 16,
   className = defaultTailwindCSS,