Merge pull request #71 from VladyslavLevinUA/fix-group-selector-optio…

…ns-to-not-show-parent-group Fix group selector options to not show parent group
atlassian-labs · Oct 27, 2023 · 18ef6d3 · 18ef6d3
2 parents 75da3db + 856e180
commit 18ef6d3
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 5 deletions.
diff --git a/ui/src/components/SelectImportPage/index.tsx b/ui/src/components/SelectImportPage/index.tsx
@@ -166,13 +166,33 @@ export const SelectImportPage = () => {
     setIsProjectsLoading(true);
   };
 
-  const handleChangeGroup = (item: SelectorItem | null) => {
+  const handleClearSelectedGroup = () => {
+    const isSelectionClearedOnEmptyState = groupId === locationGroupId;
+
+    if (isSelectionClearedOnEmptyState) {
+      return;
+    }
+
+    resetInitialProjectsData();
+    setGroupId(locationGroupId);
+  };
+
+  const handleSelectGroup = (item: SelectorItem) => {
+    const isSameGroupSelected = item.value === groupId;
+
+    if (isSameGroupSelected) {
+      return;
+    }
+
     resetInitialProjectsData();
+    setGroupId(item.value);
+  };
 
+  const handleChangeGroup = (item: SelectorItem | null) => {
     if (item) {
-      setGroupId(item.value);
+      handleSelectGroup(item);
     } else {
-      setGroupId(locationGroupId);
+      handleClearSelectedGroup();
     }
   };
 

diff --git a/ui/src/components/SelectImportPage/screens/SelectProjectsScreen/index.tsx b/ui/src/components/SelectImportPage/screens/SelectProjectsScreen/index.tsx
@@ -60,7 +60,10 @@ export const SelectProjectsScreen = ({
   locationGroupId,
   importableComponentTypes,
 }: Props) => {
-  const groupSelectorOptions = useMemo(() => buildGroupsSelectorOptions(groups, locationGroupId), [groups]);
+  const groupSelectorOptions = useMemo(
+    () => buildGroupsSelectorOptions(groups, locationGroupId),
+    [groups, locationGroupId],
+  );
 
   return (
     <Wrapper data-testid='gitlab-select-projects-screen'>
@@ -71,7 +74,7 @@ export const SelectProjectsScreen = ({
       </OverrideDescription>
       <>
         <TableHeaderWrapper>
-          <GroupSelectorWrapper>
+          <GroupSelectorWrapper data-testid='group-selector'>
             <Select
               isClearable
               isLoading={isGroupsLoading}

diff --git a/ui/src/components/SelectImportPage/screens/__tests__/SelectProjectsScreen.test.tsx b/ui/src/components/SelectImportPage/screens/__tests__/SelectProjectsScreen.test.tsx
@@ -7,6 +7,7 @@ import {
   componentTypesResultMock,
   componentTypesErrorResultMock,
 } from '../__mocks__/mocks';
+import { GitlabAPIGroup } from '../../../../types';
 
 jest.mock('@forge/bridge', () => ({
   invoke: jest.fn(),
@@ -130,4 +131,64 @@ describe('SelectProjectsScreen', () => {
     fireEvent.click(getByTestId('error-loading-component-types--button'));
     expect(getByText('Error loading component types. Try refreshing!'));
   });
+
+  it('should filter out connected parent group from group selector options', () => {
+    const parentGroupId = 1;
+    const parentGroupName = 'parent-group';
+    const subgroupName = 'subgroup';
+
+    const parentGroup: GitlabAPIGroup = {
+      full_name: 'parent-group-full-name',
+      name: parentGroupName,
+      id: parentGroupId,
+      path: '/',
+    };
+    const subgroup: GitlabAPIGroup = {
+      full_name: 'subgroup-full-name',
+      name: subgroupName,
+      id: 2,
+      path: '/',
+    };
+
+    const groups: GitlabAPIGroup[] = [parentGroup, subgroup];
+
+    const unchangedProps = {
+      projects: projectImportSelectionMock,
+      isProjectsLoading: false,
+      onSelectAllItems: jest.fn(),
+      onChangeComponentType: jest.fn(),
+      handleNavigateToConnectedPage: jest.fn(),
+      projectsFetchingError: '',
+      onSelectItem: jest.fn(),
+      selectedProjects: projectImportSelectionMock,
+      handleNavigateToScreen: jest.fn(),
+      isProjectsImporting: true,
+      totalProjects: 10,
+      setPage: jest.fn(),
+      isGroupsLoading: false,
+      handleChangeGroup: jest.fn(),
+      handleSearchValue: jest.fn(),
+      importableComponentTypes: componentTypesResultMock,
+    };
+
+    const { queryByTestId, rerender, queryByText } = render(
+      <SelectProjectsScreen {...unchangedProps} groups={[]} locationGroupId={0} />,
+    );
+
+    // groups fetched and the groupSelectorOptions calculated and memoized
+    rerender(<SelectProjectsScreen {...unchangedProps} groups={groups} locationGroupId={0} />);
+
+    // locationGroupId updated and the groupSelectorOptions should be recalculated
+    rerender(<SelectProjectsScreen {...unchangedProps} groups={groups} locationGroupId={parentGroupId} />);
+
+    const selectContainer = queryByTestId('group-selector');
+    expect(selectContainer).not.toBeNull();
+    const select = (selectContainer as HTMLElement).firstElementChild;
+
+    // open select dropdown
+    fireEvent.keyDown(select as Element, { key: 'ArrowDown' });
+
+    expect(queryByText(subgroupName)).not.toBeNull();
+    expect(queryByText(parentGroupName)).toBeNull();
+  });
 });