-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* refactor: Unit sidebar to create the TagsSidebar * feat: Structure of TagsSidebar and TagsTree * feat: Adding styles to the TagsTree * feat: TagsSidebarHeader created * feat: Add count on TagsSidebarHeader * test: Tests for new components added * style: Update tags count with opacity when the count is zero * refactor: Extract tag count component as generic * refactor: Transform Sidebar to a wrapper component --------- Co-authored-by: Rômulo Penido <[email protected]>
- Loading branch information
Showing
29 changed files
with
667 additions
and
101 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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
3 changes: 3 additions & 0 deletions
3
src/content-tags-drawer/__mocks__/contentTaxonomyTagsCountMock.js
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,3 @@ | ||
module.exports = { | ||
'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b': 20, | ||
}; |
35 changes: 35 additions & 0 deletions
35
src/content-tags-drawer/__mocks__/contentTaxonomyTagsTreeMock.js
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,35 @@ | ||
module.exports = { | ||
'hierarchical taxonomy tag 1': { | ||
children: { | ||
'hierarchical taxonomy tag 1.7': { | ||
children: { | ||
'hierarchical taxonomy tag 1.7.59': { | ||
children: {}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
'hierarchical taxonomy tag 2': { | ||
children: { | ||
'hierarchical taxonomy tag 2.13': { | ||
children: { | ||
'hierarchical taxonomy tag 2.13.46': { | ||
children: {}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
'hierarchical taxonomy tag 3': { | ||
children: { | ||
'hierarchical taxonomy tag 3.4': { | ||
children: { | ||
'hierarchical taxonomy tag 3.4.50': { | ||
children: {}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
}; |
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
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,2 @@ | ||
@import "content-tags-drawer/TagBubble"; | ||
@import "content-tags-drawer/tags-sidebar-controls/TagsSidebarControls"; |
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
112 changes: 112 additions & 0 deletions
112
src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx
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,112 @@ | ||
// @ts-check | ||
import React, { useState, useMemo } from 'react'; | ||
import { | ||
Card, Stack, Button, Sheet, Collapsible, Icon, | ||
} from '@openedx/paragon'; | ||
import { ArrowDropDown, ArrowDropUp } from '@openedx/paragon/icons'; | ||
import { useIntl } from '@edx/frontend-platform/i18n'; | ||
import { useParams } from 'react-router-dom'; | ||
import { ContentTagsDrawer } from '..'; | ||
|
||
import messages from '../messages'; | ||
import { useContentTaxonomyTagsData } from '../data/apiHooks'; | ||
import { LoadingSpinner } from '../../generic/Loading'; | ||
import TagsTree from './TagsTree'; | ||
|
||
const TagsSidebarBody = () => { | ||
const intl = useIntl(); | ||
const [showManageTags, setShowManageTags] = useState(false); | ||
const contentId = useParams().blockId; | ||
const onClose = () => setShowManageTags(false); | ||
|
||
const { | ||
data: contentTaxonomyTagsData, | ||
isSuccess: isContentTaxonomyTagsLoaded, | ||
} = useContentTaxonomyTagsData(contentId || ''); | ||
|
||
const buildTagsTree = (contentTags) => { | ||
const resultTree = {}; | ||
contentTags.forEach(item => { | ||
let currentLevel = resultTree; | ||
|
||
item.lineage.forEach((key) => { | ||
if (!currentLevel[key]) { | ||
currentLevel[key] = { | ||
children: {}, | ||
canChangeObjecttag: item.canChangeObjecttag, | ||
canDeleteObjecttag: item.canDeleteObjecttag, | ||
}; | ||
} | ||
|
||
currentLevel = currentLevel[key].children; | ||
}); | ||
}); | ||
|
||
return resultTree; | ||
}; | ||
|
||
const tree = useMemo(() => { | ||
const result = []; | ||
if (isContentTaxonomyTagsLoaded && contentTaxonomyTagsData) { | ||
contentTaxonomyTagsData.taxonomies.forEach((taxonomy) => { | ||
result.push({ | ||
...taxonomy, | ||
tags: buildTagsTree(taxonomy.tags), | ||
}); | ||
}); | ||
} | ||
return result; | ||
}, [isContentTaxonomyTagsLoaded, contentTaxonomyTagsData]); | ||
|
||
return ( | ||
<> | ||
<Card.Body | ||
className="course-unit-sidebar-date tags-sidebar-body pl-2.5" | ||
> | ||
<Stack> | ||
{ isContentTaxonomyTagsLoaded | ||
? ( | ||
<Stack> | ||
{tree.map((taxonomy) => ( | ||
<div key={taxonomy.name}> | ||
<Collapsible | ||
className="tags-sidebar-taxonomy border-0 .font-weight-bold" | ||
styling="card" | ||
title={taxonomy.name} | ||
iconWhenClosed={<Icon src={ArrowDropDown} />} | ||
iconWhenOpen={<Icon src={ArrowDropUp} />} | ||
> | ||
<TagsTree tags={taxonomy.tags} parentKey={taxonomy.name} /> | ||
</Collapsible> | ||
</div> | ||
))} | ||
</Stack> | ||
) | ||
: ( | ||
<div className="d-flex justify-content-center"> | ||
<LoadingSpinner /> | ||
</div> | ||
)} | ||
|
||
<Button className="mt-3 ml-2" variant="outline-primary" size="sm" onClick={() => setShowManageTags(true)}> | ||
{intl.formatMessage(messages.manageTagsButton)} | ||
</Button> | ||
</Stack> | ||
</Card.Body> | ||
<Sheet | ||
position="right" | ||
show={showManageTags} | ||
onClose={onClose} | ||
> | ||
<ContentTagsDrawer | ||
id={contentId} | ||
onClose={onClose} | ||
/> | ||
</Sheet> | ||
</> | ||
); | ||
}; | ||
|
||
TagsSidebarBody.propTypes = {}; | ||
|
||
export default TagsSidebarBody; |
55 changes: 55 additions & 0 deletions
55
src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx
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,55 @@ | ||
import React from 'react'; | ||
import { render, screen, fireEvent } from '@testing-library/react'; | ||
import { IntlProvider } from '@edx/frontend-platform/i18n'; | ||
import TagsSidebarBody from './TagsSidebarBody'; | ||
import { useContentTaxonomyTagsData } from '../data/apiHooks'; | ||
import { contentTaxonomyTagsMock } from '../__mocks__'; | ||
|
||
const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b'; | ||
|
||
jest.mock('../data/apiHooks', () => ({ | ||
useContentTaxonomyTagsData: jest.fn(() => ({ | ||
isSuccess: false, | ||
data: {}, | ||
})), | ||
})); | ||
jest.mock('../ContentTagsDrawer', () => jest.fn(() => <div>Mocked ContentTagsDrawer</div>)); | ||
|
||
const RootWrapper = () => ( | ||
<IntlProvider locale="en" messages={{}}> | ||
<TagsSidebarBody /> | ||
</IntlProvider> | ||
); | ||
|
||
describe('<TagSidebarBody>', () => { | ||
it('shows spinner before the content data query is complete', () => { | ||
render(<RootWrapper />); | ||
expect(screen.getByRole('status')).toBeInTheDocument(); | ||
}); | ||
|
||
it('should render data after wuery is complete', () => { | ||
useContentTaxonomyTagsData.mockReturnValue({ | ||
isSuccess: true, | ||
data: contentTaxonomyTagsMock[contentId], | ||
}); | ||
render(<RootWrapper />); | ||
const taxonomyButton = screen.getByRole('button', { name: /hierarchicaltaxonomy/i }); | ||
expect(taxonomyButton).toBeInTheDocument(); | ||
|
||
/// ContentTagsDrawer must be closed | ||
expect(screen.queryByText('Mocked ContentTagsDrawer')).not.toBeInTheDocument(); | ||
}); | ||
|
||
it('should open ContentTagsDrawer', () => { | ||
useContentTaxonomyTagsData.mockReturnValue({ | ||
isSuccess: true, | ||
data: contentTaxonomyTagsMock[contentId], | ||
}); | ||
render(<RootWrapper />); | ||
|
||
const manageButton = screen.getByRole('button', { name: /manage tags/i }); | ||
fireEvent.click(manageButton); | ||
|
||
expect(screen.getByText('Mocked ContentTagsDrawer')).toBeInTheDocument(); | ||
}); | ||
}); |
Oops, something went wrong.