feat(List Roles): Migrate FAB view to React

UPDATING.md

@@ -46,6 +46,7 @@ assists people when migrating to a new version.
 - [30284](https://github.com/apache/superset/pull/30284) Deprecated GLOBAL_ASYNC_QUERIES_REDIS_CONFIG in favor of the new GLOBAL_ASYNC_QUERIES_CACHE_BACKEND configuration. To leverage Redis Sentinel, set CACHE_TYPE to RedisSentinelCache, or use RedisCache for standalone Redis
 - [31961](https://github.com/apache/superset/pull/31961) Upgraded React from version 16.13.1 to 17.0.2. If you are using custom frontend extensions or plugins, you may need to update them to be compatible with React 17.
 - [31260](https://github.com/apache/superset/pull/31260) Docker images now use `uv pip install` instead of `pip install` to manage the python envrionment. Most docker-based deployments will be affected, whether you derive one of the published images, or have custom bootstrap script that install python libraries (drivers)
+- [32432](https://github.com/apache/superset/pull/31260) Moves the List Roles FAB view to the frontend and requires `FAB_ADD_SECURITY_API` to be enabled in the configuration and `superset init` to be executed.
 
 ### Potential Downtime
 

superset-frontend/cypress-base/cypress/e2e/dashboard/drilltodetail.test.ts

@@ -434,7 +434,7 @@ describe('Drill to detail modal', () => {
       SUPPORTED_TIER2_CHARTS.forEach(waitForChartLoad);
     });
 
-    describe.only('Modal actions', () => {
+    describe('Modal actions', () => {
       it('clears filters', () => {
         interceptSamples();
 

superset-frontend/src/components/ListView/Filters/Select.tsx

@@ -37,6 +37,7 @@ interface SelectFilterProps extends BaseFilter {
   onSelect: (selected: SelectOption | undefined, isClear?: boolean) => void;
   paginate?: boolean;
   selects: Filter['selects'];
+  loading?: boolean;
 }
 
 function SelectFilter(
@@ -47,6 +48,7 @@ function SelectFilter(
     initialValue,
     onSelect,
     selects = [],
+    loading = false,
   }: SelectFilterProps,
   ref: RefObject<FilterHandler>,
 ) {
@@ -115,6 +117,7 @@ function SelectFilter(
           placeholder={t('Select or type a value')}
           showSearch
           value={selectedOption}
+          loading={loading}
         />
       )}
     </FilterContainer>

superset-frontend/src/components/ListView/Filters/index.tsx

@@ -75,6 +75,7 @@ function UIFilters(
             selects,
             toolTipDescription,
             onFilterUpdate,
+            loading,
           },
           index,
         ) => {
@@ -103,6 +104,7 @@ function UIFilters(
                 }}
                 paginate={paginate}
                 selects={selects}
+                loading={loading ?? false}
               />
             );
           }

superset-frontend/src/components/ListView/types.ts

@@ -59,6 +59,7 @@ export interface Filter {
     pageSize: number,
   ) => Promise<{ data: SelectOption[]; totalCount: number }>;
   paginate?: boolean;
+  loading?: boolean;
 }
 
 export type Filters = Filter[];

superset-frontend/src/features/home/SubMenu.tsx

@@ -134,6 +134,7 @@ export interface ButtonProps {
     | 'warning'
     | 'success'
     | 'tertiary';
+  loading?: boolean;
 }
 
 export interface SubMenuProps {
@@ -282,6 +283,7 @@ const SubMenuComponent: FunctionComponent<SubMenuProps> = props => {
               buttonStyle={btn.buttonStyle}
               onClick={btn.onClick}
               data-test={btn['data-test']}
+              loading={btn.loading ?? false}
             >
               {btn.name}
             </Button>

superset-frontend/src/features/roles/RoleFormItems.tsx

@@ -0,0 +1,70 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { FormItem } from 'src/components/Form';
+import Select from 'src/components/Select/Select';
+import { Input } from 'src/components/Input';
+import { t } from '@superset-ui/core';
+import { FC } from 'react';
+import { FormattedPermission, UserObject } from './types';
+
+interface PermissionsFieldProps {
+  permissions: FormattedPermission[];
+}
+
+interface UsersFieldProps {
+  users: UserObject[];
+}
+
+export const RoleNameField = () => (
+  <FormItem
+    name="roleName"
+    label={t('Role Name')}
+    rules={[{ required: true, message: t('Role name is required') }]}
+  >
+    <Input name="roleName" data-test="role-name-input" />
+  </FormItem>
+);
+
+export const PermissionsField: FC<PermissionsFieldProps> = ({
+  permissions,
+}) => (
+  <FormItem name="rolePermissions" label={t('Permissions')}>
+    <Select
+      mode="multiple"
+      name="rolePermissions"
+      options={permissions.map(permission => ({
+        label: permission.label,
+        value: permission.id,
+      }))}
+      getPopupContainer={trigger => trigger.closest('.antd5-modal-content')}
+      data-test="permissions-select"
+    />
+  </FormItem>
+);
+
+export const UsersField: FC<UsersFieldProps> = ({ users }) => (
+  <FormItem name="roleUsers" label={t('Users')}>
+    <Select
+      mode="multiple"
+      name="roleUsers"
+      options={users.map(user => ({ label: user.username, value: user.id }))}
+      data-test="users-select"
+    />
+  </FormItem>
+);

superset-frontend/src/features/roles/RoleListAddModal.test.tsx

@@ -0,0 +1,92 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
+import RoleListAddModal from './RoleListAddModal';
+import { createRole } from './utils';
+
+const mockToasts = {
+  addDangerToast: jest.fn(),
+  addSuccessToast: jest.fn(),
+};
+
+jest.mock('./utils');
+const mockCreateRole = jest.mocked(createRole);
+
+jest.mock('src/components/MessageToasts/withToasts', () => ({
+  useToasts: () => mockToasts,
+}));
+
+describe('RoleListAddModal', () => {
+  const mockProps = {
+    show: true,
+    onHide: jest.fn(),
+    onSave: jest.fn(),
+    permissions: [
+      { id: 1, label: 'Permission 1', value: 'Permission_1' },
+      { id: 2, label: 'Permission 2', value: 'Permission_2' },
+    ],
+  };
+
+  it('renders modal with form fields', () => {
+    render(<RoleListAddModal {...mockProps} />);
+    expect(screen.getByText('Add Role')).toBeInTheDocument();
+    expect(screen.getByText('Role Name')).toBeInTheDocument();
+    expect(screen.getByText('Permissions')).toBeInTheDocument();
+  });
+
+  it('calls onHide when cancel button is clicked', () => {
+    render(<RoleListAddModal {...mockProps} />);
+    fireEvent.click(screen.getByTestId('modal-cancel-button'));
+    expect(mockProps.onHide).toHaveBeenCalled();
+  });
+
+  it('disables save button when role name is empty', () => {
+    render(<RoleListAddModal {...mockProps} />);
+    expect(screen.getByTestId('form-modal-save-button')).toBeDisabled();
+  });
+
+  it('enables save button when role name is entered', () => {
+    render(<RoleListAddModal {...mockProps} />);
+    fireEvent.change(screen.getByTestId('role-name-input'), {
+      target: { value: 'New Role' },
+    });
+    expect(screen.getByTestId('form-modal-save-button')).toBeEnabled();
+  });
+
+  it('calls createRole when save button is clicked', async () => {
+    render(<RoleListAddModal {...mockProps} />);
+
+    fireEvent.change(screen.getByTestId('role-name-input'), {
+      target: { value: 'New Role' },
+    });
+
+    const saveButton = screen.getByRole('button', { name: 'Save' });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(mockCreateRole).toHaveBeenCalledWith('New Role');
+    });
+  });
+});

superset-frontend/src/features/roles/RoleListAddModal.tsx

@@ -0,0 +1,71 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t } from '@superset-ui/core';
+import { useToasts } from 'src/components/MessageToasts/withToasts';
+import FormModal from 'src/components/Modal/FormModal';
+import { createRole, updateRolePermissions } from './utils';
+import { PermissionsField, RoleNameField } from './RoleFormItems';
+import { BaseModalProps, FormattedPermission, RoleForm } from './types';
+
+export interface RoleListAddModalProps extends BaseModalProps {
+  permissions: FormattedPermission[];
+}
+
+function RoleListAddModal({
+  show,
+  onHide,
+  onSave,
+  permissions,
+}: RoleListAddModalProps) {
+  const { addDangerToast, addSuccessToast } = useToasts();
+
+  const handleFormSubmit = async (values: RoleForm) => {
+    try {
+      const { json: roleResponse } = await createRole(values.roleName);
+
+      if (values.rolePermissions?.length > 0) {
+        await updateRolePermissions(roleResponse.id, values.rolePermissions);
+      }
+
+      addSuccessToast(t('Role was successfully created!'));
+    } catch (err) {
+      addDangerToast(t('Error while adding role!'));
+      throw err;
+    }
+  };
+
+  return (
+    <FormModal
+      show={show}
+      onHide={onHide}
+      title={t('Add Role')}
+      onSave={onSave}
+      formSubmitHandler={handleFormSubmit}
+      requiredFields={['roleName']}
+      initialValues={{}}
+    >
+      <>
+        <RoleNameField />
+        <PermissionsField permissions={permissions} />
+      </>
+    </FormModal>
+  );
+}
+
+export default RoleListAddModal;