Merge pull request #8170 from weseek/imprv/132898-133245-differentiate-external-groups-in-group-select

show badge next to external user group

apps/app/src/components/SavePageControls/GrantSelector/GrantSelector.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
 
-import { isPopulated } from '@growi/core';
-import type { GroupType, IGrantedGroup } from '@growi/core';
+import { isPopulated, GroupType, type IGrantedGroup } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 import {
   UncontrolledDropdown,
@@ -185,7 +184,8 @@ export const GrantSelector = (props: Props): JSX.Element => {
         { myUserGroups.map((group) => {
           return (
             <button key={group.item._id} type="button" className="list-group-item list-group-item-action" onClick={() => groupListItemClickHandler(group)}>
-              <h5>{group.item.name}</h5>
+              <h5 className="d-inline-block">{group.item.name}</h5>
+              {group.type === GroupType.externalUserGroup && <span className="ml-2 badge badge-pill badge-info">external</span>}
               {/* TODO: Replace <div className="small">(TBD) List group members</div> */}
             </button>
           );