chore(bulk-import): optimize bulk-import

workspaces/bulk-import/.changeset/smart-crews-wish.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-bulk-import': patch
+---
+
+optimize bulk-import

workspaces/bulk-import/packages/app/src/modules/nav/Sidebar.tsx

@@ -20,38 +20,31 @@ import {
   SidebarGroup,
   SidebarItem,
   SidebarScrollWrapper,
-  SidebarSpace,
 } from '@backstage/core-components';
 import { NavContentBlueprint } from '@backstage/plugin-app-react';
-import {
-  Settings as SidebarSettings,
-  UserSettingsSignInAvatar,
-} from '@backstage/plugin-user-settings';
 import MenuIcon from '@mui/icons-material/Menu';
 import { SidebarLogo } from './SidebarLogo';
 
 export const SidebarContent = NavContentBlueprint.make({
   params: {
-    component: ({ items }) => (
-      <Sidebar>
-        <SidebarLogo />
-        <SidebarDivider />
-        <SidebarGroup label="Menu" icon={<MenuIcon />}>
-          {items.map((item, index) => (
-            <SidebarItem {...item} key={index} />
-          ))}
-        </SidebarGroup>
-        <SidebarScrollWrapper />
-        <SidebarSpace />
-        <SidebarDivider />
-        <SidebarGroup
-          label="Settings"
-          icon={<UserSettingsSignInAvatar />}
-          to="/settings"
-        >
-          <SidebarSettings />
-        </SidebarGroup>
-      </Sidebar>
-    ),
+    component: ({ navItems }) => {
+      return (
+        <Sidebar>
+          <SidebarLogo />
+          <SidebarDivider />
+          <SidebarGroup label="Menu" icon={<MenuIcon />}>
+            {navItems.rest().map(item => (
+              <SidebarItem
+                key={item.node.spec.id}
+                to={item.href}
+                text={item.title}
+                icon={() => item.icon}
+              />
+            ))}
+          </SidebarGroup>
+          <SidebarScrollWrapper />
+        </Sidebar>
+      );
+    },
   },
 });

workspaces/bulk-import/plugins/bulk-import/src/alpha.tsx

@@ -23,7 +23,6 @@ import {
   createRouteRef,
   createSubRouteRef,
   identityApiRef,
-  NavItemBlueprint,
   PageBlueprint,
 } from '@backstage/frontend-plugin-api';
 import { TranslationBlueprint } from '@backstage/plugin-app-react';
@@ -32,7 +31,7 @@ import {
   bulkImportApiRef,
   BulkImportBackendClient,
 } from './api/BulkImportBackendClient';
-import BulkImportIcon from './components/BulkImportSidebarItem';
+import BulkImportIcon from './components/BulkImportIcon';
 import { bulkImportTranslations } from './translations';
 
 // NFS Route References - created using @backstage/frontend-plugin-api
@@ -73,49 +72,21 @@ const bulkImportPage = PageBlueprint.make({
   params: {
     path: '/bulk-import',
     routeRef: rootRouteRef,
+    title: 'Bulk import',
+    icon: <BulkImportIcon />,
     noHeader: true,
     loader: () => import('./components').then(({ Router }) => <Router />),
   },
 });
 
-/**
- * Nav Item Extension
- *
- * NOTE: This nav item is always visible in the sidebar. Unlike the legacy
- * BulkImportSidebarItem component, NavItemBlueprint does not support runtime
- * permission checking because:
- *
- * 1. Extension factories run at app startup, before user authentication
- * 2. NavItemBlueprint only accepts static data (title, icon, routeRef)
- * 3. React hooks like usePermission cannot be used in extension factories
- *
- * Permission checking is handled at the PAGE level instead. Users without
- * the required permissions will see a permission error when accessing the page.
- *
- * For apps requiring permission-gated nav visibility, use the legacy
- * BulkImportSidebarItem component from the main package export:
- *
- * @example
- * ```tsx
- * import { BulkImportSidebarItem } from '@red-hat-developer-hub/backstage-plugin-bulk-import';
- * ```
- */
-const bulkImportNavItem = NavItemBlueprint.make({
-  params: {
-    title: 'Bulk import',
-    routeRef: rootRouteRef,
-    icon: BulkImportIcon,
-  },
-});
-
 /**
  * The Bulk Import frontend plugin for the new Backstage frontend system.
  *
  * @public
  */
 export default createFrontendPlugin({
   pluginId: 'bulk-import',
-  extensions: [bulkImportApi, bulkImportPage, bulkImportNavItem],
+  extensions: [bulkImportApi, bulkImportPage],
   routes: {
     root: rootRouteRef,
     tasks: importHistoryRouteRef,

workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.ts

@@ -32,7 +32,7 @@ import {
   OrgAndRepoResponse,
   SortingOrderEnum,
 } from '../types';
-import { getApi } from '../utils/repository-utils';
+import { getApi } from '../utils/getApi';
 import { IBulkImportRESTPathProvider } from './BulkImportBackendClientBase';
 import { OrchestratorBulkImportBackendClientPathProvider } from './OrchestratorBulkImportBackendClientPathProvider';
 import { PRBulkImportBackendClientPathProvider } from './PRBulkImportBackendClientPathProvider';

workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportIcon.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed 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 { useTheme } from '@mui/material/styles';
+
+import bulkImportBlackImg from '../images/BulkImportIcon-Black.svg';
+import bulkImportWhiteImg from '../images/BulkImportIcon-White.svg';
+
+/**
+ * @public
+ * Bulk Import Icon (kept free of sidebar/permission deps for NFS sync).
+ */
+export const BulkImportIcon = () => {
+  const theme = useTheme();
+  const isDarkTheme = theme.palette.mode === 'dark';
+
+  return (
+    <img
+      src={isDarkTheme ? bulkImportWhiteImg : bulkImportBlackImg}
+      alt="bulk import icon"
+      style={{ height: '25px' }}
+    />
+  );
+};
+
+export default BulkImportIcon;

workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportSidebarItem.tsx

@@ -18,32 +18,12 @@ import { SidebarItem } from '@backstage/core-components';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import { usePermission } from '@backstage/plugin-permission-react';
 
-import { useTheme } from '@mui/material/styles';
-
 import { bulkImportPermission } from '@red-hat-developer-hub/backstage-plugin-bulk-import-common';
 
 import { useTranslation } from '../hooks/useTranslation';
-import { getImageForIconClass } from '../utils/icons';
-
-/**
- * @public
- * Bulk Import Icon
- */
-export const BulkImportIcon = () => {
-  const theme = useTheme();
-  const isDarkTheme = theme.palette.mode === 'dark';
-  const iconClass = isDarkTheme
-    ? 'icon-bulk-import-white'
-    : 'icon-bulk-import-black';
+import { BulkImportIcon } from './BulkImportIcon';
 
-  return (
-    <img
-      src={getImageForIconClass(iconClass)}
-      alt="bulk import icon"
-      style={{ height: '25px' }}
-    />
-  );
-};
+export { BulkImportIcon } from './BulkImportIcon';
 
 export const BulkImportSidebarItem = () => {
   const { t } = useTranslation();

workspaces/bulk-import/plugins/bulk-import/src/index.ts

@@ -28,4 +28,4 @@ export {
   BulkImportSidebarItem,
 } from './plugin';
 
-export { default as BulkImportIcon } from './components/BulkImportSidebarItem';
+export { default as BulkImportIcon } from './components/BulkImportIcon';

workspaces/bulk-import/plugins/bulk-import/src/utils/getApi.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed 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 { APITypes } from '../types';
+
+/** Builds bulk-import backend list URLs (kept out of repository-utils UI graph). */
+export const getApi = (
+  backendUrl: string,
+  page: number,
+  size: number,
+  searchString: string,
+  approvalTool: string,
+  options?: APITypes,
+) => {
+  const params = new URLSearchParams({
+    pagePerIntegration: String(page),
+    sizePerIntegration: String(size),
+    search: searchString,
+    approvalTool,
+  });
+
+  if (options?.fetchOrganizations) {
+    return `${backendUrl}/api/bulk-import/organizations?${params.toString()}`;
+  }
+  if (options?.orgName) {
+    const orgName = encodeURIComponent(options?.orgName);
+    return `${backendUrl}/api/bulk-import/organizations/${orgName}/repositories?${params.toString()}`;
+  }
+  return `${backendUrl}/api/bulk-import/repositories?${params.toString()}`;
+};

workspaces/bulk-import/plugins/bulk-import/src/utils/repository-utils.tsx

@@ -19,16 +19,15 @@ import { Link, StatusOK } from '@backstage/core-components';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
 import Typography from '@mui/material/Typography';
-import * as jsyaml from 'js-yaml';
+import { loadAll } from 'js-yaml';
 import { get } from 'lodash';
-import * as yaml from 'yaml';
+import { stringify } from 'yaml';
 import * as yup from 'yup';
 
 import { WaitingForPR } from '../components/WaitingForPR';
 import {
   AddedRepositories,
   AddRepositoryData,
-  APITypes,
   ApprovalTool,
   CreateImportJobRepository,
   ErrorType,
@@ -50,6 +49,8 @@ import {
 import { getWorkflowStatusInfo } from './orchestratorStatus';
 import { getTaskStatusInfo } from './task-status';
 
+export { getApi } from './getApi';
+
 export const TaskLink = ({
   taskId,
   t,
@@ -521,7 +522,7 @@ export const prepareDataForSubmission = (
           organization: repo.orgName || '',
           defaultBranch: repo.defaultBranch || '',
         },
-        catalogInfoContent: yaml.stringify(
+        catalogInfoContent: stringify(
           repo.catalogInfoYaml?.prTemplate?.yaml,
           null,
           2,
@@ -540,31 +541,6 @@ export const prepareDataForSubmission = (
     [],
   );
 
-export const getApi = (
-  backendUrl: string,
-  page: number,
-  size: number,
-  searchString: string,
-  approvalTool: string,
-  options?: APITypes,
-) => {
-  const params = new URLSearchParams({
-    pagePerIntegration: String(page),
-    sizePerIntegration: String(size),
-    search: searchString,
-    approvalTool,
-  });
-
-  if (options?.fetchOrganizations) {
-    return `${backendUrl}/api/bulk-import/organizations?${params.toString()}`;
-  }
-  if (options?.orgName) {
-    const orgName = encodeURIComponent(options?.orgName);
-    return `${backendUrl}/api/bulk-import/organizations/${orgName}/repositories?${params.toString()}`;
-  }
-  return `${backendUrl}/api/bulk-import/repositories?${params.toString()}`;
-};
-
 export const getCustomisedErrorMessage = (
   status: (RepositoryStatus | string)[] | undefined,
   t: (key: string) => string,
@@ -636,7 +612,7 @@ export const evaluatePRTemplate = (
 ): { pullReqPreview: PullRequestPreview; isInvalidEntity: boolean } => {
   const gitProvider = isGithubJob(repositoryStatus) ? 'github' : 'gitlab';
   try {
-    const entity = jsyaml.loadAll(
+    const entity = loadAll(
       repositoryStatus[gitProvider]?.pullRequest.catalogInfoContent ?? '',
     )[0] as Entity;
     const isInvalid =