Merge pull request #113 from atlassian-labs/COMPASS-21570-change-ui-f…

…or-import-so-select-button-does-not-jump-out-of-screen Change UI for gitlab import so select button does not jump out of screen
atlassian-labs · Sep 12, 2024 · a605562 · a605562
2 parents 613dbaf + d7a3ded
commit a605562
Show file tree

Hide file tree

Showing 8 changed files with 517 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "typescript": "~4.5.5"
   },
   "dependencies": {
+    "@atlaskit/primitives": "^12.1.0",
     "@atlaskit/tokens": "^1.29.1",
     "@atlassian/forge-graphql": "13.10.1",
     "@forge/api": "^2.8.1",

diff --git a/ui/package.json b/ui/package.json
@@ -14,6 +14,7 @@
     "@atlaskit/icon": "^21.10.6",
     "@atlaskit/inline-message": "^11.4.9",
     "@atlaskit/onboarding": "^11.3.0",
+    "@atlaskit/primitives": "^12.1.0",
     "@atlaskit/progress-bar": "^0.5.6",
     "@atlaskit/section-message": "^6.1.10",
     "@atlaskit/select": "^15.2.11",

diff --git a/ui/src/components/SelectImportPage/screens/SelectProjectsScreen/index.tsx b/ui/src/components/SelectImportPage/screens/SelectProjectsScreen/index.tsx
@@ -1,11 +1,11 @@
 import { Dispatch, SetStateAction, useMemo } from 'react';
 import Button, { LoadingButton } from '@atlaskit/button';
 import Select from '@atlaskit/select';
-
+import { Inline } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
 import { Search } from '../../../Search';
 import { ProjectsImportTable } from '../../../ProjectsImportTable';
 import {
-  ButtonWrapper,
   GroupSelectorWrapper,
   Header,
   OverrideDescription,
@@ -14,12 +14,14 @@ import {
   Wrapper,
 } from '../../styles';
 import { CompassComponentTypeOption, ComponentTypesResult, ProjectImportSelection } from '../../../../services/types';
-import { CenterWrapper } from '../../../styles';
+import { ButtonWrapper, Divider } from '../../../styles';
 import { GitlabAPIGroup } from '../../../../types';
 import { buildGroupsSelectorOptions, SelectorItem } from './buildGroupsSelectorOptions';
 import { SelectOwnerTeamOption } from '../../../OwnerTeamSelect/types';
 import { TeamsForImportResult } from '../../../../hooks/useTeamsForImport';
 
+const projectsToImportMessage = (projCount: number) => (projCount === 1 ? 'project selected' : 'projects selected');
+
 type Props = {
   projects: ProjectImportSelection[];
   isProjectsLoading: boolean;
@@ -78,66 +80,72 @@ export const SelectProjectsScreen = ({
     <Wrapper data-testid='gitlab-select-projects-screen'>
       <Header>Select projects</Header>
       <OverrideDescription>
-        By importing projects as components, you can track them, manage them via configuration files, <br />
-        and bring in rich, real-time component data such as metrics, directly into Compass.
+        By importing projects as components, you can track them, manage them via configuration files, and bring in rich,
+        real-time component data such as metrics, directly into Compass.
       </OverrideDescription>
-      <>
-        <TableHeaderWrapper>
-          <GroupSelectorWrapper data-testid='group-selector'>
-            <Select
-              isClearable
-              isLoading={isGroupsLoading}
-              isDisabled={isProjectsLoading && !isGroupsLoading}
-              onChange={(e) => handleChangeGroup(e)}
-              inputId='select-group'
-              className='single-select'
-              classNamePrefix='react-select'
-              placeholder='Select group'
-              options={groupSelectorOptions}
-            />
-          </GroupSelectorWrapper>
-          <TableSearchWrapper>
-            <Search handleSearchValue={handleSearchValue} isProjectsLoading={isProjectsLoading} />
-          </TableSearchWrapper>
-        </TableHeaderWrapper>
-        <ProjectsImportTable
-          projects={projects}
-          isLoading={isProjectsLoading && !projects.length}
-          onSelectAllItems={onSelectAllItems}
-          onSelectItem={onSelectItem}
-          onChangeComponentType={onChangeComponentType}
-          error={projectsFetchingError}
-          importableComponentTypes={importableComponentTypes}
-          teamsResult={teamsResult}
-          selectProjectTeam={selectProjectTeam}
-          isSpotlightActive={isSpotlightActive}
-          finishOnboarding={finishOnboarding}
-        />
-        {projects.length !== 0 ? (
-          <CenterWrapper>
-            <LoadingButton
-              testId='load-more-button'
-              isDisabled={totalProjects <= projects.length}
-              onClick={() => setPage((prevPage) => prevPage + 1)}
-              isLoading={!!projects.length && isProjectsLoading}
-            >
-              Load More
-            </LoadingButton>
-          </CenterWrapper>
-        ) : null}
-      </>
-
-      <ButtonWrapper>
-        <Button onClick={() => handleNavigateToConnectedPage()}>Cancel</Button>
-        <LoadingButton
-          appearance='primary'
-          isDisabled={selectedProjects.length === 0}
-          onClick={() => handleNavigateToScreen()}
-          isLoading={isProjectsImporting}
-        >
-          Select
-        </LoadingButton>
-      </ButtonWrapper>
+      <TableHeaderWrapper>
+        <GroupSelectorWrapper data-testid='group-selector'>
+          <Select
+            isClearable
+            isLoading={isGroupsLoading}
+            isDisabled={isProjectsLoading && !isGroupsLoading}
+            onChange={(e) => handleChangeGroup(e)}
+            inputId='select-group'
+            className='single-select'
+            classNamePrefix='react-select'
+            placeholder='Select group'
+            options={groupSelectorOptions}
+          />
+        </GroupSelectorWrapper>
+        <TableSearchWrapper>
+          <Search handleSearchValue={handleSearchValue} isProjectsLoading={isProjectsLoading} />
+        </TableSearchWrapper>
+      </TableHeaderWrapper>
+      <ProjectsImportTable
+        projects={projects}
+        isLoading={isProjectsLoading && !projects.length}
+        onSelectAllItems={onSelectAllItems}
+        onSelectItem={onSelectItem}
+        onChangeComponentType={onChangeComponentType}
+        error={projectsFetchingError}
+        importableComponentTypes={importableComponentTypes}
+        teamsResult={teamsResult}
+        selectProjectTeam={selectProjectTeam}
+        isSpotlightActive={isSpotlightActive}
+        finishOnboarding={finishOnboarding}
+      />
+      {projects.length !== 0 ? (
+        <>
+          <Divider />
+          <Inline spread='space-between' alignBlock='center'>
+            <p>
+              <strong>{Object.keys(selectedProjects).length}</strong>{' '}
+              {projectsToImportMessage(Object.keys(selectedProjects).length)}
+            </p>
+            {totalProjects > projects.length ? (
+              <Button
+                testId={'load-more-button'}
+                label={'Load More'}
+                onClick={() => setPage((prevPage) => prevPage + 1)}
+                isDisabled={totalProjects <= projects.length}
+              >
+                {!!projects.length && isProjectsLoading ? <Spinner /> : 'Load More'}
+              </Button>
+            ) : null}
+            <ButtonWrapper>
+              <Button onClick={handleNavigateToConnectedPage}>Cancel</Button>
+              <LoadingButton
+                appearance='primary'
+                isDisabled={selectedProjects.length === 0}
+                onClick={handleNavigateToScreen}
+                isLoading={isProjectsImporting}
+              >
+                Select
+              </LoadingButton>
+            </ButtonWrapper>
+          </Inline>
+        </>
+      ) : null}
     </Wrapper>
   );
 };
diff --git a/ui/src/components/SelectImportPage/screens/__tests__/SelectProjectsScreen.test.tsx b/ui/src/components/SelectImportPage/screens/__tests__/SelectProjectsScreen.test.tsx
@@ -101,8 +101,8 @@ describe('SelectProjectsScreen', () => {
     expect(queryByTestId('load-more-button')).toBeNull();
   });
 
-  it('should disabled load more button when all projects are rendered', () => {
-    const { getByTestId } = render(
+  it('should remove load more button when all projects are rendered', () => {
+    const { queryByTestId } = render(
       <SelectProjectsScreen
         projects={projectImportSelectionMock}
         isProjectsLoading={false}
@@ -127,7 +127,7 @@ describe('SelectProjectsScreen', () => {
       />,
     );
 
-    expect(getByTestId('load-more-button')).toHaveProperty('disabled', true);
+    expect(queryByTestId('load-more-button')).toBeNull();
   });
 
   it('should show an error message per component type dropdown when component types result is empty.', () => {

diff --git a/ui/src/components/SelectImportPage/styles.ts b/ui/src/components/SelectImportPage/styles.ts
@@ -9,7 +9,7 @@ export const ButtonWrapper = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin: ${gridSize() * 4}px 0px;
+  margin: ${gridSize() * -2}px 0px;
   > button:not(:first-child) {
     margin-left: ${gridSize()}px;
   }

diff --git a/ui/src/components/styles.ts b/ui/src/components/styles.ts
@@ -1,15 +1,33 @@
 import styled, { css } from 'styled-components';
 
 import { h400 } from '@atlaskit/theme/typography';
-import { N200, N90, N900 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme';
+import { N200, N90, N900, N40 } from '@atlaskit/theme/colors';
+import { gridSize, borderRadius } from '@atlaskit/theme';
 import { token } from '@atlaskit/tokens';
 
 export const CenterWrapper = styled.div`
   display: flex;
   justify-content: center;
 `;
 
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin: ${gridSize() * -2}px 0px;
+  > button:not(:first-child) {
+    margin-left: ${gridSize()}px;
+    margin-right: ${gridSize()}px;
+  }
+`;
+
+export const Divider = styled.hr`
+  border: none;
+  background-color: ${token('color.border', N40)};
+  height: 2px;
+  border-radius: ${borderRadius}px;
+`;
+
 export const SectionWrapper = styled.div`
   padding-top: ${gridSize() * 1.5}px;
   padding-bottom: ${gridSize() * 1.5}px;
@@ -65,10 +83,18 @@ const disableLastHeaderCellStylingForSpotlight = css`
 
 export const TableWrapper = styled.div`
   margin-top: ${gridSize() * 4}px;
-  max-height: 60vh;
+  max-height: 65vh;
   overflow: auto;
   padding-right: 12px;
 
+  /* Hide scrollbar */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
   ${disableLastHeaderCellStylingForSpotlight}
 `;