66 AccordionSummary ,
77 AccordionDetails ,
88 Tooltip ,
9- Grid ,
109 Alert ,
1110 Skeleton ,
1211 IconButton ,
@@ -17,7 +16,7 @@ import {
1716 Tabs ,
1817 Tab ,
1918} from "@mui/material" ;
20-
19+ import { Grid } from "@mui/system" ;
2120import { ApiGetCall , ApiPostCall } from "/src/api/ApiCall" ;
2221import { CippDataTable } from "../CippTable/CippDataTable" ;
2322import { PlusIcon , ShieldCheckIcon , WrenchIcon } from "@heroicons/react/24/outline" ;
@@ -29,6 +28,7 @@ import {
2928 Error ,
3029 ExpandMore ,
3130 Save ,
31+ Sync ,
3232 TaskAlt ,
3333 Undo ,
3434 Upload ,
@@ -76,6 +76,7 @@ const CippAppPermissionBuilder = ({
7676 isSuccess : spSuccess ,
7777 isFetching : spFetching ,
7878 isLoading : spLoading ,
79+ refetch : refetchServicePrincipals ,
7980 } = ApiGetCall ( {
8081 url : "/api/ExecServicePrincipals" ,
8182 queryKey : "execServicePrincipals" ,
@@ -366,6 +367,7 @@ const CippAppPermissionBuilder = ({
366367 } ,
367368 } ,
368369 } ) ;
370+ setExpanded ( "00000003-0000-0000-c000-000000000000" ) ; // Automatically expand Microsoft Graph
369371 }
370372 } else if ( ! _ . isEqual ( currentPermissions , initialPermissions ) ) {
371373 setSelectedApp ( [ ] ) ; // Avoid redundant updates
@@ -384,6 +386,11 @@ const CippAppPermissionBuilder = ({
384386 setNewPermissions ( currentPermissions ) ;
385387 setInitialPermissions ( currentPermissions ) ;
386388 setPermissionsImported ( true ) ;
389+
390+ // Automatically expand if only one service principal exists
391+ if ( newApps . length === 1 ) {
392+ setExpanded ( newApps [ 0 ] . appId ) ;
393+ }
387394 }
388395 }
389396 } , [
@@ -560,7 +567,7 @@ const CippAppPermissionBuilder = ({
560567 < >
561568 < Stack spacing = { 2 } >
562569 < Grid container sx = { { display : "flex" , alignItems : "center" } } spacing = { 2 } >
563- < Grid item xl = { 8 } xs = { 12 } >
570+ < Grid item size = { { xl : 8 , xs : 12 } } >
564571 < CippFormComponent
565572 type = "autoComplete"
566573 label = "Application Permissions"
@@ -622,7 +629,7 @@ const CippAppPermissionBuilder = ({
622629 </ Alert >
623630 ) }
624631 < Grid container sx = { { display : "flex" , alignItems : "center" } } spacing = { 2 } >
625- < Grid item xl = { 8 } xs = { 12 } >
632+ < Grid item size = { { xl : 8 , xs : 12 } } >
626633 < CippFormComponent
627634 type = "autoComplete"
628635 label = "Delegated Permissions"
@@ -694,30 +701,40 @@ const CippAppPermissionBuilder = ({
694701 { spSuccess && (
695702 < >
696703 < Grid container >
697- < Grid item xl = { 12 } md = { 12 } sx = { { mb : 3 } } >
704+ < Grid size = { { xl : 12 , md : 12 } } sx = { { mb : 3 } } >
698705 < Grid
699706 container
700707 spacing = { 2 }
701708 sx = { { display : "flex" , alignItems : "center" } }
702709 justifyContent = "space-between"
703710 >
704- < Grid item xs = { 12 } xl = { 8 } >
705- { servicePrincipals ?. Metadata ?. Success && (
706- < CippFormComponent
707- type = "autoComplete"
708- fullWidth
709- label = "Select a Service Principal or enter an AppId if not listed"
710- name = "servicePrincipal"
711- createOption = { true }
712- onCreateOption = { onCreateServicePrincipal }
713- isFetching = { spFetching }
714- options = { servicePrincipals ?. Results . map ( ( sp ) => {
715- return { label : `${ sp . displayName } (${ sp . appId } )` , value : sp . appId } ;
716- } ) }
717- formControl = { formControl }
718- multiple = { false }
719- />
720- ) }
711+ < Grid size = { { xl : 8 , xs : 12 } } >
712+ < Stack direction = "row" spacing = { 1 } >
713+ { servicePrincipals ?. Metadata ?. Success && (
714+ < Box width = "100%" >
715+ < CippFormComponent
716+ type = "autoComplete"
717+ fullWidth
718+ label = "Select a Service Principal or enter an AppId if not listed"
719+ name = "servicePrincipal"
720+ createOption = { true }
721+ onCreateOption = { onCreateServicePrincipal }
722+ isFetching = { spFetching }
723+ options = { servicePrincipals ?. Results . map ( ( sp ) => {
724+ return { label : `${ sp . displayName } (${ sp . appId } )` , value : sp . appId } ;
725+ } ) }
726+ formControl = { formControl }
727+ multiple = { false }
728+ />
729+ </ Box >
730+ ) }
731+ < IconButton
732+ onClick = { ( ) => refetchServicePrincipals ( ) }
733+ disabled = { servicePrincipals . isFetching }
734+ >
735+ < Sync />
736+ </ IconButton >
737+ </ Stack >
721738 </ Grid >
722739 < Grid item >
723740 < Stack direction = "row" spacing = { 1 } >
@@ -787,7 +804,7 @@ const CippAppPermissionBuilder = ({
787804 </ Grid >
788805 < Grid
789806 item
790- xs = { 12 }
807+ size = { 12 }
791808 sx = { {
792809 mt : createServicePrincipal . isSuccess || createServicePrincipal . isPending ? 3 : 0 ,
793810 } }
@@ -802,7 +819,7 @@ const CippAppPermissionBuilder = ({
802819 } }
803820 >
804821 < Grid container >
805- < Grid item xl = { 12 } >
822+ < Grid item size = { 12 } >
806823 < Typography variant = "h4" sx = { { mb : 2 } } >
807824 Import Permission Manifest
808825 </ Typography >
@@ -814,7 +831,7 @@ const CippAppPermissionBuilder = ({
814831 </ Grid >
815832 </ Grid >
816833 < Grid container >
817- < Grid item xl = { 12 } >
834+ < Grid item size = { 12 } >
818835 < FileDropzone
819836 onDrop = { onManifestImport }
820837 accept = { {
@@ -834,12 +851,12 @@ const CippAppPermissionBuilder = ({
834851 { importedManifest && (
835852 < >
836853 < Grid container sx = { { mt : 2 } } spacing = { 2 } >
837- < Grid item xl = { 12 } >
854+ < Grid item size = { 12 } >
838855 < Alert color = "success" icon = { < TaskAlt /> } >
839856 Manifest is valid. Click Import to apply the permissions.
840857 </ Alert >
841858 </ Grid >
842- < Grid item xl = { 12 } >
859+ < Grid item size = { 12 } >
843860 < Button
844861 variant = "contained"
845862 onClick = { ( ) => importManifest ( ) }
@@ -854,7 +871,7 @@ const CippAppPermissionBuilder = ({
854871 </ Grid >
855872 </ Grid >
856873 < Grid container className = "mt-3" >
857- < Grid item xl = { 12 } >
874+ < Grid item size = { 12 } >
858875 < h4 > Preview</ h4 >
859876 < CippCodeBlock
860877 code = { JSON . stringify ( importedManifest , null , 2 ) }
@@ -868,7 +885,7 @@ const CippAppPermissionBuilder = ({
868885 </ CippOffCanvas >
869886 { calloutMessage && (
870887 < Grid container sx = { { my : 3 } } >
871- < Grid item xs = { 12 } xl = { 8 } >
888+ < Grid size = { { xl : 8 , xs : 12 } } >
872889 < Alert variant = "outlined" color = "info" onClose = { ( ) => setCalloutMessage ( null ) } >
873890 { calloutMessage }
874891 </ Alert >
@@ -880,7 +897,7 @@ const CippAppPermissionBuilder = ({
880897 newPermissions ?. Type === "Table" &&
881898 Object . keys ( newPermissions ?. MissingPermissions ) . length > 0 && (
882899 < Grid container sx = { { width : "100%" , mt : 3 } } >
883- < Grid item xs = { 12 } xl = { 8 } >
900+ < Grid size = { { xl : 8 , xs : 12 } } >
884901 < Alert
885902 color = "warning"
886903 icon = { < WarningAmberOutlined /> }
@@ -1041,13 +1058,13 @@ const CippAppPermissionBuilder = ({
10411058 ) ) }
10421059 </ Box >
10431060 </ Grid >
1044- < Grid item xl = { 12 } xs = { 12 } >
1061+ < Grid size = { { xl : 12 , xs : 12 } } >
10451062 < CippApiResults apiObject = { updatePermissions } />
10461063 </ Grid >
10471064 </ Grid >
10481065
10491066 < Grid container sx = { { display : "flex" , alignItems : "center" } } >
1050- < Grid item xl = { 1 } xs = { 12 } >
1067+ < Grid item size = { { xl : 1 , xs : 12 } } >
10511068 < Button
10521069 variant = "contained"
10531070 startIcon = {
0 commit comments