MM-60616: Shared Channels - System Console E2E (#28379)

* fix rc content types

* api spec

* don't ignore content type when parsing body

* secure connections:
- create
- read
- update
- delete
- share
- accept

* title

* wip

* manage shared channels, other fixes

* revert

* revert old

* maxlines

* add team selector, tooltip fix, msg fixes

* cleanup

* remote disabled state admindef

* add team label to channels input, fix i18n

* add filter

* review fixes, other fixes

* cleanup

* refactor channel fetching

* move modals

* fix imports, fix collected id

* remove unused action

* tabs visibility

when connection pending, hide tabs if none from home are shared.
when connection is connected, always show tabs

* api docs invite/uninvite response type

* fix modal id ref

* Remove the generate invite option for confirmed clusters

* e2e: add empty state test

* e2e: add create flow test

* fix modal id ref

* rev: double negation

* rev: server side password for create flow

* rev: remote cluster type 0 token, delete_at

* testing a11y, ids

* e2e

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Miguel de la Cruz <miguel@mcrx.me>

webapp/channels/src/components/admin_console/secure_connections/secure_connection_detail.tsx

@@ -154,6 +154,7 @@ export default function SecureConnectionDetail(props: Props) {
                                 >
                                     <Input
                                         type='text'
+                                        data-testid='organization-name-input'
                                         value={remoteCluster?.display_name ?? ''}
                                         onChange={handleNameChange}
                                         autoFocus={isCreating}
@@ -170,6 +171,7 @@ export default function SecureConnectionDetail(props: Props) {
                                     })}
                                 >
                                     <TeamSelector
+                                        testId='destination-team-input'
                                         value={remoteCluster.default_team_id ?? ''}
                                         teamsById={teamsById}
                                         onChange={handleTeamChange}

webapp/channels/src/components/admin_console/secure_connections/secure_connection_row.tsx

@@ -25,9 +25,14 @@ type Props = {
 export default function SecureConnectionRow(props: Props) {
     const {remoteCluster: rc} = props;
 
+    const titleId = `${rc.remote_id}-title`;
+
     return (
-        <RowLink to={getEditLocation(rc)}>
-            <Title>{rc.display_name}</Title>
+        <RowLink
+            to={getEditLocation(rc)}
+            aria-labelledby={titleId}
+        >
+            <Title id={titleId}>{rc.display_name}</Title>
             <Detail>
                 <ConnectionStatusLabel rc={rc}/>
                 <RowMenu {...props}/>
@@ -59,10 +64,11 @@ const RowMenu = ({remoteCluster: rc, onDeleteSuccess, disabled}: Props) => {
     return (
         <Menu.Container
             menuButton={{
-                id: `${menuId}-button`,
-                class: classNames('btn btn-tertiary btn-sm', {disabled}),
+                id: `${menuId}-button-${rc.remote_id}`,
+                class: classNames('btn btn-tertiary btn-sm connection-row-menu-button', {disabled}),
                 disabled,
                 children: !disabled && <DotsHorizontalIcon size={16}/>,
+                'aria-label': formatMessage({id: 'admin.secure_connection_row.menu-button.aria_label', defaultMessage: 'Connection options for {connection}'}, {connection: rc.display_name}),
             }}
             menu={{
                 id: menuId,
@@ -126,7 +132,7 @@ const RowLink = styled(Link<RemoteCluster>).attrs({className: 'secure-connection
         border-bottom: 0;
     }
 
-    #${menuId}-button {
+    .connection-row-menu-button {
         padding: 0px 8px;
     }
 `;

webapp/channels/src/components/admin_console/secure_connections/team_selector.tsx

@@ -14,6 +14,7 @@ export type Props = {
     value: string;
     teamsById: IDMappedObjects<Team>;
     onChange: (teamId: string) => void;
+    testId: string;
 }
 
 const TeamSelector = (props: Props): JSX.Element => {
@@ -33,6 +34,7 @@ const TeamSelector = (props: Props): JSX.Element => {
     return (
         <DropdownInput
             className='team_selector'
+            testId={props.testId}
             required={true}
             onChange={handleTeamChange}
             value={value ? {label: value.display_name, value: value.id} : undefined}

webapp/channels/src/i18n/en.json

@@ -2210,6 +2210,7 @@
   "admin.secure_connection_detail.shared_channels.table.remote_actions.remove": "Remove",
   "admin.secure_connection_detail.shared_channels.table.team_home": "Current Team",
   "admin.secure_connection_detail.shared_channels.table.team_remote": "Destination Team",
+  "admin.secure_connection_row.menu-button.aria_label": "Connection options for {connection}",
   "admin.secure_connection_row.menu.aria_label": "secure connection row menu",
   "admin.secure_connection_row.menu.delete": "Delete",
   "admin.secure_connection_row.menu.edit": "Edit",