Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
c8299a3d
Commit
c8299a3d
authored
Apr 09, 2019
by
Robert Knight
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Convert '<group-list-section>' to React
parent
30d967f5
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
88 additions
and
63 deletions
+88
-63
group-list-section.js
src/sidebar/components/group-list-section.js
+55
-14
group-list-section-test.js
src/sidebar/components/test/group-list-section-test.js
+29
-25
index.js
src/sidebar/index.js
+4
-1
group-list-section.html
src/sidebar/templates/group-list-section.html
+0
-23
No files found.
src/sidebar/components/group-list-section.js
View file @
c8299a3d
'use strict'
;
// @ngInject
function
GroupListSectionController
()
{
this
.
isSelectable
=
function
(
groupId
)
{
const
group
=
this
.
sectionGroups
.
find
(
g
=>
g
.
id
===
groupId
);
const
{
Fragment
,
createElement
}
=
require
(
'preact'
);
const
propTypes
=
require
(
'prop-types'
);
const
GroupListItem
=
require
(
'./group-list-item'
);
const
GroupListItemOutOfScope
=
require
(
'./group-list-item-out-of-scope'
);
/**
* A labeled section of the groups list.
*/
function
GroupListSection
({
analytics
,
heading
,
sectionGroups
,
store
})
{
const
isSelectable
=
groupId
=>
{
const
group
=
sectionGroups
.
find
(
g
=>
g
.
id
===
groupId
);
return
!
group
.
scopes
.
enforced
||
group
.
isScopedToUri
;
};
return
(
<
Fragment
>
<
h2
className
=
"group-list-section__heading"
>
{
heading
}
<
/h2
>
<
ul
className
=
"group-list-section__content"
>
{
sectionGroups
.
map
(
group
=>
(
<
li
className
=
"dropdown-menu__row dropdown-menu__row--no-border dropdown-menu__row--unpadded"
key
=
{
group
.
id
}
>
{
isSelectable
(
group
.
id
)
?
(
<
GroupListItem
className
=
"group-list-item"
group
=
{
group
}
analytics
=
{
analytics
}
store
=
{
store
}
/
>
)
:
(
<
GroupListItemOutOfScope
className
=
"group-list-item-out-of-scope"
group
=
{
group
}
analytics
=
{
analytics
}
/
>
)}
<
/li
>
))}
<
/ul
>
<
/Fragment
>
);
}
module
.
export
s
=
{
controller
:
GroupListSectionController
,
controllerAs
:
'vm'
,
bindings
:
{
/* The list of groups to be displayed in the group list section. */
sectionGroups
:
'<'
,
/* The string name of the group list section. */
heading
:
'<'
,
}
,
template
:
require
(
'../templates/group-list-section.html'
)
,
GroupListSection
.
propType
s
=
{
/* The list of groups to be displayed in the group list section. */
sectionGroups
:
propTypes
.
arrayOf
(
propTypes
.
object
)
,
/* The string name of the group list section. */
heading
:
propTypes
.
string
,
// TODO - These are only used by child components. It shouldn't be necessary
// to pass them down manually.
analytics
:
propTypes
.
object
.
isRequired
,
store
:
propTypes
.
object
.
isRequired
,
};
GroupListSection
.
injectedProps
=
[
'analytics'
,
'store'
];
module
.
exports
=
GroupListSection
;
src/sidebar/components/test/group-list-section-test.js
View file @
c8299a3d
'use strict'
;
const
angular
=
require
(
'angular'
);
const
groupListSection
=
require
(
'../group-list-section'
);
const
util
=
require
(
'../../directive/test/util'
);
const
{
shallow
}
=
require
(
'enzyme'
);
const
{
createElement
}
=
require
(
'preact'
);
describe
(
'groupListSection'
,
()
=>
{
before
(()
=>
{
angular
.
module
(
'app'
,
[]).
component
(
'groupListSection'
,
groupListSection
);
});
beforeEach
(()
=>
{
angular
.
mock
.
module
(
'app'
,
{});
});
const
GroupListSection
=
require
(
'../group-list-section'
);
const
GroupListItem
=
require
(
'../group-list-item'
);
const
GroupListItemOutOfScope
=
require
(
'../group-list-item-out-of-scope'
);
describe
(
'GroupListSection'
,
()
=>
{
const
createGroupListSection
=
fakeSectionGroups
=>
{
return
util
.
createDirective
(
document
,
'groupListSection'
,
{
const
props
=
{
sectionGroups
:
fakeSectionGroups
,
});
analytics
:
{},
store
:
{},
};
return
shallow
(
<
GroupListSection
{...
props
}
/>
)
;
};
describe
(
'
isSelectable
'
,
()
=>
{
describe
(
'
group item types
'
,
()
=>
{
[
{
description
:
're
turns false if group is out of scope and scope is
enforced'
,
scopesEnforced
:
tru
e
,
expectedIsSelectable
:
[
true
,
fals
e
],
're
nders GroupListItem if group is out of scope but scope is not
enforced'
,
scopesEnforced
:
fals
e
,
expectedIsSelectable
:
[
true
,
tru
e
],
},
{
description
:
're
turns true if group is out of scope but scope is not
enforced'
,
scopesEnforced
:
fals
e
,
expectedIsSelectable
:
[
true
,
tru
e
],
're
nders GroupListItemOutOfScope if group is out of scope and scope is
enforced'
,
scopesEnforced
:
tru
e
,
expectedIsSelectable
:
[
true
,
fals
e
],
},
].
forEach
(({
description
,
scopesEnforced
,
expectedIsSelectable
})
=>
{
it
(
description
,
()
=>
{
...
...
@@ -48,14 +46,20 @@ describe('groupListSection', () => {
},
];
const
element
=
createGroupListSection
(
fakeSectionGroups
);
const
wrapper
=
createGroupListSection
(
fakeSectionGroups
);
fakeSectionGroups
.
forEach
(
g
=>
assert
.
equal
(
element
.
ctrl
.
isSelectable
(
g
.
id
),
expectedIsSelectable
[
g
.
id
]
const
itemTypes
=
wrapper
.
findWhere
(
n
=>
n
.
type
()
===
GroupListItem
||
n
.
type
()
===
GroupListItemOutOfScope
)
.
map
(
item
=>
item
.
type
().
name
);
const
expectedItemTypes
=
fakeSectionGroups
.
map
(
g
=>
expectedIsSelectable
[
g
.
id
]
?
'GroupListItem'
:
'GroupListItemOutOfScope'
);
assert
.
deepEqual
(
itemTypes
,
expectedItemTypes
);
});
});
});
...
...
src/sidebar/index.js
View file @
c8299a3d
...
...
@@ -164,7 +164,10 @@ function startAngularApp(config) {
'groupListItemOutOfScope'
,
wrapReactComponent
(
require
(
'./components/group-list-item-out-of-scope'
))
)
.
component
(
'groupListSection'
,
require
(
'./components/group-list-section'
))
.
component
(
'groupListSection'
,
wrapReactComponent
(
require
(
'./components/group-list-section'
))
)
.
component
(
'helpLink'
,
require
(
'./components/help-link'
))
.
component
(
'helpPanel'
,
require
(
'./components/help-panel'
))
.
component
(
'loggedoutMessage'
,
require
(
'./components/loggedout-message'
))
...
...
src/sidebar/templates/group-list-section.html
deleted
100644 → 0
View file @
30d967f5
<h2
class=
"group-list-section__heading"
>
{{ vm.heading }}
</h2>
<ul
class=
"group-list-section__content"
>
<li
class=
"dropdown-menu__row dropdown-menu__row--no-border dropdown-menu__row--unpadded"
ng-repeat=
"group in vm.sectionGroups track by group.id"
>
<group-list-item
class=
"group-list-item"
group=
"group"
ng-if=
"vm.isSelectable(group.id)"
>
</group-list-item>
<group-list-item-out-of-scope
class=
"group-list-item-out-of-scope"
group=
"group"
ng-if=
"!vm.isSelectable(group.id)"
>
</group-list-item-out-of-scope>
</li>
</ul>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment