feat: connection name can be edited through UI (#12803)

* feat: connection name can be edited through UI

* fix: changes requested by edmundito

* 1. feat: Added connection name edit in connection settings
2. feat: Added connection name in listing connections page
3. fix: requested changes

* chore: handle UI and e2e tests

* chore: fix e2e tests for webapp

* fix: UI margins

* fix: webe2e tests

* fix: input is not focused when clicked on name

* fix: disable input while making API call

* feat: added enter/esc functionality to connection name edit

Author: harshithmullapudi

airbyte-webapp-e2e-tests/cypress/integration/connection.spec.js

@@ -26,9 +26,6 @@ describe("Connection main actions", () => {
     cy.get("button[type=submit]").first().click();
     cy.wait("@updateConnection");
     cy.get("span[data-id='success-result']").should("exist");
-
-    cy.get("div[data-id='status-step']").click();
-    cy.get("div").contains("5 min").should("exist");
 });
 
   it("Delete connection", () => {

airbyte-webapp-e2e-tests/cypress/support/commands/connection.js

@@ -11,6 +11,7 @@ Cypress.Commands.add("createTestConnection", (sourceName, destinationName) => {
 
   cy.wait("@discoverSchema");
 
+  cy.get("div[data-testid='connectionName']").type("Connection name");
   cy.get("div[data-testid='schedule']").click();
   cy.get("div[data-testid='manual']").click();
 

airbyte-webapp/src/components/ConnectorCard/ConnectorCard.tsx

@@ -0,0 +1,72 @@
+import styled from "styled-components";
+
+import { ReleaseStageBadge } from "components/ReleaseStageBadge";
+
+import { ReleaseStage } from "core/request/AirbyteClient";
+import { getIcon } from "utils/imageUtils";
+
+type Props = {
+  connectionName: string;
+  icon?: string;
+  connectorName: string;
+  releaseStage?: ReleaseStage;
+};
+
+const MainComponent = styled.div`
+  display: flex;
+  padding: 10px;
+  width: 220px;
+  align-items: center;
+`;
+
+const Details = styled.div`
+  width: 160px;
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  font-weight: normal;
+`;
+
+const EntityIcon = styled.div`
+  height: 30px;
+  width: 30px;
+`;
+
+const ConnectionName = styled.div`
+  font-size: 14px;
+  color: #1a194d;
+  text-align: left;
+  margin-right: 10px;
+`;
+
+const ConnectorDetails = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const ConnectorName = styled.div`
+  font-size: 11px;
+  margin-top: 1px;
+  color: #afafc1;
+  text-align: left;
+`;
+
+function ConnectorCard(props: Props) {
+  const { connectionName, connectorName, icon, releaseStage } = props;
+
+  return (
+    <MainComponent>
+      {icon && <EntityIcon>{getIcon(icon)}</EntityIcon>}
+      <Details>
+        <ConnectorDetails>
+          <ConnectionName>{connectionName}</ConnectionName>
+          {releaseStage && <ReleaseStageBadge stage={releaseStage} />}
+        </ConnectorDetails>
+        <ConnectorName>{connectorName} </ConnectorName>
+      </Details>
+    </MainComponent>
+  );
+}
+
+export default ConnectorCard;

airbyte-webapp/src/components/ConnectorCard/index.tsx

@@ -0,0 +1,3 @@
+import ConnectorCard from "./ConnectorCard";
+
+export default ConnectorCard;

airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx

@@ -35,7 +35,7 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeS
   const { hasFeature } = useFeatureService();
   const allowSync = hasFeature(FeatureItem.AllowSync);
 
-  const sortBy = query.sortBy || "entity";
+  const sortBy = query.sortBy || "entityName";
   const sortOrder = query.order || SortOrderEnum.ASC;
 
   const onSortClick = useCallback(
@@ -61,7 +61,7 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeS
       if (sortBy === "lastSync") {
         result = b[sortBy] - a[sortBy];
       } else {
-        result = a[`${sortBy}Name`].toLowerCase().localeCompare(b[`${sortBy}Name`].toLowerCase());
+        result = a[sortBy].toLowerCase().localeCompare(b[sortBy].toLowerCase());
       }
 
       if (sortOrder === SortOrderEnum.DESC) {
@@ -77,6 +77,24 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeS
 
   const columns = React.useMemo(
     () => [
+      {
+        Header: (
+          <>
+            <FormattedMessage id="tables.name" />
+            <SortButton
+              wasActive={sortBy === "name"}
+              lowToLarge={sortOrder === SortOrderEnum.ASC}
+              onClick={() => onSortClick("name")}
+            />
+          </>
+        ),
+        headerHighlighted: true,
+        accessor: "name",
+        customWidth: 30,
+        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
+          <NameCell value={cell.value} enabled={row.original.enabled} status={row.original.lastSyncStatus} />
+        ),
+      },
       {
         Header: (
           <>
@@ -86,20 +104,18 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeS
               <FormattedMessage id={`tables.${entity}ConnectionToName`} />
             )}
             <SortButton
-              wasActive={sortBy === "entity"}
+              wasActive={sortBy === "entityName"}
               lowToLarge={sortOrder === SortOrderEnum.ASC}
-              onClick={() => onSortClick("entity")}
+              onClick={() => onSortClick("entityName")}
             />
           </>
         ),
         headerHighlighted: true,
         accessor: "entityName",
-        customWidth: 40,
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
           <NameCell
             value={cell.value}
             enabled={row.original.enabled}
-            status={row.original.lastSyncStatus}
             icon={entity === "connection"}
             img={row.original.entityIcon}
           />
@@ -114,9 +130,9 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeS
               <FormattedMessage id="tables.connector" />
             )}
             <SortButton
-              wasActive={sortBy === "connector"}
+              wasActive={sortBy === "connectorName"}
               lowToLarge={sortOrder === SortOrderEnum.ASC}
-              onClick={() => onSortClick("connector")}
+              onClick={() => onSortClick("connectorName")}
             />
           </>
         ),

airbyte-webapp/src/components/EntityTable/types.ts

@@ -17,6 +17,7 @@ type EntityTableDataItem = {
 
 type ITableDataItem = {
   connectionId: string;
+  name: string;
   entityName: string;
   connectorName: string;
   enabled: boolean;

airbyte-webapp/src/components/EntityTable/utils.tsx

@@ -90,6 +90,7 @@ export const getConnectionTableData = (
 
     return {
       connectionId: connection.connectionId,
+      name: connection.name,
       entityName:
         type === "connection"
           ? `${connection.source?.sourceName} - ${connection.source?.name}`

airbyte-webapp/src/components/base/Input/Input.tsx

@@ -1,6 +1,6 @@
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { useIntl } from "react-intl";
 import { useToggle } from "react-use";
 import styled from "styled-components";
@@ -23,6 +23,7 @@ const getBackgroundColor = (props: IStyleProps) => {
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   error?: boolean;
   light?: boolean;
+  defaultFocus?: boolean;
 }
 
 const InputContainer = styled.div<InputProps>`
@@ -78,7 +79,10 @@ const VisibilityButton = styled(Button)`
 `;
 
 const Input: React.FC<InputProps> = (props) => {
+  const { defaultFocus = false } = props;
+
   const { formatMessage } = useIntl();
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const [isContentVisible, setIsContentVisible] = useToggle(false);
   const [focused, toggleFocused] = useToggle(false);
 
@@ -87,10 +91,17 @@ const Input: React.FC<InputProps> = (props) => {
   const type = isPassword ? (isContentVisible ? "text" : "password") : props.type;
   const onInputFocusChange = () => toggleFocused();
 
+  useEffect(() => {
+    if (defaultFocus && inputRef.current !== null) {
+      inputRef.current.focus();
+    }
+  }, [inputRef, defaultFocus]);
+
   return (
     <InputContainer {...props} className={focused ? "input-container--focused" : undefined}>
       <InputComponent
         {...props}
+        ref={inputRef}
         type={type}
         isPassword={isPassword}
         onFocus={onInputFocusChange}

airbyte-webapp/src/components/index.tsx

@@ -19,3 +19,4 @@ export * from "./Spinner";
 export * from "./StatusIcon";
 export * from "./TextWithHTML";
 export * from "./ProgressBar";
+export * from "./ConnectorCard";

airbyte-webapp/src/hooks/services/useConnectionHook.tsx

@@ -32,6 +32,7 @@ export const connectionsKeys = {
 };
 
 export type ValuesProps = {
+  name?: string;
   schedule: ConnectionSchedule | null;
   prefix: string;
   syncCatalog: SyncSchema;

airbyte-webapp/src/locales/en.json

@@ -32,11 +32,12 @@
   "form.noConnectorFound": "No matching connector found",
   "form.sourceName.placeholder": "Your source name",
   "form.destinationName.placeholder": "Your destination name",
+  "form.connectionName": "Name",
   "form.connectionName.placeholder": "Name",
   "form.name": "Name *",
   "form.sourceName.message": "Pick a name to help you identify this source in Airbyte",
   "form.destinationName.message": "Pick a name to help you identify this destination in Airbyte",
-  "form.connectionName.message": "Pick a name to help you identify this source in Airbyte",
+  "form.connectionName.message": "Pick a name to help you identify this connection",
   "form.sourceType": "Source type",
   "form.destinationType": "Destination type",
   "form.connectionType": "Connector type",

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import React, { Suspense, useState } from "react";
 import { Navigate, Route, Routes, useParams } from "react-router-dom";
 
 import { LoadingPage, MainPageWithScroll } from "components";
@@ -26,6 +26,7 @@ const ConnectionItemPage: React.FC = () => {
   const connectionId = params.connectionId || "";
   const currentStep = params["*"] || ConnectionSettingsRoutes.STATUS;
   const connection = useGetConnection(connectionId);
+  const [isStatusUpdating, setStatusUpdating] = useState(false);
 
   const { source, destination } = connection;
 
@@ -68,6 +69,7 @@ const ConnectionItemPage: React.FC = () => {
           destination={destination}
           connection={connection}
           currentStep={currentStep}
+          onStatusUpdating={setStatusUpdating}
         />
       }
       error={
@@ -80,7 +82,7 @@ const ConnectionItemPage: React.FC = () => {
         <Routes>
           <Route
             path={ConnectionSettingsRoutes.STATUS}
-            element={<StatusView connection={connection} frequencyText={frequency?.text} />}
+            element={<StatusView connection={connection} isStatusUpdating={isStatusUpdating} />}
           />
           <Route
             path={ConnectionSettingsRoutes.REPLICATION}