-
Notifications
You must be signed in to change notification settings - Fork 81
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FC-0036] Tags Sidebar #852
Merged
xitij2000
merged 18 commits into
openedx:master
from
open-craft:chris/FAL-3642-tags-sidebar
Mar 15, 2024
Merged
Changes from 17 commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
88b5438
refactor: Unit sidebar to create the TagsSidebar
ChrisChV 6839859
feat: Structure of TagsSidebar and TagsTree
ChrisChV 4bed61a
feat: Adding styles to the TagsTree
ChrisChV 540c2f7
feat: TagsSidebarHeader created
ChrisChV 29ad22a
feat: Add count on TagsSidebarHeader
ChrisChV 56af892
test: Tests for new components added
ChrisChV f808a84
style: Update tags count with opacity when the count is zero
ChrisChV 139e978
fix: Warnings on console
ChrisChV 14fd7cd
refactor: Extract tag count component as generic
ChrisChV 67cfe58
chore: Fix rebase conflicts and issues
ChrisChV c83c2bc
style: Fix nits
ChrisChV 7a70d81
style: Comments
ChrisChV bc39fe9
refactor: Transform Sidebar to a wrapper component
ChrisChV 1f33ca4
fix: Issue with classnames
ChrisChV 040e55b
style: Typo on api.test.js
ChrisChV 94d3f1f
style: Update TagsSidebar styles
ChrisChV fa1c2d2
chore: Fix merge conflicts
ChrisChV c9261e4
feat: add description to comments
ChrisChV File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be awesome if you could add some descriptions to these new messages. We'll be making them a requirement pretty soon. See openedx/frontend-build#517.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done c9261e4