removed channels will disappear from channel list in policy edit (#31140)

webapp/channels/src/components/admin_console/access_control/policy_details/channel_list/channel_list.scss

@@ -10,10 +10,9 @@
     .ChannelList__nameColumn {
         display: inline-flex;
         align-items: center;
-        justify-content: center;
 
         span.channel-icon {
-            margin: 3px 8px 0 0;
+            margin-right: 8px;
         }
     }
 

webapp/channels/src/components/admin_console/access_control/policy_details/channel_list/channel_list.tsx

@@ -253,7 +253,7 @@ export default class ChannelList extends React.PureComponent<Props, State> {
         // Combine channels to add with existing channels
         const channelsToDisplay = [
             ...Object.values(channelsToAdd),
-            ...channels,
+            ...channels.filter((channel) => !channelsToRemove[channel.id]),
         ].slice(startCount - 1, endCount);
 
         return channelsToDisplay.map((channel) => {
@@ -271,16 +271,8 @@ export default class ChannelList extends React.PureComponent<Props, State> {
                 );
             }
 
-            const isMarkedForRemoval = channelsToRemove[channel.id] === channel;
-
             // Determine the button text and action based on the channel state
-            const buttonClassName = `group-actions TeamList_editText${isMarkedForRemoval ? ' marked-for-removal' : ''}`;
-            const buttonText = isMarkedForRemoval ? (
-                <FormattedMessage
-                    id='admin.access_control.policy.edit_policy.channel_selector.to_be_removed'
-                    defaultMessage='To be removed'
-                />
-            ) : (
+            const buttonText = (
                 <FormattedMessage
                     id='admin.access_control.policy.edit_policy.channel_selector.remove'
                     defaultMessage='Remove'
@@ -307,7 +299,7 @@ export default class ChannelList extends React.PureComponent<Props, State> {
                     remove: (
                         <a
                             id={`remove-channel-${channel.id}`}
-                            className={buttonClassName}
+                            className={'group-actions TeamList_editText'}
                             onClick={(e) => {
                                 e.preventDefault();
                                 this.removeChannel(channel);

webapp/channels/src/i18n/en.json

@@ -283,7 +283,6 @@
   "admin.access_control.policy.edit_policy.channel_selector.remove": "Remove",
   "admin.access_control.policy.edit_policy.channel_selector.subtitle": "Add channels that this attribute based access policy will apply to.",
   "admin.access_control.policy.edit_policy.channel_selector.title": "Assigned channels",
-  "admin.access_control.policy.edit_policy.channel_selector.to_be_removed": "To be removed",
   "admin.access_control.policy.edit_policy.delete_confirmation.confirm_button": "Delete Policy",
   "admin.access_control.policy.edit_policy.delete_confirmation.message": "Are you sure you want to delete this policy? This action cannot be undone.",
   "admin.access_control.policy.edit_policy.delete_confirmation.title": "Confirm Policy Deletion",