diff --git a/frontend/app/components/Client/Integrations/BugsnagForm/ProjectListDropdown.js b/frontend/app/components/Client/Integrations/BugsnagForm/ProjectListDropdown.js index c4b7f884b..c30b57953 100644 --- a/frontend/app/components/Client/Integrations/BugsnagForm/ProjectListDropdown.js +++ b/frontend/app/components/Client/Integrations/BugsnagForm/ProjectListDropdown.js @@ -2,7 +2,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { tokenRE } from 'Types/integrations/bugsnagConfig'; import { edit } from 'Duck/integrations/actions'; -import { Dropdown } from 'UI'; +import Select from 'Shared/Select'; import { withRequest } from 'HOCs'; @connect(state => ({ @@ -50,7 +50,7 @@ export default class ProjectListDropdown extends React.PureComponent { this.fetchProjectList(); } } - onChange = (e, target) => { + onChange = (target) => { if (typeof this.props.onChange === 'function') { this.props.onChange({ target }); } @@ -65,11 +65,11 @@ export default class ProjectListDropdown extends React.PureComponent { } = this.props; const options = projects.map(({ name, id }) => ({ text: name, value: id })); return ( - o.value === value) } placeholder={ placeholder } onChange={ this.onChange } loading={ loading } diff --git a/frontend/app/components/Client/Integrations/CloudwatchForm/LogGroupDropdown.js b/frontend/app/components/Client/Integrations/CloudwatchForm/LogGroupDropdown.js index 640aa3de5..d1d306244 100644 --- a/frontend/app/components/Client/Integrations/CloudwatchForm/LogGroupDropdown.js +++ b/frontend/app/components/Client/Integrations/CloudwatchForm/LogGroupDropdown.js @@ -2,7 +2,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { ACCESS_KEY_ID_LENGTH, SECRET_ACCESS_KEY_LENGTH } from 'Types/integrations/cloudwatchConfig'; import { edit } from 'Duck/integrations/actions'; -import { Dropdown } from 'UI'; +import Select from 'Shared/Select'; import { withRequest } from 'HOCs'; @connect(state => ({ @@ -48,7 +48,7 @@ export default class LogGroupDropdown extends React.PureComponent { this.fetchLogGroups(); } } - onChange = (e, target) => { + onChange = (target) => { if (typeof this.props.onChange === 'function') { this.props.onChange({ target }); } @@ -63,11 +63,11 @@ export default class LogGroupDropdown extends React.PureComponent { } = this.props; const options = values.map(g => ({ text: g, value: g })); return ( - o.value === value) } placeholder={ placeholder } onChange={ this.onChange } loading={ loading } diff --git a/frontend/app/components/Client/ManageUsers/ManageUsers.js b/frontend/app/components/Client/ManageUsers/ManageUsers.js index 18e01fc51..010b8cdea 100644 --- a/frontend/app/components/Client/ManageUsers/ManageUsers.js +++ b/frontend/app/components/Client/ManageUsers/ManageUsers.js @@ -4,7 +4,8 @@ import cn from 'classnames'; import withPageTitle from 'HOCs/withPageTitle'; import { Form, IconButton, SlideModal, Input, Button, Loader, - NoContent, Popup, CopyButton, Dropdown } from 'UI'; + NoContent, Popup, CopyButton } from 'UI'; +import Select from 'Shared/Select'; import { init, save, edit, remove as deleteMember, fetchList, generateInviteLink } from 'Duck/member'; import { fetchList as fetchRoles } from 'Duck/roles'; import styles from './manageUsers.module.css'; @@ -39,7 +40,7 @@ class ManageUsers extends React.PureComponent { state = { showModal: false, remaining: this.props.account.limits.teamMember.remaining, invited: false } // writeOption = (e, { name, value }) => this.props.edit({ [ name ]: value }); - onChange = (e, { name, value }) => this.props.edit({ [ name ]: value }); + onChange = ({ name, value }) => this.props.edit({ [ name ]: value.value }); onChangeCheckbox = ({ target: { checked, name } }) => this.props.edit({ [ name ]: checked }); setFocus = () => this.focusElement && this.focusElement.focus(); closeModal = () => this.setState({ showModal: false }); @@ -138,12 +139,12 @@ class ManageUsers extends React.PureComponent { { isEnterprise && ( - r.value === member.roleId) } onChange={ this.onChange } /> diff --git a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx index 0b1c70dca..63c0d5d83 100644 --- a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx +++ b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx @@ -127,7 +127,7 @@ const RoleForm = (props: Props) => { isSearchable name="permissions" options={ permissions } - onChange={ ({ value }: any) => writeOption({ name: 'permissions', value }) } + onChange={ ({ value }: any) => writeOption({ name: 'permissions', value: value.value }) } value={null} /> { role.permissions.size > 0 && ( diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx index 49d2ae39b..d497eb4b7 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx @@ -37,9 +37,14 @@ function CustomMetricTableErrors(props: RouteComponentProps) { }, [errorId]) return ( - + {metric.data.errors && metric.data.errors.map((error: any, index: any) => ( - onErrorClick(error)} /> + onErrorClick(error)} /> ))} {isEdit && ( diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.module.css b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.module.css deleted file mode 100644 index 2088330ba..000000000 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.wrapper { - background-color: $gray-light; - /* border: solid thin $gray-medium; */ - border-radius: 3px; - padding: 20px; -} - -.innerWapper { - border-radius: 3px; - width: 70%; - margin: 0 auto; - background-color: white; - min-height: 220px; -} \ No newline at end of file diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx deleted file mode 100644 index 5275a9147..000000000 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import React, { useEffect, useState, useRef } from 'react'; -import { connect } from 'react-redux'; -import { Loader, NoContent, SegmentSelection } from 'UI'; -import { Styles } from '../../common'; -import Period from 'Types/app/period'; -import stl from './CustomMetricWidgetPreview.module.css'; -import { remove } from 'Duck/customMetrics'; -import DateRange from 'Shared/DateRange'; -import { edit } from 'Duck/customMetrics'; -import CustomMetriLineChart from '../CustomMetriLineChart'; -import CustomMetricPercentage from '../CustomMetricPercentage'; -import CustomMetricTable from '../CustomMetricTable'; -import CustomMetricPieChart from '../CustomMetricPieChart'; - -const customParams = (rangeName: string) => { - const params = { density: 70 } - - // if (rangeName === LAST_24_HOURS) params.density = 70 - // if (rangeName === LAST_30_MINUTES) params.density = 70 - // if (rangeName === YESTERDAY) params.density = 70 - // if (rangeName === LAST_7_DAYS) params.density = 70 - - return params -} - -interface Props { - metric: any; - data?: any; - onClickEdit?: (e) => void; - remove: (id) => void; - edit: (metric) => void; -} -function CustomMetricWidget(props: Props) { - const { metric } = props; - const [loading, setLoading] = useState(false) - const [data, setData] = useState({ chart: [{}] }) - const [period, setPeriod] = useState(Period({ rangeName: metric.rangeName, startDate: metric.startDate, endDate: metric.endDate })); - - const colors = Styles.customMetricColors; - const params = customParams(period.rangeName) - const prevMetricRef = useRef(); - const isTimeSeries = metric.metricType === 'timeseries'; - const isTable = metric.metricType === 'table'; - - useEffect(() => { - // Check for title change - if (prevMetricRef.current && prevMetricRef.current.name !== metric.name) { - prevMetricRef.current = metric; - return - }; - prevMetricRef.current = metric; - setLoading(true); - }, [metric]) - - const onDateChange = (changedDates) => { - setPeriod({ ...changedDates, rangeName: changedDates.rangeValue }) - props.edit({ ...changedDates, rangeName: changedDates.rangeValue }); - } - - const chagneViewType = (e, { name, value }) => { - props.edit({ [ name ]: value }); - } - - return ( -
-
-
Preview
-
- {isTimeSeries && ( - <> - Visualization - - - )} - - {isTable && ( - <> - Visualization - - - )} -
- Time Range - -
-
-
-
- - -
- {metric.name} -
-
- { isTimeSeries && ( - <> - { metric.viewType === 'progress' && ( - - )} - { metric.viewType === 'lineChart' && ( - - )} - - )} - - { isTable && ( - <> - { metric.viewType === 'table' ? ( - - ) : ( - - )} - - )} -
- - -
-
-
- ); -} - -export default connect(null, { remove, edit })(CustomMetricWidget); \ No newline at end of file diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/index.ts deleted file mode 100644 index 9595513c4..000000000 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CustomMetricWidgetPreview'; \ No newline at end of file diff --git a/frontend/app/components/Session_/Issues/IssuesSortDropdown.js b/frontend/app/components/Session_/Issues/IssuesSortDropdown.js deleted file mode 100644 index 16effb366..000000000 --- a/frontend/app/components/Session_/Issues/IssuesSortDropdown.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { Dropdown } from 'semantic-ui-react'; -import { IconButton } from 'UI'; - -const sessionSortOptions = { -// '': 'All', - 'open': 'Open', - 'closed': 'Closed', -}; - -const sortOptions = Object.entries(sessionSortOptions) - .map(([ value, text ]) => ({ value, text })); - -const IssuesSortDropdown = ({ onChange, value }) => { - // sort = (e, { value }) => { - // const [ sort, order ] = value.split('-'); - // const sign = order === 'desc' ? -1 : 1; - // this.props.applyFilter({ order, sort }); - - // this.props.sort(sort, sign) - // setTimeout(() => this.props.sort(sort, sign), 3000); - // } - - return ( - - } - pointing="top right" - options={ sortOptions } - onChange={ onChange } - // defaultValue={ sortOptions[ 0 ].value } - icon={ null } - /> - ); -} - -export default IssuesSortDropdown; diff --git a/frontend/app/components/Session_/Issues/SessionIssuesPanel.js b/frontend/app/components/Session_/Issues/SessionIssuesPanel.js deleted file mode 100644 index 851b443c9..000000000 --- a/frontend/app/components/Session_/Issues/SessionIssuesPanel.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { getRE } from 'App/utils'; -import { Input } from 'UI'; -import IssueListItem from './IssueListItem'; -import IssuesSortDropdown from './IssuesSortDropdown'; - -class SessionIssuesPanel extends React.Component { - state = { search: '', closed: false, issueType: 'open' } - write = ({ target: { value, name } }) => this.setState({ [ name ]: value }); - writeOption = (e, { name, value }) => this.setState({ [ name ]: value }); - - render() { - const { issueTypeIcons, users, activeIssue, issues = [], onIssueClick = () => null } = this.props; - const { search, closed, issueType } = this.state; - - let filteredIssues = issues.filter(({ closed, title }) => getRE(search, 'i').test(title)) - if (!issueType !== '') { - filteredIssues = filteredIssues.filter(({ closed }) => closed === ( this.state.issueType === 'closed')) - } - // .filter(({ closed }) => closed == this.state.closed); - - filteredIssues = filteredIssues.map(issue => { - issue.user = users.filter(user => user.id === issue.assignee).first(); - return issue; - }); - - return ( -
-
- - -
-
- { filteredIssues.map(issue => ( - onIssueClick(issue) } - issue={ issue } - icon={ issueTypeIcons[issue.issueType] } - user={ issue.user } - active={ activeIssue && activeIssue.id === issue.id } - /> - )) - } -
-
- ); - } -} - -export default connect(state => ({ - issues: state.getIn(['assignments', 'list']), - issueTypeIcons: state.getIn(['assignments', 'issueTypeIcons']), - users: state.getIn(['assignments', 'users']), -}))(SessionIssuesPanel); diff --git a/frontend/app/components/Session_/Issues/issuesModal.stories.js b/frontend/app/components/Session_/Issues/issuesModal.stories.js index 6e71a3705..60769df9f 100644 --- a/frontend/app/components/Session_/Issues/issuesModal.stories.js +++ b/frontend/app/components/Session_/Issues/issuesModal.stories.js @@ -5,7 +5,6 @@ import IssueHeader from './IssueHeader'; import IssueComment from './IssueComment'; import IssueCommentForm from './IssueCommentForm'; import IssueDetails from './IssueDetails'; -import SessionIssuesPanel from './SessionIssuesPanel'; import IssueForm from './IssueForm'; import IssueListItem from './IssueListItem'; import IssueDescription from './IssueDescription'; @@ -298,13 +297,4 @@ storiesOf('Issues', module)
)) - .add('SessionIssuesPanel', () => ( -
- -
- )) diff --git a/frontend/app/components/Session_/Issues/sessionIssuesPanel.module.css b/frontend/app/components/Session_/Issues/sessionIssuesPanel.module.css deleted file mode 100644 index d13bcfbbf..000000000 --- a/frontend/app/components/Session_/Issues/sessionIssuesPanel.module.css +++ /dev/null @@ -1,9 +0,0 @@ - - -.searchInput { - padding: 10px 6px !important; - - &:focus { - border-color: $teal !important; - } - } \ No newline at end of file diff --git a/frontend/app/components/Signup/SignupForm/SignupForm.js b/frontend/app/components/Signup/SignupForm/SignupForm.js index 0e017d748..728aea9fc 100644 --- a/frontend/app/components/Signup/SignupForm/SignupForm.js +++ b/frontend/app/components/Signup/SignupForm/SignupForm.js @@ -1,10 +1,11 @@ import React from 'react' -import { Form, Input, Icon, Button, Link, Dropdown, CircularLoader } from 'UI' +import { Form, Input, Icon, Button, Link, CircularLoader } from 'UI' import { login } from 'App/routes' import ReCAPTCHA from 'react-google-recaptcha' import stl from './signup.module.css' import { signup } from 'Duck/user'; import { connect } from 'react-redux' +import Select from 'Shared/Select' const LOGIN_ROUTE = login() const recaptchaRef = React.createRef() @@ -48,7 +49,7 @@ export default class SignupForm extends React.Component { } write = ({ target: { value, name } }) => this.setState({ [ name ]: value }) - writeOption = (e, { name, value }) => this.setState({ [ name ]: value }); + writeOption = ({ name, value }) => this.setState({ [ name ]: value.value }); onSubmit = (e) => { e.preventDefault(); @@ -82,7 +83,7 @@ export default class SignupForm extends React.Component { { tenants.length > 0 && ( - void; - save: (metric) => Promise; - loading: boolean; - addSeries: (series?) => void; - onClose: () => void; - remove: (id) => Promise; - removeSeries: (seriesIndex) => void; -} - -function CustomMetricForm(props: Props) { - const { metric, loading } = props; - // const metricOfOptions = metricOf.filter(i => i.key === metric.metricType); - const timeseriesOptions = metricOf.filter(i => i.type === 'timeseries'); - const tableOptions = metricOf.filter(i => i.type === 'table'); - const isTable = metric.metricType === 'table'; - const isTimeSeries = metric.metricType === 'timeseries'; - const _issueOptions = [{ text: 'All', value: 'all' }].concat(issueOptions); - - - const addSeries = () => { - props.addSeries(); - } - - const removeSeries = (index) => { - props.removeSeries(index); - } - - const write = ({ target: { value, name } }) => props.editMetric({ [ name ]: value }, false); - const writeOption = (e, { value, name }) => { - props.editMetric({ [ name ]: value }, false); - - if (name === 'metricValue') { - props.editMetric({ metricValue: [value] }, false); - } - - if (name === 'metricOf') { - if (value === FilterKey.ISSUE) { - props.editMetric({ metricValue: ['all'] }, false); - } - } - - if (name === 'metricType') { - if (value === 'timeseries') { - props.editMetric({ metricOf: timeseriesOptions[0].value, viewType: 'lineChart' }, false); - } else if (value === 'table') { - props.editMetric({ metricOf: tableOptions[0].value, viewType: 'table' }, false); - } - } - }; - - // const changeConditionTab = (e, { name, value }) => { - // props.editMetric({[ 'viewType' ]: value }); - // }; - - const save = () => { - props.save(metric).then(() => { - toast.success(metric.exists() ? 'Updated succesfully.' : 'Created succesfully.'); - props.onClose() - }); - } - - const deleteHandler = async () => { - if (await confirm({ - header: 'Custom Metric', - confirmButton: 'Delete', - confirmation: `Are you sure you want to delete ${metric.name}` - })) { - props.remove(metric.metricId).then(() => { - toast.success('Deleted succesfully.'); - props.onClose(); - }); - } - } - - return ( -
-
-
- - -
- -
- -
- - - {metric.metricType === 'timeseries' && ( - <> - of - - - )} - - {metric.metricType === 'table' && ( - <> - of - - - )} - - {metric.metricOf === FilterKey.ISSUE && ( - <> - issue type - - - )} - - {metric.metricType === 'table' && ( - <> - showing - - - )} -
-
- -
- - {metric.series && metric.series.size > 0 && metric.series.take(isTable ? 1 : metric.series.size).map((series: any, index: number) => ( -
- removeSeries(index)} - canDelete={metric.series.size > 1} - emptyMessage={isTable ? - 'Filter data using any event or attribute. Use Add Step button below to do so.' : - 'Add user event or filter to define the series by clicking Add Step.' - } - /> -
- ))} -
- - { isTimeSeries && ( -
2})}> - -
- )} - -
- - -
- -
-
- - - -
-
- { metric.exists() && } -
-
- - ); -} - -export default connect(state => ({ - metric: state.getIn(['customMetrics', 'instance']), - loading: state.getIn(['customMetrics', 'saveRequest', 'loading']), -}), { editMetric, save, addSeries, remove, removeSeries })(CustomMetricForm); \ No newline at end of file diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/index.ts b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/index.ts deleted file mode 100644 index e6ffb605b..000000000 --- a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CustomMetricForm'; \ No newline at end of file diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricsModal/CustomMetricsModal.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetricsModal/CustomMetricsModal.tsx deleted file mode 100644 index 9783ceca0..000000000 --- a/frontend/app/components/shared/CustomMetrics/CustomMetricsModal/CustomMetricsModal.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react' -import { IconButton, SlideModal } from 'UI'; -import CustomMetricForm from '../CustomMetricForm'; -import { connect } from 'react-redux' -import { init } from 'Duck/customMetrics'; - -interface Props { - metric: any; - init: (instance?, setDefault?) => void; -} -function CustomMetricsModal(props: Props) { - const { metric } = props; - return ( - <> - - { metric && metric.exists() ? 'Update Custom Metric' : 'Create Custom Metric' } -
- } - isDisplayed={ !!metric } - onClose={ () => props.init(null, true)} - content={ (!!metric) && ( -
- props.init(null, true)} /> -
- )} - /> - - ) -} - - -export default connect(state => ({ - metric: state.getIn(['customMetrics', 'instance']), - alertInstance: state.getIn(['alerts', 'instance']), - showModal: state.getIn(['customMetrics', 'showModal']), - }), { init })(CustomMetricsModal); \ No newline at end of file diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricsModal/index.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetricsModal/index.tsx deleted file mode 100644 index 251375d3b..000000000 --- a/frontend/app/components/shared/CustomMetrics/CustomMetricsModal/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CustomMetricsModal'; \ No newline at end of file diff --git a/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js b/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js deleted file mode 100644 index da1460362..000000000 --- a/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js +++ /dev/null @@ -1,124 +0,0 @@ -import React from 'react'; -import { Dropdown } from 'semantic-ui-react'; -import cn from 'classnames'; -import { - getDateRangeFromValue, - getDateRangeLabel, - dateRangeValues, - getDateRangeFromTs, - CUSTOM_RANGE, - DATE_RANGE_VALUES, -} from 'App/dateRange'; -import { Icon } from 'UI'; -import DateRangePopup from './DateRangePopup'; -import DateOptionLabel from './DateOptionLabel'; -import styles from './dateRangeDropdown.module.css'; - -const getDateRangeOptions = (customRange = getDateRangeFromValue(CUSTOM_RANGE)) => dateRangeValues.map(value => ({ - value, - text: , - content: getDateRangeLabel(value), -})); - -export default class DateRangeDropdown extends React.PureComponent { - state = { - showDateRangePopup: false, - range: null, - value: DATE_RANGE_VALUES.TODAY, - }; - - static getDerivedStateFromProps(props) { - const { rangeValue, startDate, endDate } = props; - if (rangeValue) { - const range = rangeValue === CUSTOM_RANGE - ? getDateRangeFromTs(startDate, endDate) - : getDateRangeFromValue(rangeValue); - return { - value: rangeValue, - range, - }; - } - return null; - } - - onCancelDateRange = () => this.setState({ showDateRangePopup: false }); - - onApplyDateRange = (range, value) => { - this.setState({ - showDateRangePopup: false, - range, - value, - }); - - this.props.onChange({ - startDate: range.start.unix() * 1000, - endDate: range.end.unix() * 1000, - rangeValue: value, - }); - } - - onItemClick = (event, { value }) => { - if (value !== CUSTOM_RANGE) { - const range = getDateRangeFromValue(value); - this.onApplyDateRange(range, value); - } else { - this.setState({ showDateRangePopup: true }); - } - } - - render() { - const { customRangeRight, button = false, className, direction = 'right', customHidden=false, show30Minutes=false } = this.props; - const { showDateRangePopup, value, range } = this.state; - - let options = getDateRangeOptions(range); - - if (customHidden) { - options.pop(); - } - - if (!show30Minutes) { - options.shift() - } - - return ( -
- - { value === CUSTOM_RANGE ? range.start.format('MMM Do YY, hh:mm A') + ' - ' + range.end.format('MMM Do YY, hh:mm A') : getDateRangeLabel(value) } - -
: null - } - // selection={!button} - name="sessionDateRange" - direction={ direction } - className={ button ? "" : "customDropdown" } - // pointing="top left" - placeholder="Select..." - icon={ null } - > - - { options.map((props, i) => - - ) } - - - { - showDateRangePopup && -
- -
- } - - ); - } -} diff --git a/frontend/app/components/shared/DateRangeDropdown/dateRangeDropdown.module.css b/frontend/app/components/shared/DateRangeDropdown/dateRangeDropdown.module.css deleted file mode 100644 index 1cf17bf82..000000000 --- a/frontend/app/components/shared/DateRangeDropdown/dateRangeDropdown.module.css +++ /dev/null @@ -1,69 +0,0 @@ -.button { - padding: 0 4px; - border-radius: 3px; - color: $teal; - cursor: pointer; - display: flex !important; - align-items: center !important; - & span { - white-space: nowrap; - margin-right: 5px; - } -} - -.dropdownTrigger { - padding: 4px; - &:hover { - background-color: $gray-light; - } -} -.dateRangeOptions { - position: relative; - - display: flex !important; - border-radius: 3px; - color: $gray-darkest; - font-weight: 500; - - - & .dateRangePopup { - top: 38px; - bottom: 0; - z-index: 999; - position: absolute; - background-color: white; - border: solid thin $gray-light; - border-radius: 3px; - min-height: fit-content; - min-width: 773px; - box-shadow: 0px 2px 10px 0 $gray-light; - } -} - -.dropdown { - display: flex !important; - padding: 4px 4px; - border-radius: 3px; - color: $gray-darkest; - font-weight: 500; - &:hover { - background-color: $gray-light; - } -} - -.dropdownTrigger { - padding: 4px 4px; - border-radius: 3px; - &:hover { - background-color: $gray-light; - } -} - -.dropdownIcon { - margin-top: 1px; - margin-left: 3px; -} - -.customRangeRight { - right: 0 !important; -} \ No newline at end of file diff --git a/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js index 34e2fe3b1..2e7ed2984 100644 --- a/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js +++ b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js @@ -1,5 +1,4 @@ import React from 'react'; -// import { Input, Label } from 'semantic-ui-react'; import styles from './FilterDuration.module.css'; import { Input } from 'UI' diff --git a/frontend/app/components/ui/Dropdown/Dropdown.js b/frontend/app/components/ui/Dropdown/Dropdown.js deleted file mode 100644 index 91ec07180..000000000 --- a/frontend/app/components/ui/Dropdown/Dropdown.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Dropdown } from 'semantic-ui-react'; - -export default props => ( - -); diff --git a/frontend/app/components/ui/Dropdown/Dropdown.stories.js b/frontend/app/components/ui/Dropdown/Dropdown.stories.js deleted file mode 100644 index 335d9056d..000000000 --- a/frontend/app/components/ui/Dropdown/Dropdown.stories.js +++ /dev/null @@ -1,8 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import Dropdown from '.'; - -storiesOf('Dropdown', module) - .add('Pure', () => ( - - )) - diff --git a/frontend/app/components/ui/Dropdown/index.js b/frontend/app/components/ui/Dropdown/index.js deleted file mode 100644 index 0179bfccc..000000000 --- a/frontend/app/components/ui/Dropdown/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Dropdown'; \ No newline at end of file diff --git a/frontend/app/components/ui/DropdownPlain/DropdownPlain.js b/frontend/app/components/ui/DropdownPlain/DropdownPlain.js deleted file mode 100644 index 4b6cf2fb2..000000000 --- a/frontend/app/components/ui/DropdownPlain/DropdownPlain.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import { Dropdown } from 'semantic-ui-react' -import { Icon } from 'UI'; -import stl from './dropdownPlain.module.css' - -const sessionSortOptions = { - 'latest': 'Newest', - 'editedAt': 'Last Modified' -}; -const sortOptions = Object.entries(sessionSortOptions) - .map(([ value, text ]) => ({ value, text })); - -function DropdownPlain({ name, label, options, onChange, defaultValue, wrapperStyle = {}, disabled = false }) { - return ( -
- { label && {label} } - } - /> -
- ) -} - -export default DropdownPlain diff --git a/frontend/app/components/ui/DropdownPlain/dropdownPlain.module.css b/frontend/app/components/ui/DropdownPlain/dropdownPlain.module.css deleted file mode 100644 index 87e26bc68..000000000 --- a/frontend/app/components/ui/DropdownPlain/dropdownPlain.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.dropdown { - display: flex !important; - padding: 4px 6px; - border-radius: 3px; - color: $gray-darkest; - font-weight: 500; - &:hover { - background-color: $gray-light; - } -} - -.dropdownTrigger { - padding: 4px 8px; - border-radius: 3px; - &:hover { - background-color: $gray-light; - } -} - -.dropdownIcon { - margin-top: 2px; - margin-left: 3px; -} \ No newline at end of file diff --git a/frontend/app/components/ui/DropdownPlain/index.js b/frontend/app/components/ui/DropdownPlain/index.js deleted file mode 100644 index e7c8ecebf..000000000 --- a/frontend/app/components/ui/DropdownPlain/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './DropdownPlain'; diff --git a/frontend/app/components/ui/TextLabel/TextLabel.js b/frontend/app/components/ui/TextLabel/TextLabel.js index 1435439dc..cdadce948 100644 --- a/frontend/app/components/ui/TextLabel/TextLabel.js +++ b/frontend/app/components/ui/TextLabel/TextLabel.js @@ -1,7 +1,6 @@ import React from 'react'; -import { Popup } from 'semantic-ui-react'; import cn from 'classnames'; -import { Icon } from 'UI'; +import { Icon, Popup } from 'UI'; import styles from './textLabel.module.css'; export default function TextLabel({ diff --git a/frontend/app/components/ui/index.js b/frontend/app/components/ui/index.js index 8ac4e8c05..db7ea7d37 100644 --- a/frontend/app/components/ui/index.js +++ b/frontend/app/components/ui/index.js @@ -1,6 +1,6 @@ export { default as Loader } from './Loader'; export { default as Link } from './Link'; -export { default as Dropdown } from './Dropdown'; +// export { default as Dropdown } from './Dropdown'; export { default as Button } from './Button'; export { default as Label } from './Label'; export { default as Popup } from './Popup'; @@ -40,7 +40,6 @@ export { default as ErrorFrame } from './ErrorFrame'; export { default as ErrorDetails } from './ErrorDetails'; export { default as LoadMoreButton } from './LoadMoreButton'; export { default as EscapeButton } from './EscapeButton'; -export { default as DropdownPlain } from './DropdownPlain'; export { default as TextLink } from './TextLink'; export { default as Information } from './Information'; export { default as QuestionMarkHint } from './QuestionMarkHint'; diff --git a/frontend/webpack.config.ts b/frontend/webpack.config.ts index 503960a0c..5e345b261 100644 --- a/frontend/webpack.config.ts +++ b/frontend/webpack.config.ts @@ -5,7 +5,7 @@ import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-serv import CopyWebpackPlugin from 'copy-webpack-plugin'; import HtmlWebpackPlugin from "html-webpack-plugin"; import MiniCssExtractPlugin from 'mini-css-extract-plugin'; -// import CompressionPlugin from "compression-webpack-plugin"; +import CompressionPlugin from "compression-webpack-plugin"; const dotenv = require('dotenv').config({ path: __dirname + '/.env' }) const isDevelopment = process.env.NODE_ENV !== 'production' const stylesHandler = MiniCssExtractPlugin.loader; @@ -61,19 +61,19 @@ const config: Configuration = { mode: "local", auto: true, localIdentName: "[name]__[local]--[hash:base64:5]", - }, - url: { - filter: (url: string) => { - // Semantic-UI-CSS has an extra semi colon in one of the URL due to which CSS loader along - // with webpack 5 fails to generate a build. - // Below if condition is a hack. After Semantic-UI-CSS fixes this, one can replace use clause with just - // use: ['style-loader', 'css-loader'] - if (url.includes('charset=utf-8;;')) { - return false; - } - return true; - }, - } + } + // url: { + // filter: (url: string) => { + // // Semantic-UI-CSS has an extra semi colon in one of the URL due to which CSS loader along + // // with webpack 5 fails to generate a build. + // // Below if condition is a hack. After Semantic-UI-CSS fixes this, one can replace use clause with just + // // use: ['style-loader', 'css-loader'] + // if (url.includes('charset=utf-8;;')) { + // return false; + // } + // return true; + // }, + // } }, }, 'postcss-loader' @@ -106,6 +106,7 @@ const config: Configuration = { }, }, plugins: [ + new CompressionPlugin(), new webpack.DefinePlugin({ // 'process.env': ENV_VARIABLES, 'window.env': ENV_VARIABLES,