From 8281897bed86ffcb04c783135ddc84bfe4da9caf Mon Sep 17 00:00:00 2001 From: Santiago <71732018+Zasa-san@users.noreply.github.com> Date: Fri, 17 Jan 2025 13:11:51 -0300 Subject: [PATCH] remove component (#7596) --- app/react/Charts/components/LibraryChart.js | 88 ------ app/react/Charts/components/LibraryCharts.js | 131 --------- .../components/specs/LibraryChart.spec.js | 114 -------- .../components/specs/LibraryCharts.spec.js | 273 ------------------ app/react/Charts/index.js | 14 +- app/react/Markdown/utils.js | 2 - 6 files changed, 1 insertion(+), 621 deletions(-) delete mode 100644 app/react/Charts/components/LibraryChart.js delete mode 100644 app/react/Charts/components/LibraryCharts.js delete mode 100644 app/react/Charts/components/specs/LibraryChart.spec.js delete mode 100644 app/react/Charts/components/specs/LibraryCharts.spec.js diff --git a/app/react/Charts/components/LibraryChart.js b/app/react/Charts/components/LibraryChart.js deleted file mode 100644 index 0e2d840b38..0000000000 --- a/app/react/Charts/components/LibraryChart.js +++ /dev/null @@ -1,88 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import { t } from 'app/I18N'; - -import { Pie, Bar } from 'app/Charts'; - -export class LibraryChartComponent extends Component { - constructor(props) { - super(props); - this.state = { type: 'pie' }; - this.maxPieItems = 14; - this.assignType = this.assignType.bind(this); - this.typeButton = this.typeButton.bind(this); - } - - assignType(type) { - return () => { - this.setState({ type }); - }; - } - - clusterResults(options) { - return options.reduce((_clusteredResults, option, optionIndex) => { - const clusteredResults = _clusteredResults; - if (optionIndex < this.maxPieItems) { - clusteredResults.push(option); - } - - if (optionIndex === this.maxPieItems) { - clusteredResults.push({ label: t('System', 'Other'), results: option.results }); - } - - if (optionIndex > this.maxPieItems) { - clusteredResults[clusteredResults.length - 1].results += option.results; - } - - return clusteredResults; - }, []); - } - - typeButton(type) { - const className = `btn btn-sm ${this.state.type === type ? 'btn-success' : 'btn-default'}`; - return ( - - ); - } - - render() { - if (!this.props.options) { - return null; - } - - const chart = - this.state.type === 'pie' ? ( - - ) : ( - - ); - - return ( -
-
-
- {this.typeButton('pie')} - {this.typeButton('bar')} -
-

{this.props.label}

- {chart} -
-
- ); - } -} - -LibraryChartComponent.defaultProps = { - options: [], - label: null, -}; - -LibraryChartComponent.propTypes = { - options: PropTypes.arrayOf(PropTypes.object), - label: PropTypes.string, -}; - -export default connect()(LibraryChartComponent); diff --git a/app/react/Charts/components/LibraryCharts.js b/app/react/Charts/components/LibraryCharts.js deleted file mode 100644 index aed6b37e57..0000000000 --- a/app/react/Charts/components/LibraryCharts.js +++ /dev/null @@ -1,131 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { t } from 'app/I18N'; - -import { parseWithAggregations } from 'app/Library/helpers/libraryFilters'; - -import { LibraryChart } from 'app/Charts'; -import arrayUtils from '../utils/arrayUtils'; - -function translateOptions(_property) { - const property = _property; - property.options = property.options.map(_option => { - const option = _option; - option.label = t(property.content, option.label, null, false); - return option; - }); - return property; -} - -function sortFields(_field) { - const field = _field; - field.options = arrayUtils.sortValues(field.options); - return field; -} - -export class LibraryCharts extends Component { - itemResults(item) { - const { aggregations } = this; - const buckets = - aggregations.all && aggregations.all.types ? aggregations.all.types.buckets : []; - const found = buckets.find(agg => agg.key === item.id); - - if (found) { - return found.filtered.doc_count; - } - - if (item.items) { - return item.items.reduce((result, _item) => result + this.itemResults(_item), 0); - } - - return 0; - } - - conformDocumentTypesToFields() { - let items = this.props.collection.toJS().filters || []; - - if (!items.length || this.props.storeKey === 'uploads') { - items = this.props.templates.toJS().map(tpl => ({ id: tpl._id, name: tpl.name })); - } - - if (this.props.storeKey === 'uploads') { - items.unshift({ id: 'missing', name: t('System', 'No type') }); - } - - const fields = [ - { - options: items.map(item => ({ - label: t(item.id, item.name), - results: this.itemResults(item), - })), - label: t('System', 'Document and entity types'), - }, - ]; - - return fields; - } - - render() { - let fields = []; - - if (this.props.aggregations) { - this.aggregations = this.props.aggregations.toJS(); - - if (this.props.fields.size) { - fields = parseWithAggregations(this.props.fields.toJS(), this.aggregations) - .filter( - field => - (field.type === 'select' || field.type === 'multiselect') && - field.options && - field.options.length - ) - .map(translateOptions) - .map(sortFields); - } - - fields = fields.length ? fields : this.conformDocumentTypesToFields(); - } - - return ( -
-
-
- {fields.map((field, index) => ( - - ))} -
-
-
- ); - } -} - -LibraryCharts.propTypes = { - aggregations: PropTypes.object, - fields: PropTypes.object, - collection: PropTypes.object, - templates: PropTypes.object, - storeKey: PropTypes.string, - translationContext: PropTypes.string, -}; - -export function mapStateToProps(state, props) { - const documentTypesExist = props.storeKey && state[props.storeKey].filters.get('documentTypes'); - - return { - aggregations: props.storeKey ? state[props.storeKey].aggregations : null, - fields: props.storeKey ? state[props.storeKey].filters.get('properties') : null, - collection: state.settings.collection, - templates: state.templates, - translationContext: documentTypesExist - ? state[props.storeKey].filters.getIn(['documentTypes', 0]) - : null, - }; -} - -export default connect(mapStateToProps)(LibraryCharts); diff --git a/app/react/Charts/components/specs/LibraryChart.spec.js b/app/react/Charts/components/specs/LibraryChart.spec.js deleted file mode 100644 index 4ea84f1a43..0000000000 --- a/app/react/Charts/components/specs/LibraryChart.spec.js +++ /dev/null @@ -1,114 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import { Pie, Bar } from 'app/Charts'; -import { LibraryChartComponent } from '../LibraryChart'; - -describe('LibraryChart', () => { - let component; - let instance; - let props; - - const render = () => { - component = shallow(); - instance = component.instance(); - }; - - describe('render()', () => { - beforeEach(() => { - props = { - options: [], - label: 'chartLabel', - }; - }); - - it('should include label', () => { - render(); - expect(component.find('p').text()).toBe('chartLabel'); - }); - - describe('type toggle buttons', () => { - it('should switch between Pie and Bar', () => { - render(); - const toPieButton = component.find('button').at(0); - const toBarButton = component.find('button').at(1); - - expect(instance.state.type).toBe('pie'); - - toBarButton.simulate('click'); - expect(instance.state.type).toBe('bar'); - - toPieButton.simulate('click'); - expect(instance.state.type).toBe('pie'); - }); - }); - - it('should render a Pie by default', () => { - render(); - expect(component.find(Pie).length).toBe(1); - expect(component.find(Bar).length).toBe(0); - - expect(component.find(Pie).props().data).toEqual(props.options); - }); - - it('should render a Bar if set in type', () => { - render(); - component.setState({ type: 'chart' }); - - expect(component.find(Pie).length).toBe(0); - expect(component.find(Bar).length).toBe(1); - - expect(component.find(Bar).props().data).toEqual(props.options); - expect(component.find(Bar).props().chartLabel).toEqual('chartLabel'); - }); - - describe('result clustering', () => { - beforeEach(() => { - props.options = [ - { label: 'a', results: 1 }, - { label: 'b', results: 1 }, - { label: 'c', results: 3 }, - { label: 'd', results: 1 }, - { label: 'e', results: 1 }, - { label: 'f', results: 7 }, - { label: 'g', results: 1 }, - { label: 'h', results: 1 }, - { label: 'i', results: 1 }, - { label: 'j', results: 1 }, - { label: 'k', results: 1 }, - { label: 'l', results: 1 }, - { label: 'm', results: 1 }, - { label: 'n', results: 1 }, - { label: 'o', results: 1 }, - { label: 'p', results: 1 }, - { label: 'q', results: 1 }, - { label: 'r', results: 2 }, - { label: 's', results: 3 }, - ]; - }); - - it('should cluster the options for the Pie chart', () => { - render(); - - expect(component.find(Pie).props().data).not.toEqual(props.options); - expect(component.find(Pie).props().data[0]).toEqual(props.options[0]); - expect(component.find(Pie).props().data[2]).toEqual(props.options[2]); - expect(component.find(Pie).props().data[5]).toEqual(props.options[5]); - expect(component.find(Pie).props().data[instance.maxPieItems]).toEqual({ - label: 'Other', - results: 8, - }); - }); - - it('should not cluster the options for the Bar chart', () => { - render(); - component.setState({ type: 'chart' }); - - expect(component.find(Bar).props().data).toEqual(props.options); - expect(component.find(Bar).props().data[instance.maxPieItems]).not.toEqual({ - label: 'Other', - results: 8, - }); - }); - }); - }); -}); diff --git a/app/react/Charts/components/specs/LibraryCharts.spec.js b/app/react/Charts/components/specs/LibraryCharts.spec.js deleted file mode 100644 index 6b469b20f4..0000000000 --- a/app/react/Charts/components/specs/LibraryCharts.spec.js +++ /dev/null @@ -1,273 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import { fromJS } from 'immutable'; -import { store } from 'app/store'; -import { t } from 'app/I18N'; - -import { LibraryCharts, mapStateToProps } from '../LibraryCharts'; -import LibraryChart from '../LibraryChart'; - -describe('LibraryCharts', () => { - let component; - let props; - let state; - - const render = () => { - component = shallow(); - }; - - beforeEach(() => { - t.resetCachedTranslation(); - state = { - locale: 'es', - translations: fromJS([ - { - locale: 'es', - contexts: [ - { - id: 'tcontext', - values: { 'Document and entity types': 'Document and entity types translated' }, - }, - { - id: 't2', - values: { t2name: 't2nameTranslated' }, - }, - { - id: 'cid', - values: { n: 'nTranslated' }, - }, - ], - }, - ]), - }; - - spyOn(store, 'getState').and.returnValue(state); - }); - - describe('When no fields found', () => { - beforeEach(() => { - props = { - aggregations: fromJS({ - all: { - types: { - buckets: [ - { key: 't1', label: 't1', filtered: { doc_count: 5 } }, // eslint-disable-line camelcase - { key: 't2', label: 't2', filtered: { doc_count: 1 } }, // eslint-disable-line camelcase - { key: 't3', label: 't3', filtered: { doc_count: 10 } }, // eslint-disable-line camelcase - { key: 'missing', label: 'No value', filtered: { doc_count: 13 } }, // eslint-disable-line camelcase - ], - }, - }, - }), - fields: fromJS([]), - collection: fromJS({ filters: [] }), - templates: fromJS([ - { _id: 't1', name: 't1name' }, - { _id: 't2', name: 't2name' }, - { _id: 't3', name: 't3name' }, - ]), - translationContext: 'tcontext', - }; - }); - - it('should render templates types on LibraryChart', () => { - render(); - expect(component.find(LibraryChart).length).toBe(1); - const LibraryChartElement = component.find(LibraryChart); - - expect(LibraryChartElement.props().label).toBe('Document and entity types translated'); - expect(LibraryChartElement.props().options[0]).toEqual({ label: 't1name', results: 5 }); - expect(LibraryChartElement.props().options[1]).toEqual({ - label: 't2nameTranslated', - results: 1, - }); - expect(LibraryChartElement.props().options[2]).toEqual({ label: 't3name', results: 10 }); - }); - - it('should also include no-type when on uploads', () => { - props.storeKey = 'uploads'; - render(); - expect(component.find(LibraryChart).length).toBe(1); - const LibraryChartElement = component.find(LibraryChart); - - expect(LibraryChartElement.props().options[0]).toEqual({ label: 'No type', results: 13 }); - expect(LibraryChartElement.props().options[1]).toEqual({ label: 't1name', results: 5 }); - expect(LibraryChartElement.props().options[2]).toEqual({ - label: 't2nameTranslated', - results: 1, - }); - expect(LibraryChartElement.props().options[3]).toEqual({ label: 't3name', results: 10 }); - }); - - it('should add the results of sub-items in filters', () => { - props.collection = fromJS({ - filters: [ - { - id: 'g1', - name: 'group1', - items: [ - { id: 't1', filtered: { doc_count: 5 } }, - { id: 't2', filtered: { doc_count: 1 } }, - ], - }, // eslint-disable-line camelcase, max-len - { id: 't3', name: 't3name', filtered: { doc_count: 10 } }, // eslint-disable-line camelcase - ], - }); - render(); - expect(component.find(LibraryChart).length).toBe(1); - const LibraryChartElement = component.find(LibraryChart); - - expect(LibraryChartElement.props().options[0]).toEqual({ label: 'group1', results: 6 }); - expect(LibraryChartElement.props().options[1]).toEqual({ label: 't3name', results: 10 }); - }); - }); - - describe('When no valid fields found', () => { - beforeEach(() => { - props = { - aggregations: fromJS({ - all: { - types: { - buckets: [ - { key: 't1', filtered: { doc_count: 5 } }, // eslint-disable-line camelcase - { key: 't2', filtered: { doc_count: 1 } }, // eslint-disable-line camelcase - { key: 't3', filtered: { doc_count: 10 } }, // eslint-disable-line camelcase - { key: 'missing', filtered: { doc_count: 13 } }, // eslint-disable-line camelcase - ], - }, - }, - }), - fields: fromJS([{ type: 'not-valid' }]), - collection: fromJS({ filters: [] }), - templates: fromJS([ - { _id: 't1', name: 't1name' }, - { _id: 't2', name: 't2name' }, - { _id: 't3', name: 't3name' }, - ]), - translationContext: 'tcontext', - }; - }); - - it('should render templates types on LibraryChart', () => { - render(); - expect(component.find(LibraryChart).length).toBe(1); - const LibraryChartElement = component.find(LibraryChart); - - expect(LibraryChartElement.props().options[0]).toEqual({ label: 't1name', results: 5 }); - expect(LibraryChartElement.props().options[1]).toEqual({ - label: 't2nameTranslated', - results: 1, - }); - expect(LibraryChartElement.props().options[2]).toEqual({ label: 't3name', results: 10 }); - }); - }); - - describe('When fields found', () => { - beforeEach(() => { - props = { - aggregations: fromJS({ - all: { - types: { - buckets: [ - { key: 'f1', label: 'f1', filtered: { doc_count: 5 } }, // eslint-disable-line camelcase - { key: 'f2', label: 'f2', filtered: { doc_count: 1 } }, // eslint-disable-line camelcase - { key: 'f3', label: 'f3', filtered: { doc_count: 10 } }, // eslint-disable-line camelcase - ], - }, - pname: { - buckets: [ - { key: 'o1', label: 'a', filtered: { doc_count: 10 } }, // eslint-disable-line camelcase - { key: 'o2', label: 'z', filtered: { doc_count: 8 } }, // eslint-disable-line camelcase - { key: 'o3', label: 'c', filtered: { doc_count: 8 } }, // eslint-disable-line camelcase - { key: 'o4', label: 'n', filtered: { doc_count: 8 } }, // eslint-disable-line camelcase - { key: 'o5', label: 'a', filtered: { doc_count: 2 } }, // eslint-disable-line camelcase - ], - }, - }, - }), - fields: fromJS([ - { - type: 'select', - content: 'cid', - name: 'pname', - }, - { type: 'not-valid' }, - { - type: 'multiselect', - }, - { type: 'multiselect', options: [] }, - ]), - collection: fromJS({ filters: [] }), - translationContext: 'tcontext', - }; - }); - - it('should render one LibraryChart for each supported field with sorted options', () => { - render(); - expect(component.find(LibraryChart).length).toBe(1); - - const LibraryChartElement1 = component.find(LibraryChart).at(0); - - expect(LibraryChartElement1.props().options[0]).toEqual({ - id: 'o1', - value: 'o1', - label: 'a', - results: 10, - }); - expect(LibraryChartElement1.props().options[1]).toEqual({ - id: 'o3', - value: 'o3', - label: 'c', - results: 8, - }); - expect(LibraryChartElement1.props().options[2]).toEqual({ - id: 'o4', - value: 'o4', - label: 'nTranslated', - results: 8, - }); - expect(LibraryChartElement1.props().options[3]).toEqual({ - id: 'o2', - value: 'o2', - label: 'z', - results: 8, - }); - expect(LibraryChartElement1.props().options[4]).toEqual({ - id: 'o5', - value: 'o5', - label: 'a', - results: 2, - }); - }); - }); - - describe('mapStateToProps', () => { - beforeEach(() => { - state = { - a: { aggregations: 'a', filters: fromJS({ properties: 'a', documentTypes: ['dt1'] }) }, - b: { aggregations: 'b', filters: fromJS({ properties: 'b', documentTypes: ['dt2'] }) }, - settings: { collection: 'collection' }, - templates: 'templates', - }; - }); - - it('should return aggregations, fields and translation context according to store key', () => { - expect(mapStateToProps(state, { storeKey: 'a' }).aggregations).toBe('a'); - expect(mapStateToProps(state, { storeKey: 'b' }).aggregations).toBe('b'); - expect(mapStateToProps(state, {}).aggregations).toBe(null); - - expect(mapStateToProps(state, { storeKey: 'a' }).fields).toBe('a'); - expect(mapStateToProps(state, { storeKey: 'b' }).fields).toBe('b'); - expect(mapStateToProps(state, {}).fields).toBe(null); - - expect(mapStateToProps(state, { storeKey: 'a' }).translationContext).toBe('dt1'); - expect(mapStateToProps(state, { storeKey: 'b' }).translationContext).toBe('dt2'); - expect(mapStateToProps(state, {}).translationContext).toBe(null); - }); - - it('should return collection and templates', () => { - expect(mapStateToProps(state, {}).collection).toBe('collection'); - expect(mapStateToProps(state, {}).templates).toBe('templates'); - }); - }); -}); diff --git a/app/react/Charts/index.js b/app/react/Charts/index.js index 7a67e2dd22..5a3bd3fb37 100644 --- a/app/react/Charts/index.js +++ b/app/react/Charts/index.js @@ -2,8 +2,6 @@ import loadable from '@loadable/component'; import colorScheme from './utils/colorScheme'; import arrayUtils from './utils/arrayUtils'; -import LibraryChart from './components/LibraryChart'; -import LibraryCharts from './components/LibraryCharts'; import ExtendedTooltip from './components/ExtendedTooltip'; const Bar = loadable( @@ -25,14 +23,4 @@ const StackedDualBarChart = loadable( ) ); -export { - Bar, - ColoredBar, - ExtendedTooltip, - LibraryChart, - LibraryCharts, - Pie, - StackedDualBarChart, - colorScheme, - arrayUtils, -}; +export { Bar, ColoredBar, ExtendedTooltip, Pie, StackedDualBarChart, colorScheme, arrayUtils }; diff --git a/app/react/Markdown/utils.js b/app/react/Markdown/utils.js index 8773c39a13..682ae8182f 100644 --- a/app/react/Markdown/utils.js +++ b/app/react/Markdown/utils.js @@ -52,8 +52,6 @@ const customExtendedTags = [ 'bar', 'tooltip', 'stackeddualbarchart', - 'librarychart', - 'librarycharts', 'coloredbar', 'extendedtooltip', ];