Skip to content
This repository has been archived by the owner on Jun 10, 2021. It is now read-only.

Commit

Permalink
WIP feature tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-ssg
kyle-ssg committed Jul 12, 2020
1 parent 05b1a28 commit 435684f
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 26 deletions.
15 changes: 7 additions & 8 deletions common/project.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
module.exports = global.Project = {
api: 'https://api.bullet-train.io/api/v1/',
api: 'https://api-dev.bullet-train.io/api/v1/',
bulletTrainClientAPI: 'https://api.bullet-train.io/api/v1/',
bulletTrain: '4vfqhypYjcPoGGu8ByrBaj', // This is our Bullet Train API key - Bullet Train runs on Bullet Train!
env: 'prod', // This is used for Sentry tracking
ga: 'UA-120237963-1', // This is our Google Analytics key
sentry: 'https://[email protected]/1320942',
bulletTrain: '8KzETdDeMY7xkqkSkY3Gsg', // This is our Bullet Train API key - Bullet Train runs on Bullet Train!
debug: false,
env: 'dev', // This is used for Sentry tracking
ga: 'UA-120237963-3', // This is our Google Analytics key
demoAccount: {
email: '[email protected]',
password: 'demo_account',
},
chargebee: {
site: 'bullettrain',
site: 'bullettrain-test',
},
crispChat: '8857f89e-0eb5-4263-ab49-a293872b6c19',
mixpanel: '9448f5be8a5555c380e5dd4b7ac2c345',
assetUrl: 'https://cdn.bullet-train.io', // Location of the static files from build/, should contain a directory called static/
mixpanel: '6143f9ceefb1c67640a0771345e8c095',
};
5 changes: 5 additions & 0 deletions common/providers/withTags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,15 @@ export default (WrappedComponent) => {
});
}


isSelected = tag => this.props.value && this.props.value.includes(tag.id)


render() {
return (
<WrappedComponent
ref="wrappedComponent"
isSelected={this.isSelected}
{...this.props}
{...this.state}
/>
Expand Down
81 changes: 64 additions & 17 deletions web/components/AddEditTags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,31 @@ import color from 'color';
import cx from 'classnames';
import withTags from '../../common/providers/withTags';
import InlineModal from './InlineModal';
import TagList from './TagList';

class TagValues extends PureComponent {
static displayName = 'TheComponent';

static propTypes = {
};

render() {
const { props: { tags } } = this;
return (
<>
{tags && tags.map(tag => this.props.isSelected(tag) && (
<Tag
className="px-2 py-2 mr-2"
tag={tag}
/>
))}
<Button onClick={this.props.onAdd} type="button" className="btn--outline">
Add Tag
</Button>
</>
);
}
}
class Tag extends PureComponent {
static displayName = 'TheComponent';

Expand All @@ -27,9 +51,9 @@ class Tag extends PureComponent {
const { props: { onClick, tag, selected, className } } = this;
return (
<div
onClick={() => onClick(tag)}
onMouseEnter={this.toggleHover}
onMouseLeave={this.toggleHover}
onClick={onClick ? () => onClick(tag) : null}
onMouseEnter={onClick ? this.toggleHover : null}
onMouseLeave={onClick ? this.toggleHover : null}
style={{ backgroundColor: this.state.hover ? color(tag.colour).darken(0.1) : tag.colour }}
className={cx('tag', className)}
>
Expand Down Expand Up @@ -61,6 +85,10 @@ class _CreateEditTag extends PureComponent {
tag: this.props.tag ? { ...this.props.tag } : {},
}

componentDidMount() {
this.input && this.input.focus();
}

update = (index, e) => {
this.setState({
tag: {
Expand All @@ -71,6 +99,8 @@ class _CreateEditTag extends PureComponent {
}

save = () => {
const disabled = this.props.tagsSaving || !this.state.tag.colour || !this.state.tag.label;
if (disabled) return;
const isEdit = !!this.state.tag.id;
const func = isEdit ? AppActions.updateTag : AppActions.createTag;
func(this.props.projectId, this.state.tag, (tag) => {
Expand All @@ -79,12 +109,20 @@ class _CreateEditTag extends PureComponent {
});
}

onKeyDown = (e) => {
if (e.key === 'Enter') {
this.save();
}
}

render() {
const isEdit = !!this.state.tag.id;
return (
<div>
<InputGroup
inputProps={{ name: 'create-tag-name', className: 'full-width mb-2' }}
value={this.state.tag.label}
ref={input => this.input = input}
inputProps={{ name: 'create-tag-name', className: 'full-width mb-2', onKeyDown: this.onKeyDown }}
title="Name"
onChange={e => this.update('label', e)}
/>
Expand All @@ -108,8 +146,8 @@ class _CreateEditTag extends PureComponent {
)}
/>
<div className="text-center">
<Button type="button" onClick={this.save} disabled={this.props.tagsSaving || !this.state.tag.colour || !this.state.tag.label}>
{isEdit ? 'Edit Tag' : 'Create Tag' }
<Button onClick={this.save} type="button" disabled={this.props.tagsSaving || !this.state.tag.colour || !this.state.tag.label}>
{isEdit ? 'Save Tag' : 'Create Tag' }
</Button>
</div>
</div>
Expand Down Expand Up @@ -150,18 +188,23 @@ class TheComponent extends PureComponent {
return tags;
}

isSelected = tag => this.props.value && this.props.value.includes(tag.id)

selectTag = (tag) => {
const value = this.props.value || [];
const isSelected = this.isSelected(tag);
const isSelected = this.props.isSelected(tag);
if (isSelected) {
this.props.onChange(_.filter(value, id => id !== tag.id));
} else {
this.props.onChange(value.concat([tag.id]));
}
}

editTag = (tag) => {
this.setState({
tag,
tab: 'EDIT',
});
}

render() {
const { props: {
tags,
Expand All @@ -171,9 +214,10 @@ class TheComponent extends PureComponent {
const filteredTags = projectTags && this.filter(projectTags);
return (
<div>
<Button onClick={this.toggle} type="button" className="btn--outline">
Add Tag
</Button>
<div className="inline-tags mt-2">
<TagValues onAdd={this.toggle} tags={projectTags} isSelected={this.props.isSelected} value={this.props.value}/>
</div>

<InlineModal
title="Tags"
isOpen={this.state.isOpen}
Expand All @@ -184,7 +228,10 @@ class TheComponent extends PureComponent {
>
{this.state.tab === 'SELECT' && (
<div>
<Input value={this.state.filter} onChange={this.setFilter} className="full-width mb-2" placeholder="Search tags..."/>
<Input
value={this.state.filter} onChange={this.setFilter} className="full-width mb-2"
placeholder="Search tags..."
/>
{tagsLoading && !projectTags && (
<div className="text-center">
<Loader/>
Expand All @@ -196,11 +243,11 @@ class TheComponent extends PureComponent {
<Row>
<Flex>
<Tag
className="px-2 py-2" onClick={this.selectTag} selected={this.isSelected(tag)}
className="px-2 py-2" onClick={this.selectTag} selected={this.props.isSelected(tag)}
tag={tag}
/>
</Flex>
<div className="ml-2 px-2 py-2">
<div onClick={() => this.editTag(tag)} className="ml-2 px-2 py-2 clickable">
<span className="icon ion-md-settings"/>
</div>

Expand All @@ -222,7 +269,7 @@ class TheComponent extends PureComponent {

</div>
<div className="text-center pt-2">
<Button onClick={() => this.setState({ tab: 'CREATE', filter:'' })} type="button">
<Button onClick={() => this.setState({ tab: 'CREATE', filter: '' })} type="button">
Create a New Tag
</Button>
</div>
Expand All @@ -239,7 +286,7 @@ class TheComponent extends PureComponent {
{
this.state.tab === 'EDIT' && (
<CreateEditTag
projectId={this.props.projectId} tag={this.state.tab} onComplete={(tag) => {
projectId={this.props.projectId} tag={this.state.tag} onComplete={(tag) => {
this.selectTag(tag);
this.setState({ tab: 'SELECT' });
}}
Expand Down
Empty file added web/components/TagList.js
View file
Empty file.
4 changes: 3 additions & 1 deletion web/components/modals/CreateFlag.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import withSegmentOverrides from '../../../common/providers/withSegmentOverrides
import data from '../../../common/data/base/_data';
import SegmentOverrides from '../SegmentOverrides';
import AddEditTags from '../AddEditTags';
import TagList from '../TagList';

const CreateFlag = class extends Component {
static displayName = 'CreateFlag'
Expand Down Expand Up @@ -125,6 +126,7 @@ const CreateFlag = class extends Component {
id="create-feature-modal"
className="mt-4"
onSubmit={(e) => {
e.stopPropagation();
e.preventDefault();
const func = isEdit ? editFlag : createFlag;
this.save(func, isSaving);
Expand Down Expand Up @@ -359,7 +361,7 @@ const CreateFlag = class extends Component {
<div className="text-right mb-2">
{isEdit ? (
<Button data-test="update-feature-btn" id="update-feature-btn" disabled={isSaving || !name}>
{isSaving ? 'Creating' : 'Update Feature'}
{isSaving ? 'Updating' : 'Update Feature'}
</Button>
) : (
<Button data-test="create-feature-btn" id="create-feature-btn" disabled={isSaving || !name}>
Expand Down
12 changes: 12 additions & 0 deletions web/styles/project/_tags.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.tag {
line-height: 18px;
border-radius: $border-radius-default;
color: white;
font-weight: bold;
Expand Down Expand Up @@ -26,3 +27,14 @@

}
}

.inline-tags {
.btn {
height: 34px;
line-height: 31px;
padding: 0 12px;
}
.tag {
display: inline-block;
}
}

0 comments on commit 435684f

Please sign in to comment.