Added Categories selector for dynamic zone #7987

misterdju · 2020-09-22T13:53:10Z

This RP corresponds to the development of the RFC (0019-dz-categories)
Hope this PR is ready to be merged :)

codecov · 2020-09-22T14:26:34Z

Codecov Report

Merging #7987 (7dadfcc) into master (c1b7ab3) will decrease coverage by 0.08%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master    #7987      +/-   ##
==========================================
- Coverage   33.73%   33.65%   -0.09%     
==========================================
  Files        1244     1248       +4     
  Lines       13732    13765      +33     
  Branches     1365     1365              
==========================================
  Hits         4632     4632              
- Misses       8210     8243      +33     
  Partials      890      890

Flag	Coverage Δ
front	`25.33% <0.00%> (-0.09%)`	⬇️
unit	`54.36% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...min/src/components/DynamicComponentCard/Wrapper.js	`0.00% <ø> (ø)`
...manager/admin/src/components/DynamicZone/Banner.js	`0.00% <0.00%> (ø)`
.../admin/src/components/DynamicZone/BannerWrapper.js	`0.00% <0.00%> (ø)`
...r/admin/src/components/DynamicZone/CategoryItem.js	`0.00% <0.00%> (ø)`
...admin/src/components/DynamicZone/ComponentsList.js	`0.00% <0.00%> (ø)`
...min/src/components/DynamicZone/ComponentsPicker.js	`0.00% <ø> (ø)`
...-manager/admin/src/components/DynamicZone/index.js	`0.00% <0.00%> (ø)`
... and 1 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a7156c9...553a188. Read the comment docs.

alexandrebodin · 2020-09-23T09:57:16Z

Hi your PR contains unwanted commits. Can you clean it up ?

soupette

Thanks a lot for your contribution!

Users are going to love this addition, there just a few changes that needs to be applied and we will merge your PR.

Don't hesitate if you have any question.

soupette · 2020-10-16T08:41:52Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentsPicker.js

-    `
-    max-height: 260px;
-  `}
-
  .componentPickerTitle {
    margin-bottom: 15px;


Can you change the margin-bottom to 10px in order to keep the baseline?

@soupette done in 7c6485e

soupette · 2020-10-16T08:45:42Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js

+                <p className="componentPickerTitle">
+                  <FormattedMessage id={`${pluginId}.components.DynamicZone.pick-compo`} />
+                </p>
+                <div className="categoriesList">


Can you add the following css so the baseline is kept

.categoriesList { padding-bottom: 4px; }

@soupette done in 8ff2eac

soupette · 2020-10-16T09:17:46Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js

@@ -41,19 +42,27 @@ const DynamicZone = ({
  dynamicDisplayedComponents,
 }) => {
  const [isOpen, setIsOpen] = useState(false);
-
+  const [indexCategory, setIndexCategory] = useState(-1);


I would like to change the logic a bit of the collapses.

So here's my idea, we will use an object instead for the dynamicComponentCategories.

First let's change the useState hook:

const [categoryToOpen, setCategoryToOpen] = useState('');

@soupette done in 15570e0

soupette · 2020-10-16T09:19:34Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js

@@ -78,6 +87,42 @@ const DynamicZone = ({
    [layout, name]
  );

+  const dynamicComponentCategories = useMemo(() => {


Here we will use lodash groupBy instead to simplify the code a bit:

const dynamicComponentCategories = useMemo(() => { const componentsWithInfos = dynamicZoneAvailableComponents.map(componentUid => { const { category, schema: { info }, } = getDynamicComponent(componentUid); return { componentUid, category, info }; }); return groupBy(componentsWithInfos, 'category'); }, [dynamicZoneAvailableComponents, getDynamicComponent]);

This will return an object like the following:

{ category1: [ { componentUid, category: category1: info }, ....], }

@soupette done in 15570e0

soupette · 2020-10-16T09:19:54Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js

+      }, []);
+  }, [dynamicZoneAvailableComponents, getDynamicComponent]);
+
+  useEffect(() => {


With the modification added the effect is not needed here.

@soupette done in 15570e0

In the case there is only one category the list will not be opened by default.

soupette · 2020-10-16T09:21:45Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js

+                  <FormattedMessage id={`${pluginId}.components.DynamicZone.pick-compo`} />
+                </p>
+                <div className="categoriesList">
+                  {dynamicComponentCategories.map(({ category, components }, index) => {


Therefore, this needs to be updated as follow:

{Object.keys(dynamicComponentCategories).map((categoryName, index) => { const components = dynamicComponentCategories[categoryName]; return ( <CategoryItem key={categoryName} category={categoryName} components={components} isOpen={categoryToOpen === categoryName} isFirst={index === 0} onClickToggle={() => { // Detailed below handleClickToggle(categoryName); }} onClickComponent={componentUid => { setCategoryToOpen(''); const shouldCheckErrors = hasError; addComponentToDynamicZone(name, componentUid, shouldCheckErrors); }} /> ); })}

const handleClickToggle = useCallback( categoryName => { const nextCategoryToOpen = categoryToOpen === categoryName ? '' : categoryName; setCategoryToOpen(nextCategoryToOpen); }, [categoryToOpen] );

@soupette done in 15570e0

HichamELBSI · 2020-10-16T10:51:39Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/BannerWrapper.js

+    align-self: center;
+    margin-top: -2px;
+  }
+`;


Hello 😃 , I made some modifications to the file in order to use the theme and avoid the multiple conditions on the isOpen variable.

import styled from 'styled-components'; /* eslint-disable */ const BannerWrapper = styled.button` display: flex; height: 36px; width: 100%; padding: 0 15px; border-bottom: 0; border: 1px solid rgba(227, 233, 243, 0.75); background-color: ${({ theme }) => theme.main.colors.white}; font-size: ${({ theme }) => theme.main.sizes.fonts.md}; font-weight: ${({ theme }) => theme.main.fontWeights.semiBold}; cursor: pointer; &:focus { outline: 0; } .img-wrapper { width: 19px; height: 19px; margin-right: 19px; border-radius: 50%; background-color: ${({ theme }) => theme.main.colors.mediumGrey}; text-align: center; } .label { text-transform: capitalize; } svg { path { fill: ${({ theme }) => theme.main.colors.leftMenu['link-color']} !important; } } -webkit-font-smoothing: antialiased; > div { align-self: center; margin-top: -2px; } ${({ isFirst, theme }) => { if (isFirst) { return ` border-top-right-radius: ${theme.main.sizes.borderRadius}; border-top-left-radius: ${theme.main.sizes.borderRadius}; `; } }} ${({ isOpen, theme }) => { if (isOpen) { return ` border: 1px solid ${theme.main.colors.darkBlue}; background-color: ${theme.main.colors.lightBlue}; color: ${theme.main.colors.mediumBlue}; font-weight: ${theme.main.fontWeights.bold}; .img-wrapper { background-color: ${theme.main.colors.darkBlue}; transform: rotate(180deg); } svg { path { fill: ${theme.main.colors.mediumBlue} !important; } } `; } }} `; export default BannerWrapper;

@HichamELBSI done in bc81f9a

HichamELBSI · 2020-10-16T11:02:49Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/CategoryItem.js

+      <Collapse
+        isOpen={isOpen}
+        style={{ backgroundColor: '#F3F3F3' }}
+        onExited={() => setShowComponents(false)}


Can you create a handle function please.

const handleExited = () => setShowComponents(false); return ( <> <Banner onClickToggle={onClickToggle} isFirst={isFirst} isOpen={isOpen} category={category} /> <Collapse isOpen={isOpen} style={{ backgroundColor: '#F3F3F3' }} onExited={handleExited}

@HichamELBSI done in 146bd85

HichamELBSI · 2020-10-16T11:03:07Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/CategoryItem.js

+      <Banner onClickToggle={onClickToggle} isFirst={isFirst} isOpen={isOpen} category={category} />
+      <Collapse
+        isOpen={isOpen}
+        style={{ backgroundColor: '#F3F3F3' }}


This custom background seems to be useless. Can you remove it please.

@HichamELBSI done in 773c0a8

HichamELBSI · 2020-10-16T11:10:11Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/CategoryItem.js

+          <div
+            className="componentsList"
+            style={{ paddingTop: '10px', paddingLeft: '15px', paddingRight: '15px' }}
+          >


Can you create a file for this component please.

`...src/components/DynamicZone/ComponentsList.js``

import styled from 'styled-components'; const ComponentsList = styled.div` padding-top: 10px; padding-left: 15px; padding-right: 15px; `; export default ComponentsList

and then in .../src/components/DynamicZone/CategoryItem.js

... return ( <> <Banner onClickToggle={onClickToggle} isFirst={isFirst} isOpen={isOpen} category={category} /> <Collapse isOpen={isOpen} onExited={handleExited}> {showComponents && ( <ComponentsList className="componentsList"> {components.map(component => { const { info: { icon, name: friendlyName }, componentUid, } = component; return ( <DynamicComponentCard key={componentUid} componentUid={componentUid} friendlyName={friendlyName} icon={icon} onClick={() => onClickComponent(componentUid)} /> ); })} </ComponentsList> )} </Collapse> </> ); ...

@HichamELBSI done in 5963e6c

soupette · 2020-10-29T08:51:54Z

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js

+    return groupBy(componentsWithInfos, 'category');
+  }, [dynamicZoneAvailableComponents, getDynamicComponent]);
+
+  // useEffect(() => {


Can you remove the comment?

soupette

LGTM

soupette · 2020-11-03T08:18:39Z

@misterdju can you make sure the DCO checks so we can merge your PR?

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

Signed-off-by: Nicolas Chesné <hello@norbz.net> Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

misterdju · 2020-11-09T13:48:47Z

@misterdju can you make sure the DCO checks so we can merge your PR?

@soupette, I have done the commands suggested by the DCO checks. Is it ok for you ?

soupette · 2020-11-12T14:41:09Z

@misterdju sure but it looks like you have unwanted commits in your PR which affects more than 100 files. Can you check?

derrickmehaffy · 2020-11-12T20:03:18Z

I think a rebase here instead of merging in the master should remove quite a bit of the conflicts as well as the various commits

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

misterdju · 2020-11-16T13:23:57Z

@soupette i think it is good now.

soupette

LGTM

soupette · 2020-11-18T09:52:37Z

@misterdju can you update your branch so we can merge the PR?

derrickmehaffy · 2020-11-25T16:19:23Z

This pull request has been mentioned on Strapi Community. There might be relevant details there:

https://forum.strapi.io/t/new-release-strapi-v3-3-4/1322/1

alexandrebodin requested review from soupette, JabStrapi, maevalienard and HichamELBSI September 22, 2020 15:01

soupette suggested changes Oct 16, 2020

View reviewed changes

HichamELBSI requested changes Oct 16, 2020

View reviewed changes

misterdju requested a review from a team as a code owner October 26, 2020 15:14

misterdju requested review from soupette and HichamELBSI and removed request for a team October 28, 2020 17:17

soupette suggested changes Oct 29, 2020

View reviewed changes

misterdju requested a review from soupette October 30, 2020 09:24

soupette previously approved these changes Nov 2, 2020

View reviewed changes

soupette added the source: core:content-manager Source is core/content-manager package label Nov 2, 2020

soupette modified the milestone: 3.2.6 Nov 2, 2020

Boudringhin Julien and others added 3 commits November 3, 2020 14:53

Adding Categories selector for Dynamic zone

25a0a65

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

Opened selector if single category

e1b9fd5

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

merge upstream/master into feature/dynamiczone-categories

09be8fc

Signed-off-by: Nicolas Chesné <hello@norbz.net> Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

misterdju dismissed soupette’s stale review via b10bbfc November 3, 2020 13:54

misterdju requested a review from a team as a code owner November 3, 2020 13:54

jbo@lachose.fr added 3 commits November 16, 2020 12:12

Update componentPickerTitle margin-bottom to 10px

d6915d3

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

ComponentsPicker Add categoriesList padding-bottom

89613f3

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

update logic of collapses

a69cc8b

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

jbo@lachose.fr and others added 6 commits November 16, 2020 12:14

BannerWrapper include updates from @HichamELBSI

47bf571

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

CategoryItem : create handleExited function

e1e4915

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

CategoryItem remove background color

6887cc2

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

Create ComponentsList

c4a3647

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

Remove comment on DynamicZone

636877c

Signed-off-by: Julien Boudringhin <julien.boudringhin@gmail.com>

Merge branch 'master' into feature/dynamiczone-categories

e168f25

soupette approved these changes Nov 18, 2020

View reviewed changes

soupette added this to the 3.4.0 milestone Nov 18, 2020

Merge branch 'master' into feature/dynamiczone-categories

553a188

soupette merged commit 3cb5396 into strapi:master Nov 18, 2020

soupette added the issue: enhancement Issue suggesting an enhancement to an existing feature label Nov 18, 2020

alexandrebodin modified the milestones: 3.4.0, 3.3.4 Nov 25, 2020

misterdju deleted the feature/dynamiczone-categories branch November 26, 2020 09:02

renovate bot mentioned this pull request Jun 14, 2021

Update strapi monorepo to v3.6.10 Tejaswgupta/furniture-shop-strapi#21

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Categories selector for dynamic zone #7987

Added Categories selector for dynamic zone #7987

misterdju commented Sep 22, 2020

codecov bot commented Sep 22, 2020 •

edited

Loading

alexandrebodin commented Sep 23, 2020

soupette left a comment

soupette Oct 16, 2020

misterdju Oct 26, 2020

soupette Oct 16, 2020

misterdju Oct 26, 2020

soupette Oct 16, 2020

misterdju Oct 26, 2020

soupette Oct 16, 2020

misterdju Oct 26, 2020

soupette Oct 16, 2020

misterdju Oct 26, 2020

soupette Oct 16, 2020

misterdju Oct 26, 2020

HichamELBSI Oct 16, 2020

misterdju Oct 26, 2020

HichamELBSI Oct 16, 2020

misterdju Oct 26, 2020

HichamELBSI Oct 16, 2020

misterdju Oct 26, 2020

HichamELBSI Oct 16, 2020

misterdju Oct 26, 2020

soupette Oct 29, 2020

soupette left a comment

soupette commented Nov 3, 2020

misterdju commented Nov 9, 2020

soupette commented Nov 12, 2020

derrickmehaffy commented Nov 12, 2020

misterdju commented Nov 16, 2020

soupette left a comment

soupette commented Nov 18, 2020

derrickmehaffy commented Nov 25, 2020

Added Categories selector for dynamic zone #7987

Added Categories selector for dynamic zone #7987

Conversation

misterdju commented Sep 22, 2020

codecov bot commented Sep 22, 2020 • edited Loading

Codecov Report

alexandrebodin commented Sep 23, 2020

soupette left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soupette left a comment

Choose a reason for hiding this comment

soupette commented Nov 3, 2020

misterdju commented Nov 9, 2020

soupette commented Nov 12, 2020

derrickmehaffy commented Nov 12, 2020

misterdju commented Nov 16, 2020

soupette left a comment

Choose a reason for hiding this comment

soupette commented Nov 18, 2020

derrickmehaffy commented Nov 25, 2020

codecov bot commented Sep 22, 2020 •

edited

Loading