Skip to content

Commit

Permalink
feat(bulk-import): show bulk-import to authorized users
Browse files Browse the repository at this point in the history
  • Loading branch information
debsmita1 committed Aug 27, 2024
1 parent 5e3e5af commit 8af791e
Show file tree
Hide file tree
Showing 24 changed files with 723 additions and 220 deletions.
24 changes: 24 additions & 0 deletions plugins/bulk-import/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,30 @@ p, role:default/team_a, catalog-entity.create, create, allow
g, user:default/<login-id/user-name>, role:default/team_a
```

#### Installing as a dynamic plugin?

The sections below are relevant for static plugins. If the plugin is expected to be installed as a dynamic one:

- follow https://github.com/janus-idp/backstage-showcase/blob/main/showcase-docs/dynamic-plugins.md#installing-a-dynamic-plugin-package-in-the-showcase
- add content of `app-config.janus-idp.yaml` into `app-config.local.yaml`.

#### Prerequisites

Follow the Bulk import backend plugin [README](https://github.com/janus-idp/backstage-plugins/blob/main/plugins/bulk-import-backend/README.md) to integrate bulk import in your Backstage instance.

---

**NOTE**

- When RBAC permission framework is enabled, for non-admin users to access bulk import UI, the role associated with your user should have the following permission policies associated with it. Add the following in your permission policies configuration file:

```CSV
p, role:default/team_a, bulk.import, use, allow
p, role:default/team_a, catalog-entity.read, read, allow
p, role:default/team_a, catalog-entity.create, create, allow
g, user:default/<login-id/user-name>, role:default/team_a
```

#### Procedure

1. Install the Bulk import UI plugin using the following command:
Expand Down
17 changes: 16 additions & 1 deletion plugins/bulk-import/dev/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
import React from 'react';

import { configApiRef } from '@backstage/core-plugin-api';
import { createDevApp } from '@backstage/dev-utils';
import { catalogApiRef } from '@backstage/plugin-catalog-react';
import { TestApiProvider } from '@backstage/test-utils';
import { permissionApiRef } from '@backstage/plugin-permission-react';
import {
MockConfigApi,
MockPermissionApi,
TestApiProvider,
} from '@backstage/test-utils';

import { getAllThemes } from '@redhat-developer/red-hat-developer-hub-theme';

Expand Down Expand Up @@ -101,6 +107,13 @@ class MockBulkImportApi implements BulkImportAPI {
}

const mockBulkImportApi = new MockBulkImportApi();
const mockPermissionApi = new MockPermissionApi();

const mockConfigApi = new MockConfigApi({
permission: {
enabled: true,
},
});

createDevApp()
.registerPlugin(bulkImportPlugin)
Expand All @@ -109,8 +122,10 @@ createDevApp()
element: (
<TestApiProvider
apis={[
[permissionApiRef, mockPermissionApi],
[catalogApiRef, mockCatalogApi],
[bulkImportApiRef, mockBulkImportApi],
[configApiRef, mockConfigApi],
]}
>
<BulkImportPage />
Expand Down
2 changes: 2 additions & 0 deletions plugins/bulk-import/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@
"@backstage/plugin-catalog-react": "^1.12.2",
"@backstage/theme": "^0.5.6",
"@janus-idp/shared-react": "2.10.0",
"@backstage/plugin-permission-react": "^0.4.24",
"@janus-idp/backstage-plugin-bulk-import-common": "0.2.0",
"@material-ui/core": "^4.9.13",
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.0.0-alpha.61",
Expand Down
4 changes: 3 additions & 1 deletion plugins/bulk-import/src/api/BulkImportBackendClient.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ export class BulkImportBackendClient implements BulkImportAPI {
const backendUrl = this.configApi.getString('backend.baseUrl');
const jsonResponse = await fetch(getApi(backendUrl, page, size, options), {
headers: {
'Content-Type': 'application/json',
...(idToken && { Authorization: `Bearer ${idToken}` }),
'Content-Type': 'application/json',
},
});
if (jsonResponse.status !== 200 && jsonResponse.status !== 204) {
Expand Down Expand Up @@ -104,6 +104,7 @@ export class BulkImportBackendClient implements BulkImportAPI {
{
method: 'POST',
headers: {
...(idToken && { Authorization: `Bearer ${idToken}` }),
'Content-Type': 'application/json',
...(idToken && { Authorization: `Bearer ${idToken}` }),
},
Expand All @@ -121,6 +122,7 @@ export class BulkImportBackendClient implements BulkImportAPI {
{
method: 'DELETE',
headers: {
...(idToken && { Authorization: `Bearer ${idToken}` }),
'Content-Type': 'application/json',
...(idToken && { Authorization: `Bearer ${idToken}` }),
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,6 @@ describe('Select Repositories', () => {
});

it('should allow users to edit repositories if repositories are selected', () => {
const mockAsyncData = {
loading: false,
value: {
totalCount: 5,
},
};
(useAsync as jest.Mock).mockReturnValue(mockAsyncData);
const { getByText, getByTestId } = render(
<BrowserRouter>
<SelectRepositories
Expand Down
57 changes: 57 additions & 0 deletions plugins/bulk-import/src/components/BulkImportPage.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import React from 'react';

import {
RequirePermission,
usePermission,
} from '@backstage/plugin-permission-react';
import { renderInTestApp } from '@backstage/test-utils';

import { screen } from '@testing-library/react';

import { useAddedRepositories } from '../hooks';
import { BulkImportPage } from './BulkImportPage';

jest.mock('@backstage/plugin-permission-react', () => ({
usePermission: jest.fn(),
RequirePermission: jest.fn(),
}));

jest.mock('../hooks/useAddedRepositories', () => ({
useAddedRepositories: jest.fn(),
}));

const mockUsePermission = usePermission as jest.MockedFunction<
typeof usePermission
>;

const mockUseAddedRepositories = useAddedRepositories as jest.MockedFunction<
typeof useAddedRepositories
>;

const RequirePermissionMock = RequirePermission as jest.MockedFunction<
typeof RequirePermission
>;

describe('BulkImport Page', () => {
it('should render if user authorized to access bulk import plugin', async () => {
RequirePermissionMock.mockImplementation(props => <>{props.children}</>);
mockUsePermission.mockReturnValue({ loading: false, allowed: true });
mockUseAddedRepositories.mockReturnValue({
loading: true,
data: [],
retry: jest.fn(),
error: undefined,
});
await renderInTestApp(<BulkImportPage />);
expect(screen.getByText('Added repositories')).toBeInTheDocument();
});

it('should not render if user is not authorized to access the bulk import plugin', async () => {
RequirePermissionMock.mockImplementation(_props => <>Not Found</>);
mockUsePermission.mockReturnValue({ loading: false, allowed: false });

await renderInTestApp(<BulkImportPage />);
expect(screen.getByText('Not Found')).toBeInTheDocument();
expect(screen.queryByText('Added repositories')).not.toBeInTheDocument();
});
});
44 changes: 26 additions & 18 deletions plugins/bulk-import/src/components/BulkImportPage.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React from 'react';

import { Header, Page, TabbedLayout } from '@backstage/core-components';
import { RequirePermission } from '@backstage/plugin-permission-react';

import FormControl from '@mui/material/FormControl';
import { Formik } from 'formik';

import { bulkImportPermission } from '@janus-idp/backstage-plugin-bulk-import-common';

import {
AddRepositoriesFormValues,
ApprovalTool,
Expand All @@ -22,23 +25,28 @@ export const BulkImportPage = () => {
};

return (
<Page themeId="tool">
<Header title="Bulk import" />
<DeleteDialogContextProvider>
<TabbedLayout>
<TabbedLayout.Route path="/" title="Repositories">
<Formik
initialValues={initialValues}
enableReinitialize
onSubmit={async (_values: AddRepositoriesFormValues) => {}}
>
<FormControl fullWidth>
<RepositoriesList />
</FormControl>
</Formik>
</TabbedLayout.Route>
</TabbedLayout>
</DeleteDialogContextProvider>
</Page>
<RequirePermission
permission={bulkImportPermission}
resourceRef={bulkImportPermission.resourceType}
>
<Page themeId="tool">
<Header title="Bulk import" />
<DeleteDialogContextProvider>
<TabbedLayout>
<TabbedLayout.Route path="/" title="Repositories">
<Formik
initialValues={initialValues}
enableReinitialize
onSubmit={async (_values: AddRepositoriesFormValues) => {}}
>
<FormControl fullWidth>
<RepositoriesList />
</FormControl>
</Formik>
</TabbedLayout.Route>
</TabbedLayout>
</DeleteDialogContextProvider>
</Page>
</RequirePermission>
);
};
79 changes: 79 additions & 0 deletions plugins/bulk-import/src/components/BulkImportSidebarItem.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import React from 'react';

import { SidebarItem } from '@backstage/core-components';
import { usePermission } from '@backstage/plugin-permission-react';

import { render, screen } from '@testing-library/react';

import { BulkImportSidebarItem } from './BulkImportSidebarItem';

jest.mock('@backstage/plugin-permission-react', () => ({
usePermission: jest.fn(),
}));

const mockUsePermission = usePermission as jest.MockedFunction<
typeof usePermission
>;

const configMock = {
getOptionalBoolean: jest.fn(() => true),
};

jest.mock('@backstage/core-plugin-api', () => ({
...jest.requireActual('@backstage/core-plugin-api'),
useApi: jest.fn(() => {
return configMock;
}),
}));

jest.mock('@backstage/core-components', () => ({
SidebarItem: jest
.fn()
.mockImplementation(() => (
<div data-testid="mockSidebarItem">Bulk import</div>
)),
}));

const mockedSidebarItem = SidebarItem as jest.MockedFunction<
typeof SidebarItem
>;

const mockBulkImportApiRef = jest.fn();

describe('Administration component', () => {
beforeEach(() => {
mockBulkImportApiRef.mockClear();
mockedSidebarItem.mockClear();
});

it('renders Bulk import sidebar item if user is authorized', async () => {
mockUsePermission.mockReturnValue({ loading: false, allowed: true });
render(<BulkImportSidebarItem />);
expect(mockedSidebarItem).toHaveBeenCalled();
expect(screen.queryByText('Bulk import')).toBeInTheDocument();
});

it('does not render Bulk import sidebar item if user is not authorized', async () => {
mockUsePermission.mockReturnValue({ loading: false, allowed: false });

render(<BulkImportSidebarItem />);
expect(screen.queryByText('Bulk import')).toBeNull();
});

it('does not render Bulk import sidebar item if user loading state is true', async () => {
mockUsePermission.mockReturnValue({ loading: true, allowed: false });

render(<BulkImportSidebarItem />);
expect(mockedSidebarItem).not.toHaveBeenCalled();
expect(screen.queryByText('Bulk import')).toBeNull();
});

it('renders the Bulk import sidebar item if RBAC is disabled in the configuration', async () => {
mockUsePermission.mockReturnValue({ loading: true, allowed: true });
configMock.getOptionalBoolean.mockReturnValueOnce(false);

render(<BulkImportSidebarItem />);
expect(mockedSidebarItem).toHaveBeenCalled();
expect(screen.queryByText('Bulk import')).toBeInTheDocument();
});
});
40 changes: 33 additions & 7 deletions plugins/bulk-import/src/components/BulkImportSidebarItem.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import React from 'react';

import { SidebarItem } from '@backstage/core-components';
import { configApiRef, useApi } from '@backstage/core-plugin-api';
import { usePermission } from '@backstage/plugin-permission-react';

import { bulkImportPermission } from '@janus-idp/backstage-plugin-bulk-import-common';

import { getImageForIconClass } from '../utils/icons';

Expand All @@ -15,11 +19,33 @@ export const BulkImportIcon = () => {
};

export const BulkImportSidebarItem = () => {
return (
<SidebarItem
text="Bulk import"
to="bulk-import/repositories"
icon={BulkImportIcon}
/>
);
const { loading: isUserLoading, allowed } = usePermission({
permission: bulkImportPermission,
resourceRef: bulkImportPermission.resourceType,
});

const config = useApi(configApiRef);
const isPermissionFrameworkEnabled =
config.getOptionalBoolean('permission.enabled');

if (!isUserLoading && isPermissionFrameworkEnabled) {
return allowed ? (
<SidebarItem
text="Bulk import"
to="bulk-import/repositories"
icon={BulkImportIcon}
/>
) : null;
}

if (!isPermissionFrameworkEnabled) {
return (
<SidebarItem
text="Bulk import"
to="bulk-import/repositories"
icon={BulkImportIcon}
/>
);
}
return null;
};
22 changes: 22 additions & 0 deletions plugins/bulk-import/src/components/GitAltIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react';

const GitAltIcon: React.FC<React.HTMLProps<SVGElement>> = ({
style,
}): React.ReactElement => {
return (
<svg
height="1em"
width="1em"
version="1.1"
viewBox="0 0 448 512"
style={style}
>
<path
d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"
fill="#aaabac"
/>
</svg>
);
};

export default GitAltIcon;
Loading

0 comments on commit 8af791e

Please sign in to comment.