Merge pull request #559 from microsoft/psl-23528-bug

fix: Disable 3 dots option from Default Teams(fix for bug 23528)

Author: Roopan-Microsoft

src/frontend/src/components/common/TeamSelector.tsx

@@ -18,7 +18,8 @@ import {
   Radio,
   RadioGroup,
   Tab,
-  TabList
+  TabList,
+  Tooltip
 } from '@fluentui/react-components';
 import {
   ChevronUpDown16Regular,
@@ -61,7 +62,14 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
   const [selectionLoading, setSelectionLoading] = useState(false);
   const [uploadedTeam, setUploadedTeam] = useState<TeamConfig | null>(null);
   const [uploadSuccessMessage, setUploadSuccessMessage] = useState<string | null>(null);
-
+  // Helper function to check if a team is a default team
+  const isDefaultTeam = (team: TeamConfig): boolean => {
+    const defaultTeamIds = ['team-1', 'team-2', 'team-3'];
+    const defaultTeamNames = ['Human Resources Team', 'Product Marketing Team', 'Retail Customer Success Team'];
+    
+    return defaultTeamIds.includes(team.team_id) || 
+           defaultTeamNames.includes(team.name);
+  };
   const loadTeams = async () => {
     setLoading(true);
     setError(null);
@@ -399,7 +407,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
 
   const renderTeamCard = (team: TeamConfig, index?: number) => {
     const isSelected = tempSelectedTeam?.team_id === team.team_id;
-
+    const isDefault = isDefaultTeam(team);
     return (
       <div
         key={team.team_id || `team-${index}`}
@@ -452,13 +460,32 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
         </div>
 
         {/* Three-dot Menu Button */}
-        <Button
-          icon={<MoreHorizontal20Regular />}
-          appearance="subtle"
-          size="small"
-          onClick={(e) => handleDeleteTeam(team, e)}
-          className={styles.moreButton}
-        />
+        {isDefault ? (
+          <Tooltip
+            content="Default teams cannot be deleted."
+            relationship="label"
+            positioning="above-start"
+            withArrow
+            mountNode={document.querySelector('[role="dialog"]') || undefined}
+          >
+            <Button
+              icon={<MoreHorizontal20Regular />}
+              appearance="subtle"
+              size="small"
+              disabled={true}
+              className={`${styles.moreButton} ${styles.moreButtonDisabled || ''}`}
+              onClick={(e) => e.stopPropagation()}
+            />
+          </Tooltip>
+        ) : (
+          <Button
+            icon={<MoreHorizontal20Regular />}
+            appearance="subtle"
+            size="small"
+            onClick={(e) => handleDeleteTeam(team, e)}
+            className={styles.moreButton}
+          />
+        )}
       </div>
     );
   };

src/frontend/src/styles/TeamSelector.module.css

@@ -407,7 +407,23 @@
   background-color: var(--colorNeutralBackground3) !important;
   color: var(--colorNeutralForeground1) !important;
 }
+.moreButtonDisabled {
+  color: var(--colorNeutralForeground4) !important;
+  background-color: transparent !important;
+  cursor: not-allowed !important;
+  opacity: 0.6 !important;
+}
+
+.moreButtonDisabled:hover {
+  background-color: transparent !important;
+  color: var(--colorNeutralForeground4) !important;
+  opacity: 0.6 !important;
+}
 
+/* Ensure tooltips appear above other dialog content */
+:global(.fui-Tooltip) {
+  z-index: 9999 !important;
+}
 /* Team Selector Button */
 .teamSelectorButton {
   width: 100%;