[ResponseOps][PerUserAuth] Connectors list redesign

x-pack/platform/plugins/private/translations/translations/de-DE.json

@@ -55014,8 +55014,6 @@
     "xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteDisabledTitle": "Connectors können nicht gelöscht werden",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteLabel": "{count} löschen",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListLabel": "Verfügbare Connector-Typen",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorDescription": "Connector autorisieren",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorName": "Autorisieren",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationDescription": "Autorisierung widerrufen",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationName": "Autorisierung abbrechen",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDescription": "Diesen Connector löschen",

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -54829,8 +54829,6 @@
     "xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteDisabledTitle": "Impossible de supprimer les connecteurs",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteLabel": "Supprimer {count}",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListLabel": "Types de connecteurs disponibles",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorDescription": "Autoriser le connecteur",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorName": "Autoriser",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationDescription": "Annuler l'autorisation",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationName": "Annuler l'autorisation",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDescription": "Supprimer ce connecteur",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -55223,8 +55223,6 @@
     "xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteDisabledTitle": "コネクターを削除できません",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteLabel": "{count} 件を削除",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListLabel": "利用可能なコネクタータイプ",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorDescription": "コネクターを認証",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorName": "認証",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationDescription": "認証をキャンセル",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationName": "承認取り消し",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDescription": "このコネクターを削除",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -55213,8 +55213,6 @@
     "xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteDisabledTitle": "无法删除连接器",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteLabel": "删除 {count} 个",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListLabel": "可用连接器类型",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorDescription": "授权连接器",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorName": "授权",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationDescription": "取消授权",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationName": "取消授权",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDescription": "删除此连接器",

x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx

@@ -904,7 +904,7 @@ describe('actions_connectors_list', () => {
       expect(screen.queryByTestId('authorizeConnector')).not.toBeInTheDocument();
     });
 
-    it('shows Cancel button when isAwaitingCallback is true (user in OAuth flow)', async () => {
+    it('shows "Connecting..." button with loading spinner and cancel icon when isAwaitingCallback is true', async () => {
       useConnectorOAuthConnect.mockReturnValue({
         connect: jest.fn(),
         cancelConnect: jest.fn(),
@@ -937,10 +937,96 @@ describe('actions_connectors_list', () => {
       );
 
       expect(await screen.findByTestId('actionsTable')).toBeInTheDocument();
+
+      const connectingButton = await screen.findByTestId('connectingConnector');
+      expect(connectingButton).toBeInTheDocument();
+      expect(connectingButton).toHaveTextContent('Connecting...');
+      expect(connectingButton).toBeDisabled();
+
       expect(await screen.findByTestId('cancelAuthorizeConnector')).toBeInTheDocument();
+
       expect(screen.queryByTestId('authorizeConnector')).not.toBeInTheDocument();
     });
 
+    it('shows "Connecting..." button with loading spinner when isConnecting is true', async () => {
+      useConnectorOAuthConnect.mockReturnValue({
+        connect: jest.fn(),
+        cancelConnect: jest.fn(),
+        isConnecting: true,
+        isAwaitingCallback: false,
+      });
+
+      const actions: ActionConnector[] = [
+        createMockActionConnector({
+          id: 'oauth-connector',
+          actionTypeId: 'google-drive',
+          name: 'Google Drive Connector',
+          referencedByCount: 1,
+          config: { authType: 'oauth_authorization_code' },
+          userAuthStatus: 'not_connected',
+        }),
+      ];
+
+      render(
+        <IntlProvider>
+          <ActionsConnectorsList
+            setAddFlyoutVisibility={() => {}}
+            loadActions={async () => {}}
+            editItem={() => {}}
+            isLoadingActions={false}
+            actions={actions}
+            setActions={() => {}}
+          />
+        </IntlProvider>
+      );
+
+      expect(await screen.findByTestId('actionsTable')).toBeInTheDocument();
+      const connectButton = await screen.findByTestId('authorizeConnector');
+      expect(connectButton).toHaveTextContent('Connecting...');
+      expect(screen.queryByTestId('cancelAuthorizeConnector')).not.toBeInTheDocument();
+    });
+
+    it('calls cancelConnect when cancel icon is clicked during awaiting callback', async () => {
+      const cancelConnect = jest.fn();
+      const user = userEvent.setup();
+
+      useConnectorOAuthConnect.mockReturnValue({
+        connect: jest.fn(),
+        cancelConnect,
+        isConnecting: false,
+        isAwaitingCallback: true,
+      });
+
+      const actions: ActionConnector[] = [
+        createMockActionConnector({
+          id: 'oauth-connector',
+          actionTypeId: 'google-drive',
+          name: 'Google Drive Connector',
+          referencedByCount: 1,
+          config: { authType: 'oauth_authorization_code' },
+          userAuthStatus: 'not_connected',
+        }),
+      ];
+
+      render(
+        <IntlProvider>
+          <ActionsConnectorsList
+            setAddFlyoutVisibility={() => {}}
+            loadActions={async () => {}}
+            editItem={() => {}}
+            isLoadingActions={false}
+            actions={actions}
+            setActions={() => {}}
+          />
+        </IntlProvider>
+      );
+
+      const cancelButton = await screen.findByTestId('cancelAuthorizeConnector');
+      await user.click(cancelButton);
+
+      expect(cancelConnect).toHaveBeenCalled();
+    });
+
     it('calls setActions with updated userAuthStatus to connected after successful authorization', async () => {
       const setActions = jest.fn();
       const user = userEvent.setup();

x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx

@@ -249,42 +249,66 @@ const ActionsConnectorsList = ({
         const name = getConnectorName(value, item);
 
         const link = (
-          <EuiFlexGroup alignItems="center" gutterSize="xs">
+          <EuiFlexGroup direction="column" gutterSize="xs">
             <EuiFlexItem grow={false}>
-              <EuiLink
-                data-test-subj={`edit${item.id}`}
-                title={name}
-                onClick={() => editItem(item, EditConnectorTabs.Configuration)}
-                key={item.id}
-                disabled={
-                  isDisabledEarsConnector(item) ||
-                  (actionTypesIndex ? !actionTypesIndex[item.actionTypeId]?.enabled : true)
-                }
-              >
-                {name}
-              </EuiLink>
+              <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
+                <EuiFlexItem grow={false}>
+                  <EuiLink
+                    data-test-subj={`edit${item.id}`}
+                    title={name}
+                    onClick={() => editItem(item, EditConnectorTabs.Configuration)}
+                    key={item.id}
+                    disabled={
+                      isDisabledEarsConnector(item) ||
+                      (actionTypesIndex ? !actionTypesIndex[item.actionTypeId]?.enabled : true)
+                    }
+                  >
+                    {name}
+                  </EuiLink>
+                </EuiFlexItem>
+                {item.isMissingSecrets ? (
+                  <EuiFlexItem grow={false}>
+                    <EuiIconTip
+                      iconProps={{
+                        'data-test-subj': `missingSecrets_${item.id}`,
+                        style: { verticalAlign: 'text-top' },
+                      }}
+                      type="warning"
+                      color="warning"
+                      content={i18n.translate(
+                        'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.missingSecretsDescription',
+                        { defaultMessage: 'Sensitive information was not imported' }
+                      )}
+                      position="right"
+                    />
+                  </EuiFlexItem>
+                ) : null}
+                {showDeprecatedTooltip && (
+                  <EuiFlexItem grow={false}>
+                    <ConnectorIconTipWithSpacing />
+                  </EuiFlexItem>
+                )}
+              </EuiFlexGroup>
             </EuiFlexItem>
-            {item.isMissingSecrets ? (
+            {item.isPreconfigured && (
               <EuiFlexItem grow={false}>
-                <EuiIconTip
-                  iconProps={{
-                    'data-test-subj': `missingSecrets_${item.id}`,
-                    style: { verticalAlign: 'text-top' },
-                  }}
-                  type="warning"
-                  color="warning"
-                  content={i18n.translate(
-                    'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.missingSecretsDescription',
-                    { defaultMessage: 'Sensitive information was not imported' }
+                <EuiBetaBadge
+                  data-test-subj="preConfiguredTitleMessage"
+                  label={i18n.translate(
+                    'xpack.triggersActionsUI.sections.actionsConnectorsList.preconfiguredTitleMessage',
+                    {
+                      defaultMessage: 'Preconfigured',
+                    }
                   )}
-                  position="right"
+                  tooltipContent={i18n.translate(
+                    'xpack.triggersActionsUI.sections.actionsConnectorsList.preconfiguredTooltip',
+                    {
+                      defaultMessage: "This connector can't be deleted.",
+                    }
+                  )}
+                  size="s"
                 />
               </EuiFlexItem>
-            ) : null}
-            {showDeprecatedTooltip && (
-              <EuiFlexItem grow={false}>
-                <ConnectorIconTipWithSpacing />
-              </EuiFlexItem>
             )}
             {isDisabledEarsConnector(item) && (
               <EuiFlexItem grow={false}>
@@ -657,20 +681,7 @@ const DeleteOperation: React.FunctionComponent<{
   onDelete: () => void;
 }> = ({ item, canDelete, onDelete }) => {
   if (item.isPreconfigured) {
-    return (
-      <EuiFlexItem grow={false}>
-        <EuiBetaBadge
-          data-test-subj="preConfiguredTitleMessage"
-          label={i18n.translate(
-            'xpack.triggersActionsUI.sections.actionsConnectorsList.preconfiguredTitleMessage',
-            {
-              defaultMessage: 'Preconfigured',
-            }
-          )}
-          tooltipContent="This connector can't be deleted."
-        />
-      </EuiFlexItem>
-    );
+    return null;
   }
   return (
     <EuiFlexItem grow={false}>
@@ -836,46 +847,51 @@ const OAuthOperations: React.FunctionComponent<{
     <>
       {!isUserConnectedToConnector && (
         <EuiFlexItem grow={false}>
-          {isAwaitingCallback ? (
-            <EuiToolTip
-              key="cancel"
-              content={i18n.translate(
-                'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationDescription',
-                { defaultMessage: 'Cancel authorization' }
-              )}
-            >
-              <EuiButtonIcon
-                data-test-subj="cancelAuthorizeConnector"
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationName',
-                  { defaultMessage: 'Cancel authorization' }
-                )}
-                onClick={cancelConnect}
-                iconType="cross"
-                color="danger"
-              />
-            </EuiToolTip>
-          ) : (
-            <EuiToolTip
-              key="authorize"
-              content={i18n.translate(
-                'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorDescription',
-                { defaultMessage: 'Authorize connector' }
-              )}
-            >
-              <EuiButtonIcon
-                data-test-subj="authorizeConnector"
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorName',
-                  { defaultMessage: 'Authorize' }
-                )}
-                isLoading={isConnecting}
-                disabled={isDisconnecting}
+          <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                data-test-subj={isAwaitingCallback ? 'connectingConnector' : 'authorizeConnector'}
                 onClick={connect}
-                iconType="link"
-              />
-            </EuiToolTip>
-          )}
+                color="text"
+                isLoading={isConnecting || isAwaitingCallback}
+                disabled={isDisconnecting || isAwaitingCallback}
+                size="s"
+              >
+                {isConnecting || isAwaitingCallback
+                  ? i18n.translate(
+                      'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.connectingButton',
+                      { defaultMessage: 'Connecting...' }
+                    )
+                  : i18n.translate(
+                      'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorButton',
+                      { defaultMessage: 'Connect to your account' }
+                    )}
+              </EuiButton>
+            </EuiFlexItem>
+            {isAwaitingCallback && (
+              <EuiFlexItem grow={false}>
+                <EuiToolTip
+                  content={i18n.translate(
+                    'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationDescription',
+                    { defaultMessage: 'Cancel authorization' }
+                  )}
+                >
+                  <EuiButtonIcon
+                    data-test-subj="cancelAuthorizeConnector"
+                    aria-label={i18n.translate(
+                      'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationName',
+                      { defaultMessage: 'Cancel authorization' }
+                    )}
+                    onClick={cancelConnect}
+                    iconType="cross"
+                    display="base"
+                    color="text"
+                    size="s"
+                  />
+                </EuiToolTip>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
         </EuiFlexItem>
       )}
       {isUserConnectedToConnector && (
@@ -886,17 +902,28 @@ const OAuthOperations: React.FunctionComponent<{
               { defaultMessage: 'Disconnect connector' }
             )}
           >
-            <EuiButtonIcon
+            <EuiButton
               data-test-subj="disconnectConnector"
               aria-label={i18n.translate(
                 'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.disconnectConnectorName',
                 { defaultMessage: 'Disconnect' }
               )}
               isLoading={isDisconnecting}
               disabled={isConnecting || isAwaitingCallback}
+              size="s"
+              color="text"
               onClick={() => setShowDisconnectConfirm(true)}
-              iconType="linkSlash"
-            />
+            >
+              {isDisconnecting || isAwaitingCallback
+                ? i18n.translate(
+                    'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.disconnectingConnectorButton',
+                    { defaultMessage: 'Disconnecting' }
+                  )
+                : i18n.translate(
+                    'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.disconnectConnectorButton',
+                    { defaultMessage: 'Disconnect' }
+                  )}
+            </EuiButton>
           </EuiToolTip>
         </EuiFlexItem>
       )}