-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Task/WG-238 panel assets listing (#261)
* Add initial feature file tree * Additional work on assets list * Add sorting * Improve doc * Improve styling and fix nodes of tree * Add todo * Refactor and add test * Refactor into new files * Move FeatureFileNode into types * Use font awesome for folder icon * Fix spelling error * Rework importing * Expand rows * Set witch of panel as 230px * Remove todos * Ensure nodes are expanded at start * Fix selection/hover and height of rows * Fix expanding rows on refresh * Add selected feature to route and fix row spacing * Add useDelete From #268 * Add functionality for feature deletion * Refactor MapProject * Fix todos * Add isLoading to button * Allow user to export feature geojson to file * Add feature icon in asset listing * Refactor types related to feature icon * Add missing useDeleteFeature * Add unit testing of getFeatureType * Fix linting * Add AssetsPanel test * Add FeatureFileTree unit test * Bump testing-library/react to get rid of act warnings * Removed unused * Add antd * Switch to antd tree instead of react-table * Fix accessibility-related warnings and fix unit tests * Adjust width and overflow * Fix height issues * Improve navbar * Remove deprecated typs/antd. Types are included already with antd * Limit getting features to a single time * Fix scaling of panel container * Rework tree to deal with virtual rendering issues 4px bottom butter was being added to each node which caused an issue in calculating how much vertical space was needed to render nodes. * Make nav bar scrolling when y overflows * Make contents of project view take up space below nav/control bar * Removed unneeded config and styles * Move hazmapper globals to hazmapper.css * Add missing file * Update act import * Fix bad merge --------- Co-authored-by: Author: sophia-massie <[email protected]>
- Loading branch information
1 parent
a54b319
commit 299d436
Showing
31 changed files
with
2,295 additions
and
314 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import React, { act } from 'react'; | ||
| import { render, screen, fireEvent } from '@testing-library/react'; | ||
| import AssetsPanel from './AssetsPanel'; | ||
| import { featureCollection } from '@hazmapper/__fixtures__/featuresFixture'; | ||
| import { useFeatures } from '@hazmapper/hooks'; | ||
|
|
||
| jest.mock('@hazmapper/hooks', () => ({ | ||
| useFeatures: jest.fn(), | ||
| })); | ||
|
|
||
| // Mock FeatureFileTree component since it's a complex component and tested elswhere | ||
| jest.mock('@hazmapper/components/FeatureFileTree', () => { | ||
| return function MockFeatureFileTree() { | ||
| return <div data-testid="feature-file-tree">FeatureFileTree Component</div>; | ||
| }; | ||
| }); | ||
|
|
||
| describe('AssetsPanel', () => { | ||
| const defaultProps = { | ||
| featureCollection, | ||
| projectId: 1, | ||
| isPublic: false, | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
|
|
||
| // Setup default mock implementation for useFeatures which is used for downloading geojson | ||
| (useFeatures as jest.Mock).mockReturnValue({ | ||
| isLoading: false, | ||
| refetch: jest.fn(), | ||
| }); | ||
| }); | ||
|
|
||
| it('renders all main components', () => { | ||
| const { getByText } = render(<AssetsPanel {...defaultProps} />); | ||
|
|
||
| // Check for the presence of buttons | ||
| expect(getByText('Import from DesignSafe TODO/WG-387')).toBeDefined(); | ||
| expect(getByText('Export to GeoJSON')).toBeDefined(); | ||
| }); | ||
|
|
||
| it('handles GeoJSON export correctly', async () => { | ||
| // Mock the useFeatures hook for download scenario | ||
| const mockRefetch = jest.fn(); | ||
| (useFeatures as jest.Mock).mockReturnValue({ | ||
| isLoading: false, | ||
| refetch: mockRefetch, | ||
| }); | ||
|
|
||
| render(<AssetsPanel {...defaultProps} />); | ||
|
|
||
| // Click export button | ||
| await act(async () => { | ||
| fireEvent.click(screen.getByText('Export to GeoJSON')); | ||
| }); | ||
| // Verify refetch was called | ||
| expect(mockRefetch).toHaveBeenCalled(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
react/src/components/FeatureFileTree/FeatureFileTree.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| .root { | ||
| width: 100%; | ||
| overflow: visible; | ||
|
|
||
| :global(.ant-tree .ant-tree-treenode) { | ||
| margin-bottom: 0px !important; /*needed to ensure calculation of row hight is right */ | ||
| } | ||
|
|
||
| /* Remove switcher space */ | ||
| :global(.ant-tree-switcher) { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Hovering over non-selected items */ | ||
| :global(.ant-tree-node-content-wrapper:hover:not(.ant-tree-node-selected)) { | ||
| background-color: var(--global-color-accent--weak) !important; | ||
| } | ||
|
|
||
| /* Selected items (both normal and hover state) */ /*TODO*/ | ||
| :global(.ant-tree-node-content-wrapper.ant-tree-node-selected) { | ||
| background-color: var(--global-color-accent--weak) !important; | ||
| } | ||
| } | ||
|
|
||
| .featureFileTree { | ||
| height: 100%; | ||
|
|
||
| :global(.ant-tree-node-content-wrapper) { | ||
| /*https://tacc-main.atlassian.net/browse/WG-390*/ | ||
| font-size: var(--global-font-family--small); | ||
| font-family: var(--global-font-family--sans); | ||
| max-width: var(--hazmapper-panel-width); /* fixed width of panel*/ | ||
| padding-left: 5px; | ||
| padding-right: 5px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| /* Adjust indent size */ | ||
| :global(.ant-tree-indent-unit) { | ||
| width: 8px; | ||
| } | ||
| } | ||
|
|
||
| .treeNode { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .fileName { | ||
| flex: 1; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| margin-left: 0.25em; | ||
| } |
Oops, something went wrong.