From 67778209183f7a35aeab98445caa8a9b7bcf168c Mon Sep 17 00:00:00 2001 From: Kelly Joseph Price Date: Wed, 22 May 2024 15:36:57 -0700 Subject: [PATCH 1/4] feat: allow different prop --- __tests__/index.test.jsx | 15 +++++++++++---- index.jsx | 20 +++++++++++++------- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/__tests__/index.test.jsx b/__tests__/index.test.jsx index 0b1a21f..5a036c7 100644 --- a/__tests__/index.test.jsx +++ b/__tests__/index.test.jsx @@ -36,9 +36,16 @@ describe('single variable', () => { expect(container).toHaveTextContent('APIKEY'); }); + it('should allow the use of "name" as a prop', () => { + const { variable, ...rest } = props; + const { container } = render(); + + expect(container).toHaveTextContent('123456'); + }); + it('should render auth dropdown if default and oauth enabled', () => { const { container } = render( - , + ); fireEvent.click(container.querySelector('.variable-underline')); @@ -125,7 +132,7 @@ describe('multiple variables', () => { user={{ keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }, { name: 'project3' }], }} - />, + /> ); fireEvent.click(container.querySelector('.variable-underline')); @@ -149,7 +156,7 @@ describe('multiple variables', () => { keys: [{ name: 'project1', apiKey: '123' }], }} variable={'topLevelProperty'} - />, + /> ); expect(container).toHaveTextContent('this is coming straight from the top'); @@ -165,7 +172,7 @@ describe('multiple variables', () => { {...props} defaults={[{ name: 'testDefault', default: 'this is a default value' }]} variable={'testDefault'} - />, + /> ); expect(container).toHaveTextContent('this is a default value'); diff --git a/index.jsx b/index.jsx index efe490e..810ab4b 100644 --- a/index.jsx +++ b/index.jsx @@ -11,6 +11,7 @@ class Variable extends React.Component { super(props); this.state = { showDropdown: false }; + this.getName = this.getName.bind(this); this.toggleVarDropdown = this.toggleVarDropdown.bind(this); this.toggleAuthDropdown = this.toggleAuthDropdown.bind(this); this.renderVarDropdown = this.renderVarDropdown.bind(this); @@ -22,10 +23,15 @@ class Variable extends React.Component { this.props.changeSelected(event.target.value); } + getName() { + return this.props.name || this.props.variable; + } + getDefault() { - const def = this.props.defaults.filter(Boolean).find(d => d.name === this.props.variable) || {}; + const def = this.props.defaults.filter(Boolean).find(d => d.name === this.getName()) || {}; + if (def.default) return def.default; - return this.props.variable.toUpperCase(); + return this.getName().toUpperCase(); } getSelectedValue(selected) { @@ -43,9 +49,9 @@ class Variable extends React.Component { // Additionally do not show the dropdown if there is only a // single key, since there's nothing to change it to. shouldShowVarDropdown(selected) { - const { user, variable } = this.props; + const { user } = this.props; - return !!this.getSelectedValue(selected)[variable] && Array.isArray(user.keys) && user.keys.length > 1; + return !!this.getSelectedValue(selected)[this.getName()] && Array.isArray(user.keys) && user.keys.length > 1; } // Return value in this order @@ -54,10 +60,9 @@ class Variable extends React.Component { // - default value // - uppercase key getValue(selected) { - const { variable } = this.props; const selectedValue = this.getSelectedValue(selected); - const value = selectedValue[variable] || this.props.user[variable] || this.getDefault(); + const value = selectedValue[this.getName()] || this.props.user[this.getName()] || this.getDefault(); return typeof value === 'object' ? JSON.stringify(value) : value; } @@ -142,12 +147,13 @@ class Variable extends React.Component { Variable.propTypes = { changeSelected: PropTypes.func.isRequired, defaults: PropTypes.arrayOf(PropTypes.shape({ default: PropTypes.string, name: PropTypes.string })).isRequired, + name: PropTypes.string, oauth: PropTypes.bool, selected: PropTypes.string.isRequired, user: PropTypes.shape({ keys: PropTypes.array, }).isRequired, - variable: PropTypes.string.isRequired, + variable: PropTypes.string, }; Variable.defaultProps = { From 05cdb6a4178ff62855b3c6238127cfa6d54a2195 Mon Sep 17 00:00:00 2001 From: Kelly Joseph Price Date: Wed, 22 May 2024 15:39:37 -0700 Subject: [PATCH 2/4] chore: pretttier --- __tests__/index.test.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/__tests__/index.test.jsx b/__tests__/index.test.jsx index 5a036c7..3e9ae8d 100644 --- a/__tests__/index.test.jsx +++ b/__tests__/index.test.jsx @@ -45,7 +45,7 @@ describe('single variable', () => { it('should render auth dropdown if default and oauth enabled', () => { const { container } = render( - + , ); fireEvent.click(container.querySelector('.variable-underline')); @@ -132,7 +132,7 @@ describe('multiple variables', () => { user={{ keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }, { name: 'project3' }], }} - /> + />, ); fireEvent.click(container.querySelector('.variable-underline')); @@ -156,7 +156,7 @@ describe('multiple variables', () => { keys: [{ name: 'project1', apiKey: '123' }], }} variable={'topLevelProperty'} - /> + />, ); expect(container).toHaveTextContent('this is coming straight from the top'); @@ -172,7 +172,7 @@ describe('multiple variables', () => { {...props} defaults={[{ name: 'testDefault', default: 'this is a default value' }]} variable={'testDefault'} - /> + />, ); expect(container).toHaveTextContent('this is a default value'); From dc9252a0f81bf6846c5382256e333646b8b3cd24 Mon Sep 17 00:00:00 2001 From: Kelly Joseph Price Date: Wed, 22 May 2024 15:47:09 -0700 Subject: [PATCH 3/4] Update index.jsx Co-authored-by: Jon Ursenbach --- index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.jsx b/index.jsx index 810ab4b..94a9409 100644 --- a/index.jsx +++ b/index.jsx @@ -31,7 +31,7 @@ class Variable extends React.Component { const def = this.props.defaults.filter(Boolean).find(d => d.name === this.getName()) || {}; if (def.default) return def.default; - return this.getName().toUpperCase(); + return this.getName()?.toUpperCase() || undefined; } getSelectedValue(selected) { From 58914ba1bbdf90758e1012a1581b13df71dd34ae Mon Sep 17 00:00:00 2001 From: Kelly Joseph Price Date: Wed, 22 May 2024 15:51:44 -0700 Subject: [PATCH 4/4] feat: throw error --- index.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.jsx b/index.jsx index 94a9409..ce7ce21 100644 --- a/index.jsx +++ b/index.jsx @@ -24,14 +24,17 @@ class Variable extends React.Component { } getName() { - return this.props.name || this.props.variable; + const name = this.props.name || this.props.variable; + if (!name) throw new TypeError("Missing prop 'name' or 'variable' for Variable component!"); + + return name; } getDefault() { const def = this.props.defaults.filter(Boolean).find(d => d.name === this.getName()) || {}; if (def.default) return def.default; - return this.getName()?.toUpperCase() || undefined; + return this.getName().toUpperCase(); } getSelectedValue(selected) {