refactor(console): make scopes of the management api readonly (#2939)

packages/console/src/components/PermissionsTable/index.tsx

@@ -27,6 +27,7 @@ type Props = {
   isLoading: boolean;
   errorMessage?: string;
   createButtonTitle: AdminConsoleKey;
+  isReadOnly?: boolean;
   isApiColumnVisible?: boolean;
   pagination?: PaginationProps;
   search: SearchProps;
@@ -40,6 +41,7 @@ const PermissionsTable = ({
   isLoading,
   errorMessage,
   createButtonTitle,
+  isReadOnly = false,
   isApiColumnVisible = false,
   pagination,
   search: { keyword, searchHandler, clearSearchHandler },
@@ -81,15 +83,19 @@ const PermissionsTable = ({
     title: null,
     dataIndex: 'delete',
     colSpan: 1,
-    render: (scope) => (
-      <IconButton
-        onClick={() => {
-          deleteHandler(scope);
-        }}
-      >
-        <Delete />
-      </IconButton>
-    ),
+    render: (scope) =>
+      /**
+       * When the table is read-only, hide the delete button rather than the whole column to keep the table column spaces.
+       */
+      isReadOnly ? null : (
+        <IconButton
+          onClick={() => {
+            deleteHandler(scope);
+          }}
+        >
+          <Delete />
+        </IconButton>
+      ),
   };
 
   const columns = [
@@ -114,21 +120,23 @@ const PermissionsTable = ({
             onSearch={searchHandler}
             onClearSearch={clearSearchHandler}
           />
-          <Button
-            title={createButtonTitle}
-            type="primary"
-            size="large"
-            icon={<Plus />}
-            onClick={() => {
-              createHandler();
-            }}
-          />
+          {!isReadOnly && (
+            <Button
+              title={createButtonTitle}
+              type="primary"
+              size="large"
+              icon={<Plus />}
+              onClick={() => {
+                createHandler();
+              }}
+            />
+          )}
         </div>
       }
       isLoading={isLoading}
       pagination={pagination}
       placeholder={{
-        content: (
+        content: isReadOnly ? undefined : (
           <Button
             title={createButtonTitle}
             type="outline"

packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/index.tsx

@@ -19,6 +19,7 @@ import CreatePermissionModal from './components/CreatePermissionModal';
 const ApiResourcePermissions = () => {
   const {
     resource: { id: resourceId },
+    isLogtoManagementApiResource,
   } = useOutletContext<ApiResourceDetailsOutletContext>();
 
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -67,6 +68,7 @@ const ApiResourcePermissions = () => {
       <PermissionsTable
         scopes={scopes}
         isLoading={isLoading}
+        isReadOnly={isLogtoManagementApiResource}
         createButtonTitle="api_resource_details.permission.create_button"
         createHandler={() => {
           setIsCreateFormOpen(true);