9692413442

Committed 27 Jun 2024 07:24AM UTC coverage: 32.014% (+0.04%) from 31.975%

Build # 9692413442

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9448 from ForumMagnum/master

[EA] Deploy surveys, analytics sorting, ckeditor upgrade

Run Details

4885 of 39705 branches covered (12.3%)

Branch coverage included in aggregate %.

207 of 435 new or added lines in 48 files covered. (47.59%)

2 existing lines in 2 files now uncovered.

28382 of 64209 relevant lines covered (44.2%)

181.06 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

14.75

/packages/lesswrong/components/vulcan-ui-bootstrap/forms/FormComponentInner.tsx

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { registerComponent, instantiateComponent } from '../../../lib/vulcan-lib';
import classNames from 'classnames';
import { HIGHLIGHT_DURATION } from '../../comments/CommentFrame';
import { withLocation } from '../../../lib/routeUtil';

const styles = (theme: ThemeType): JssStyles => ({
  formComponentClear: {
    "& span": {
      position: "relative",
      top: 20,
      padding: 10,
    },
  },
  '@keyframes higlight-animation': {
    from: {
      // In most cases it would look better with a border. But because this has to support so many different components, it's hard to know what the border should be, so instead just use a background color.
      backgroundColor: theme.palette.panelBackground.commentHighlightAnimation,
      borderRadius: 5,
    },
    to: {
      backgroundColor: "none",
      borderRadius: 5,
    }
  },
  highlightAnimation: {
    animation: `higlight-animation ${HIGHLIGHT_DURATION}s ease-in-out 0s;`
  },
});

class FormComponentInner extends PureComponent<any, {highlight: boolean}> {
  scrollRef: React.RefObject<HTMLDivElement>;

  constructor(props: AnyBecauseTodo) {
    super(props);

    this.state = {highlight: false};
    this.scrollRef = React.createRef<HTMLDivElement>()
  }

  componentDidMount(): void {
    // If highlightField is set to this field, scroll it into view and highlight it
    const { query } = this.props.location;
    const { name } = this.props;

    // NOTE: If you are grepping for highlightField because you tried it and it didn't work, it's possible that
    // this is because the field is of type FormNestedArray or FormNestedObject. Currently these fields don't
    // support highlighting (see packages/lesswrong/components/vulcan-forms/FormComponent.tsx for where these fields are rendered)
    if (name && name === query?.highlightField) {
      this.scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
      this.setState({highlight: true});
      setTimeout(() => {
        this.setState({highlight: false});
      }, HIGHLIGHT_DURATION * 1000);
    }
  }

  renderClear = () => {
    const { classes } = this.props;
    if (
      ['datetime', 'time', 'select', 'radiogroup', 'SelectLocalgroup'].includes(this.props.input) &&
      !this.props.hideClear
    ) {
      return (
        <a
          className={classes.formComponentClear}
          title="Clear field"
          onClick={this.props.clearField}
        >
          <span>✕</span>
        </a>
      );
    }
  };

  getProperties = () => {
    const { name, path, options, label, onChange, value, disabled, inputType } = this.props;

    // these properties are whitelisted so that they can be safely passed to the actual form input
    // and avoid https://facebook.github.io/react/warnings/unknown-prop.html warnings
    const inputProperties = {
      name,
      path,
      options,
      label,
      onChange: (event: AnyBecauseTodo) => {
        // FormComponent's handleChange expects value as argument; look in target.checked or target.value
        const inputValue = inputType === 'checkbox' ? event.target.checked : event.target.value;
        onChange(inputValue);
      },
      value,
      disabled,
      ...this.props.inputProperties,
    };

    return {
      ...this.props,
      inputProperties,
    };
  };

  render() {
    const {
      inputClassName,
      name,
      input,
      beforeComponent,
      afterComponent,
      errors,
      showCharsRemaining,
      charsRemaining,
      formComponents,
      classes,
    } = this.props;

    const FormComponents = formComponents;

    const hasErrors = errors && errors.length;

    const inputName = typeof input === 'function' ? input.name : input;
    const inputClass = classNames(
      'form-input',
      inputClassName,
      `input-${name}`,
      `form-component-${inputName || 'default'}`,
      { 'input-error': hasErrors }
    );
    const properties = this.getProperties();

    const FormInput = this.props.formInput;

    return (
      <div className={classNames(inputClass, {[classes.highlightAnimation]: this.state.highlight})} ref={this.scrollRef}>
        {instantiateComponent(beforeComponent, properties)}
        <FormInput {...properties}/>
        {hasErrors ? <FormComponents.FieldErrors errors={errors} /> : null}
        {this.renderClear()}
        {showCharsRemaining && (
          <div className={classNames('form-control-limit', { danger: charsRemaining < 10 })}>{charsRemaining}</div>
        )}
        {instantiateComponent(afterComponent, properties)}
      </div>
    );
  }
}

(FormComponentInner as any).propTypes = {
  inputClassName: PropTypes.string,
  name: PropTypes.string.isRequired,
  input: PropTypes.any,
  beforeComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  afterComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  clearField: PropTypes.func.isRequired,
  errors: PropTypes.array.isRequired,
  help: PropTypes.node,
  onChange: PropTypes.func.isRequired,
  showCharsRemaining: PropTypes.bool.isRequired,
  charsRemaining: PropTypes.number,
  charsCount: PropTypes.number,
  charsMax: PropTypes.number,
  inputComponent: PropTypes.func,
  classes: PropTypes.any,
};

const FormComponentInnerComponent = registerComponent('FormComponentInner', FormComponentInner, {styles, hocs: [withLocation]});

declare global {
  interface ComponentTypes {
    FormComponentInner: typeof FormComponentInnerComponent
  }
}

1	import React, { PureComponent } from 'react';	1✔
2	import PropTypes from 'prop-types';	1✔
3	import { registerComponent, instantiateComponent } from '../../../lib/vulcan-lib';	1✔
4	import classNames from 'classnames';	1✔
5	import { HIGHLIGHT_DURATION } from '../../comments/CommentFrame';	1✔
6	import { withLocation } from '../../../lib/routeUtil';	1✔
7
8	const styles = (theme: ThemeType): JssStyles => ({	1✔
9	formComponentClear: {
10	"& span": {
11	position: "relative",
12	top: 20,
13	padding: 10,
14	},
15	},
16	'@keyframes higlight-animation': {
17	from: {
18	// In most cases it would look better with a border. But because this has to support so many different components, it's hard to know what the border should be, so instead just use a background color.
19	backgroundColor: theme.palette.panelBackground.commentHighlightAnimation,
20	borderRadius: 5,
21	},
22	to: {
23	backgroundColor: "none",
24	borderRadius: 5,
25	}
26	},
27	highlightAnimation: {
28	animation: `higlight-animation ${HIGHLIGHT_DURATION}s ease-in-out 0s;`
29	},
30	});
31
32	class FormComponentInner extends PureComponent<any, {highlight: boolean}> {
33	scrollRef: React.RefObject<HTMLDivElement>;
34
35	constructor(props: AnyBecauseTodo) {
36	super(props);	×
37
38	this.state = {highlight: false};	×
39	this.scrollRef = React.createRef<HTMLDivElement>()	×
40	}
41
42	componentDidMount(): void {
43	// If highlightField is set to this field, scroll it into view and highlight it
44	const { query } = this.props.location;	×
45	const { name } = this.props;	×
46
47	// NOTE: If you are grepping for highlightField because you tried it and it didn't work, it's possible that
48	// this is because the field is of type FormNestedArray or FormNestedObject. Currently these fields don't
49	// support highlighting (see packages/lesswrong/components/vulcan-forms/FormComponent.tsx for where these fields are rendered)
50	if (name && name === query?.highlightField) {	×
51	this.scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });	×
52	this.setState({highlight: true});	×
53	setTimeout(() => {	×
54	this.setState({highlight: false});	×
55	}, HIGHLIGHT_DURATION * 1000);
56	}
57	}
58
59	renderClear = () => {	×
60	const { classes } = this.props;	×
NEW 61	if (	×
62	['datetime', 'time', 'select', 'radiogroup', 'SelectLocalgroup'].includes(this.props.input) &&	×
63	!this.props.hideClear
64	) {
UNCOV 65	return (	×
66	<a
67	className={classes.formComponentClear}
68	title="Clear field"
69	onClick={this.props.clearField}
70	>
71	<span>✕</span>
72	</a>
73	);
74	}
75	};
76
77	getProperties = () => {	×
78	const { name, path, options, label, onChange, value, disabled, inputType } = this.props;	×
79
80	// these properties are whitelisted so that they can be safely passed to the actual form input
81	// and avoid https://facebook.github.io/react/warnings/unknown-prop.html warnings
82	const inputProperties = {	×
83	name,
84	path,
85	options,
86	label,
87	onChange: (event: AnyBecauseTodo) => {
88	// FormComponent's handleChange expects value as argument; look in target.checked or target.value
89	const inputValue = inputType === 'checkbox' ? event.target.checked : event.target.value;	×
90	onChange(inputValue);	×
91	},
92	value,
93	disabled,
94	...this.props.inputProperties,
95	};
96
97	return {	×
98	...this.props,
99	inputProperties,
100	};
101	};
102
103	render() {
104	const {
105	inputClassName,
106	name,
107	input,
108	beforeComponent,
109	afterComponent,
110	errors,
111	showCharsRemaining,
112	charsRemaining,
113	formComponents,
114	classes,
115	} = this.props;	×
116
117	const FormComponents = formComponents;	×
118
119	const hasErrors = errors && errors.length;	×
120
121	const inputName = typeof input === 'function' ? input.name : input;	×
122	const inputClass = classNames(	×
123	'form-input',
124	inputClassName,
125	`input-${name}`,
126	`form-component-${inputName \|\| 'default'}`,	×
127	{ 'input-error': hasErrors }
128	);
129	const properties = this.getProperties();	×
130
131	const FormInput = this.props.formInput;	×
132
133	return (	×
134	<div className={classNames(inputClass, {[classes.highlightAnimation]: this.state.highlight})} ref={this.scrollRef}>
135	{instantiateComponent(beforeComponent, properties)}
136	<FormInput {...properties}/>
137	{hasErrors ? <FormComponents.FieldErrors errors={errors} /> : null}	×
138	{this.renderClear()}
139	{showCharsRemaining && (	×
140	<div className={classNames('form-control-limit', { danger: charsRemaining < 10 })}>{charsRemaining}</div>
141	)}
142	{instantiateComponent(afterComponent, properties)}
143	</div>
144	);
145	}
146	}
147
148	(FormComponentInner as any).propTypes = {	1✔
149	inputClassName: PropTypes.string,
150	name: PropTypes.string.isRequired,
151	input: PropTypes.any,
152	beforeComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
153	afterComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
154	clearField: PropTypes.func.isRequired,
155	errors: PropTypes.array.isRequired,
156	help: PropTypes.node,
157	onChange: PropTypes.func.isRequired,
158	showCharsRemaining: PropTypes.bool.isRequired,
159	charsRemaining: PropTypes.number,
160	charsCount: PropTypes.number,
161	charsMax: PropTypes.number,
162	inputComponent: PropTypes.func,
163	classes: PropTypes.any,
164	};
165
166	const FormComponentInnerComponent = registerComponent('FormComponentInner', FormComponentInner, {styles, hocs: [withLocation]});	1✔
167
168	declare global {
169	interface ComponentTypes {
170	FormComponentInner: typeof FormComponentInnerComponent
171	}
172	}

ForumMagnum / ForumMagnum / 9692413442

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous