Add isDisabledGroups prop to AccessScopeDropdown and ShareScopeSwitch components

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AccessScopeDropdown.tsx

@@ -11,13 +11,17 @@ import { AiAssistantScopeType, AiAssistantAccessScope } from '../../../../interf
 
 type Props = {
   isDisabled: boolean,
+  isDisabledGroups: boolean,
   selectedAccessScope: AiAssistantAccessScope,
   onSelect: (accessScope: AiAssistantAccessScope, scopeType: AiAssistantScopeType) => void,
 }
 
 export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
   const {
-    isDisabled, selectedAccessScope, onSelect,
+    isDisabled,
+    isDisabledGroups,
+    selectedAccessScope,
+    onSelect,
   } = props;
 
   const { t } = useTranslation();
@@ -47,7 +51,11 @@ export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
         </DropdownToggle>
         <DropdownMenu>
           { [AiAssistantAccessScope.OWNER, AiAssistantAccessScope.GROUPS, AiAssistantAccessScope.PUBLIC_ONLY].map(accessScope => (
-            <DropdownItem onClick={() => selectAccessScopeHandler(accessScope)} key={accessScope}>
+            <DropdownItem
+              disabled={isDisabledGroups && accessScope === AiAssistantAccessScope.GROUPS}
+              onClick={() => selectAccessScopeHandler(accessScope)}
+              key={accessScope}
+            >
               {getAccessScopeLabel(accessScope)}
             </DropdownItem>
           ))}

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementEditShare.tsx

@@ -7,6 +7,7 @@ import {
 import type { AiAssistantAccessScope } from '~/features/openai/interfaces/ai-assistant';
 import { AiAssistantScopeType, AiAssistantShareScope } from '~/features/openai/interfaces/ai-assistant';
 import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
+import { useSWRxUserRelatedGroups } from '~/stores/user';
 
 import { AccessScopeDropdown } from './AccessScopeDropdown';
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
@@ -33,6 +34,9 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
     onSelectUserGroup,
   } = props;
 
+  const { data: userRelatedGroups } = useSWRxUserRelatedGroups();
+  const hasNoRelatedGroups = userRelatedGroups == null || userRelatedGroups.relatedGroups.length === 0;
+
   const [isShared, setIsShared] = useState(false);
   const [isSelectUserGroupModalOpen, setIsSelectUserGroupModalOpen] = useState(false);
   const [selectedUserGroupType, setSelectedUserGroupType] = useState<AiAssistantScopeType>(AiAssistantScopeType.ACCESS);
@@ -48,11 +52,11 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
 
   const selectScopeHandler = useCallback((scope: AiAssistantAccessScope | AiAssistantShareScope, scopeType: AiAssistantScopeType) => {
     onSelectScope(scope, scopeType);
-    if (scope === 'groups') {
+    if (scope === 'groups' && !hasNoRelatedGroups) {
       setSelectedUserGroupType(scopeType);
       setIsSelectUserGroupModalOpen(true);
     }
-  }, [onSelectScope]);
+  }, [hasNoRelatedGroups, onSelectScope]);
 
   return (
     <>
@@ -75,12 +79,14 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
 
         <AccessScopeDropdown
           isDisabled={!isShared}
+          isDisabledGroups={hasNoRelatedGroups}
           selectedAccessScope={selectedAccessScope}
           onSelect={selectScopeHandler}
         />
 
         <ShareScopeSwitch
           isDisabled={!isShared}
+          isDisabledGroups={hasNoRelatedGroups}
           selectedShareScope={selectedShareScope}
           selectedAccessScope={selectedAccessScope}
           onSelect={selectScopeHandler}

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/ShareScopeSwitch.tsx

@@ -20,6 +20,7 @@ type ShareScopeSwitchType = typeof ShareScopeSwitchType[keyof typeof ShareScopeS
 
 type Props = {
   isDisabled: boolean,
+  isDisabledGroups: boolean,
   selectedShareScope: AiAssistantShareScope,
   selectedAccessScope: AiAssistantAccessScope,
   onSelect: (shareScope: AiAssistantShareScope, scopeType: AiAssistantScopeType) => void,
@@ -28,6 +29,7 @@ type Props = {
 export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
   const {
     isDisabled,
+    isDisabledGroups,
     selectedShareScope,
     selectedAccessScope,
     onSelect,
@@ -60,7 +62,7 @@ export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
               name="shareScope"
               id="shareGroup"
               className="form-check-input"
-              disabled={isDisabled}
+              disabled={isDisabled || (isDisabledGroups && shareScope === ShareScopeSwitchType.GROUPS)}
               onChange={() => checkShareScopeRadioHandler(shareScope)}
               checked={selectedScope === shareScope}
             />