Merge remote-tracking branch 'origin' into fix-org-select-none

frontend/src/components/secret-syncs/SecretSyncSelect.tsx

@@ -10,9 +10,9 @@ type Props = {
 };
 
 export const SecretSyncSelect = ({ onSelect }: Props) => {
-  const { isLoading, data: secretSyncOptions } = useSecretSyncOptions();
+  const { isPending, data: secretSyncOptions } = useSecretSyncOptions();
 
-  if (isLoading) {
+  if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />

frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx

@@ -23,7 +23,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
   const destination = watch("destination");
   const app = SECRET_SYNC_CONNECTION_MAP[destination];
 
-  const { data: availableConnections, isLoading } = useListAvailableAppConnections(app);
+  const { data: availableConnections, isPending } = useListAvailableAppConnections(app);
 
   const connectionName = APP_CONNECTION_MAP[app].name;
 
@@ -54,7 +54,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
                 onChange(newValue);
                 if (callback) callback();
               }}
-              isLoading={isLoading}
+              isLoading={isPending}
               options={availableConnections}
               placeholder="Select connection..."
               getOptionLabel={(option) => option.name}

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -323,12 +323,12 @@ export const MinimizedOrgSidebar = () => {
                 <DropdownMenuContent align="start" side="right" className="p-1">
                   <DropdownMenuLabel>Organization Options</DropdownMenuLabel>
                   <Link to="/organization/access-management">
-                    <DropdownMenuItem icon={<FontAwesomeIcon icon={faUsers} />}>
+                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faUsers} />}>
                       Access Control
                     </DropdownMenuItem>
                   </Link>
                   <Link to="/organization/app-connections">
-                    <DropdownMenuItem icon={<FontAwesomeIcon icon={faPlug} />}>
+                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faPlug} />}>
                       App Connections
                     </DropdownMenuItem>
                   </Link>
@@ -336,18 +336,20 @@ export const MinimizedOrgSidebar = () => {
                     window.location.origin.includes("https://eu.infisical.com") ||
                     window.location.origin.includes("https://gamma.infisical.com")) && (
                     <Link to="/organization/billing">
-                      <DropdownMenuItem icon={<FontAwesomeIcon icon={faMoneyBill} />}>
+                      <DropdownMenuItem
+                        icon={<FontAwesomeIcon className="w-3" icon={faMoneyBill} />}
+                      >
                         Usage & Billing
                       </DropdownMenuItem>
                     </Link>
                   )}
                   <Link to="/organization/audit-logs">
-                    <DropdownMenuItem icon={<FontAwesomeIcon icon={faBook} />}>
+                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faBook} />}>
                       Audit Logs
                     </DropdownMenuItem>
                   </Link>
                   <Link to="/organization/settings">
-                    <DropdownMenuItem icon={<FontAwesomeIcon icon={faCog} />}>
+                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faCog} />}>
                       Organization Settings
                     </DropdownMenuItem>
                   </Link>

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx

@@ -11,9 +11,9 @@ type Props = {
 };
 
 export const AppConnectionsSelect = ({ onSelect }: Props) => {
-  const { isLoading, data: appConnectionOptions } = useAppConnectionOptions();
+  const { isPending, data: appConnectionOptions } = useAppConnectionOptions();
 
-  if (isLoading) {
+  if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx

@@ -51,7 +51,7 @@ type AppConnectionFilters = {
 };
 
 export const AppConnectionsTable = () => {
-  const { isLoading, data: appConnections = [] } = useListAppConnections();
+  const { isPending, data: appConnections = [] } = useListAppConnections();
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
     "deleteConnection",
@@ -262,7 +262,7 @@ export const AppConnectionsTable = () => {
             </Tr>
           </THead>
           <TBody>
-            {isLoading && (
+            {isPending && (
               <TableSkeleton innerKey="app-connections-table" columns={4} key="app-connections" />
             )}
             {filteredAppConnections.slice(offset, perPage * page).map((connection) => (
@@ -285,7 +285,7 @@ export const AppConnectionsTable = () => {
             onChangePerPage={setPerPage}
           />
         )}
-        {!isLoading && !filteredAppConnections?.length && (
+        {!isPending && !filteredAppConnections?.length && (
           <EmptyState
             title={
               appConnections.length