Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions web/client/components/TOC/TOCItemsSettings.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ const TOCItemSettings = (props) => {
<NavItemT
key={'ms-tab-settings-' + tab.id}
tooltip={<Message msgId={tab.tooltipId}/> }
data-ms-id={`edit-style-btn-${tab.glyph}`}
eventKey={tab.id}
onClick={() => {
onSetTab(tab.id);
Expand Down
5 changes: 3 additions & 2 deletions web/client/components/catalog/Catalog.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ class Catalog extends React.Component {
this.search({ services: this.props.services, selectedService: this.props.selectedService, searchText: this.props.searchText });
}
}}
className={this.props.buttonClassName} key="catalog_search_button" disabled={this.props.loading || !this.isValidServiceSelected()}>
className={this.props.buttonClassName} key="catalog_search_button" data-ms-id="catalog-search-button" disabled={this.props.loading || !this.isValidServiceSelected()}>
<Message msgId="catalog.search" />
</Button>);
}
Expand All @@ -321,6 +321,7 @@ class Catalog extends React.Component {
const textSearch = (<FormControl
ref="searchText"
type="text"
data-ms-id="catalog-search"
style={{
textOverflow: "ellipsis"
}}
Expand Down Expand Up @@ -356,7 +357,7 @@ class Catalog extends React.Component {
onClick={() => this.props.onChangeCatalogMode("edit", false)}>
<Glyphicon glyph="pencil" />
</InputGroup.Addon>) : null}
{this.props.canEdit && <InputGroup.Addon className="btn" onClick={() => this.props.onChangeCatalogMode("edit", true)}>
{this.props.canEdit && <InputGroup.Addon className="btn" data-ms-id="catalog-add-service" onClick={() => this.props.onChangeCatalogMode("edit", true)}>
<Glyphicon glyph="plus" />
</InputGroup.Addon>}
</InputGroup>
Expand Down
6 changes: 3 additions & 3 deletions web/client/components/catalog/CatalogServiceEditor.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,17 +110,17 @@ const CatalogServiceEditor = ({
/>
<FormGroup controlId="buttons" key="buttons">
<Col xs={12}>
<Button style={buttonStyle} disabled={saving || !valid} onClick={onSaveService} key="catalog_add_service_button">
<Button style={buttonStyle} disabled={saving || !valid} onClick={onSaveService} key="catalog_add_service_button" data-ms-id="catalog-save">
{saving ? <Loader size={12} style={{display: 'inline-block'}} /> : null}
<Message msgId="save" />
</Button>
{service && !service.isNew
? <Button style={buttonStyle} disabled={saving} onClick={() => onDeleteService(service, services)} key="catalog_delete_service_button">
? <Button style={buttonStyle} disabled={saving} onClick={() => onDeleteService(service, services)} key="catalog_delete_service_button" data-ms-id="catalog-delete">
<Message msgId="catalog.delete" />
</Button>
: null
}
<Button style={buttonStyle} disabled={disabled} onClick={onCancel} key="catalog_back_view_button">
<Button style={buttonStyle} disabled={disabled} onClick={onCancel} key="catalog_back_view_button" data-ms-id="catalog-cancel">
<Message msgId="cancel" />
</Button>
</Col>
Expand Down
1 change: 1 addition & 0 deletions web/client/components/catalog/RecordItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ class RecordItem extends React.Component {
disabled: this.state.loading,
loading: this.state.loading,
glyph: 'plus',
'data-ms-id': 'catalog-add-first-result',
onClick: () => this.onAddToMap(record)
}]),
...(links.length > 0
Expand Down
3 changes: 3 additions & 0 deletions web/client/components/catalog/editor/MainForm.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const DefaultURLEditor = ({

const UrlForm = (<FormControl
type="text"
data-ms-id="catalog-service-url"
style={{
textOverflow: "ellipsis"
}}
Expand Down Expand Up @@ -203,6 +204,7 @@ export default ({
<FormControl
onChange={(e) => onChangeType(e.target.value)}
value={service && service.type}
data-ms-id="catalog-service-type"
componentClass="select">
{serviceTypes.map((type) => <option value={type.name} key={type.name}>{type.label}</option>)}
</FormControl>
Expand All @@ -211,6 +213,7 @@ export default ({
<ControlLabel><Message msgId="catalog.serviceTitle" /></ControlLabel>
<FormControl
type="text"
data-ms-id="catalog-service-title"
style={{
textOverflow: "ellipsis"
}}
Expand Down
8 changes: 5 additions & 3 deletions web/client/components/cookie/Cookie.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ class Cookie extends React.Component {
renderAcceptButton = () => {
return (
<Button
data-ms-id="cookie-accept-button"
className="cookie-button"
id="accept-cookie"
bsStyle="primary"
Expand All @@ -63,10 +64,11 @@ class Cookie extends React.Component {
renderMoreDetails = () => {
return this.props.externalCookieUrl ?
(
<a style={{cursor: "pointer"}}
<a data-ms-id="cookie-privacy-link" style={{cursor: "pointer"}}
id="accept-cookie"
href={this.props.externalCookieUrl}>
<Button
data-ms-id="cookie-privacy-text"
className="cookie-button"
id="decline-cookie"
bsStyle="primary" >
Expand Down Expand Up @@ -95,14 +97,14 @@ class Cookie extends React.Component {
}
render() {
return this.props.show ? (
<div className={this.props.seeMore ? "mapstore-cookie-panel see-more" : "mapstore-cookie-panel not-see-more"}>
<div data-ms-id="cookie-overlay" className={this.props.seeMore ? "mapstore-cookie-panel see-more" : "mapstore-cookie-panel not-see-more"}>
<div role="header" className="cookie-header" style={{height: this.props.seeMore ? "44px" : "0px"}}>
{this.props.seeMore ? <Glyphicon className="cookie-close-btn" glyph="1-close" onClick={() => this.props.onMoreDetails(false)}/> : null }
</div>
<div role="body" className="cookie-body-container">
{!this.props.externalCookieUrl && this.props.seeMore ? (
<MoreDetails html={this.props.html}/>
) : (<div className="cookie-message">
) : (<div data-ms-id="cookie-banner-maintext" className="cookie-message">
<Message msgId="cookie.info"/>
</div>) }
<br/>
Expand Down
20 changes: 19 additions & 1 deletion web/client/components/data/download/DownloadDialog.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,17 @@ const DownloadDialog = ({
}
}, [enabled, selectedLayer, defaultSelectedService]); // equivalent componentDidUpdate

useEffect(() => {
if (!enabled) {
return;
}
const dialogRoot = document.querySelector('#mapstore-export');
dialogRoot?.setAttribute('data-ms-id', 'dataset-export-box');

const formatInput = document.querySelector('#mapstore-export .mapstore-downloadoptions:not(.downloadMode) .Select-input input');
formatInput?.setAttribute('data-ms-id', 'dataset-export-select-format');
}, [enabled, downloadOptions, service, showLoader]);

Comment on lines +127 to +137

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should avoid DOM manipulation to apply an attribute to a react component, in this commit allyoucanmap@7586026 you can find the fix to avoid usage of useEffect

const renderIcon = () => {
return loading ? <div style={{"float": "left"}}><Spinner spinnerName="circle" noFadeIn/></div> : <Glyphicon glyph="download" />;
};
Expand Down Expand Up @@ -153,7 +164,13 @@ const DownloadDialog = ({
<Dialog id="mapstore-export" draggable={false} modal>
<span role="header">
<span className="modal-title about-panel-title"><Message msgId="layerdownload.title" /></span>
<button onClick={onClose} className="settings-panel-close close">{closeGlyph ? <Glyphicon glyph={closeGlyph}/> : <span>×</span>}</button>
<button
onClick={onClose}
className="settings-panel-close close"
{...{ 'data-ms-id': 'dataset-export-box-close' }}
>
{closeGlyph ? <Glyphicon glyph={closeGlyph}/> : <span>×</span>}
</button>
</span>
<div role="body">
{showLoader
Expand Down Expand Up @@ -190,6 +207,7 @@ const DownloadDialog = ({
<Button
bsStyle="primary"
className="download-button"
{...{ 'data-ms-id': 'dataset-export-box-export' }}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On multiple instances there is the usage of spread operator {...{ 'data-ms-id': '<id>' }}, it would be better us use directly the prop data-ms-id="<id>", see allyoucanmap@67f22dc

disabled={formatsLoading || formats.length === 0}
onClick={handleExport}>
{renderIcon()} <Message msgId="layerdownload.export" />
Expand Down
18 changes: 10 additions & 8 deletions web/client/components/data/download/DownloadOptions.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -137,14 +137,16 @@ class DownloadOptions extends React.Component {

<div className="mapstore-downloadoptions">
<label><Message msgId="layerdownload.format" /></label>
<Select
clearable={false}
isLoading={this.props.formatsLoading}
onOpen={() => this.props.formatOptionsFetch(this.props.layer)}
value={this.props.downloadOptions?.selectedFormat}
noResultsText={<Message msgId="layerdownload.format" />}
onChange={(sel) => this.props.onChange("selectedFormat", sel.value)}
options={this.props.formats.map(f => ({value: f.name, label: f.label || f.name}))} />
<div {...{ 'data-ms-id': 'dataset-export-select-format' }}>
<Select
clearable={false}
isLoading={this.props.formatsLoading}
onOpen={() => this.props.formatOptionsFetch(this.props.layer)}
value={this.props.downloadOptions?.selectedFormat}
noResultsText={<Message msgId="layerdownload.format" />}
onChange={(sel) => this.props.onChange("selectedFormat", sel.value)}
options={this.props.formats.map(f => ({value: f.name, label: f.label || f.name}))} />
</div>
</div>

<DownloadWPSOptions
Expand Down
16 changes: 14 additions & 2 deletions web/client/components/data/download/DownloadWPSOptions.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,22 @@ const DownloadWPSOptions = ({
onChange('compression', selectedCompression || head(compressionOptions));
}, []);

useEffect(() => {
if (!advancedOptionsOpened) {
return;
}
const srsInput = document.querySelector('.mapstore-downloadwpsoptions-advanced .mapstore-downloadwpsoptions-advanced-menuitem .Select-input input');
srsInput?.setAttribute('data-ms-id', 'dataset-export-select-reference-system');
}, [advancedOptionsOpened, selectedSrs, srsList]);
Comment on lines +45 to +51

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as previous comment, avoid useEffect to manipulate DOM, see allyoucanmap@7586026


return (
<>
{advancedOptionsVisible && <div className="mapstore-downloadwpsoptions-advanced-options">
<Button className="no-border" onClick={() => openAdvancedOptions(!advancedOptionsOpened)}>
<Button
className="no-border"
{...{ 'data-ms-id': 'dataset-export-toggle-advanced' }}
onClick={() => openAdvancedOptions(!advancedOptionsOpened)}
>
<Glyphicon glyph={`chevron-${advancedOptionsOpened ? 'down' : 'right'}`}/>
&nbsp;&nbsp;&nbsp;
<Message msgId="layerdownload.advancedOptions"/>
Expand All @@ -56,7 +68,7 @@ const DownloadWPSOptions = ({

{/* select SRS must be always visibile */}
<div className="mapstore-downloadwpsoptions-advanced-menuitem">
<div className="mapstore-downloadwpsoptions-advanced-menuitem-control">
<div className="mapstore-downloadwpsoptions-advanced-menuitem-control" {...{ 'data-ms-id': 'dataset-export-select-reference-system' }}>
<label><Message msgId="layerdownload.srs" /></label>
<Select
clearable={false}
Expand Down
138 changes: 70 additions & 68 deletions web/client/components/mapviews/settings/CompactRichTextEditor.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,78 +48,80 @@ function CompactRichTextEditor({
}) {

return (
<Editor
{...props}
editorStyle={{ minHeight: 200 }}
wrapperClassName={wrapperClassName}
toolbar={{
options: toolbarOptions || ['fontFamily', 'blockType', 'inline', 'textAlign', 'list', 'link', 'colorPicker', 'remove', 'image', 'embedded'],
image: {
urlEnabled: true,
// upload controlled via props, disabled by default
uploadEnabled: props.uploadEnabled || false,
alignmentEnabled: false,
uploadCallback: (file) => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener('load', () => {
resizeBase64Image(reader.result, {
size: 500,
type: 'image/jpeg',
quality: 0.8
}).then((linkBase64) => {
resolve({ data: { link: linkBase64 } });
<div data-ms-id="add-widget-text-description">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CompactRichTextEditor is a generic component and we should avoid to add an id specific for one of the usage, it would be better to add the id to the caller instead see allyoucanmap@9f8470d

<Editor
{...props}
editorStyle={{ minHeight: 200 }}
wrapperClassName={wrapperClassName}
toolbar={{
options: toolbarOptions || ['fontFamily', 'blockType', 'inline', 'textAlign', 'list', 'link', 'colorPicker', 'remove', 'image', 'embedded'],
image: {
urlEnabled: true,
// upload controlled via props, disabled by default
uploadEnabled: props.uploadEnabled || false,
alignmentEnabled: false,
uploadCallback: (file) => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener('load', () => {
resizeBase64Image(reader.result, {
size: 500,
type: 'image/jpeg',
quality: 0.8
}).then((linkBase64) => {
resolve({ data: { link: linkBase64 } });
});
});
});
if (file) {
reader.readAsDataURL(file);
} else {
reject();
if (file) {
reader.readAsDataURL(file);
} else {
reject();
}
}),
previewImage: true,
inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
alt: props.alt || { present: false, mandatory: false },
defaultSize: {
height: 'auto',
width: '100%'
}
}),
previewImage: true,
inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
alt: props.alt || { present: false, mandatory: false },
defaultSize: {
height: 'auto',
width: '100%'
}
},
fontFamily: {
// Setup fonts via props or use default from GeoStories
options: props.fonts || DEFAULT_FONT_FAMILIES
},
link: {
inDropdown: false,
showOpenOptionOnHover: true,
defaultTargetOption: '_self',
options: ['link', 'unlink']
},
blockType: {
inDropdown: true,
options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote', 'Code']
},
inline: {
inDropdown: true,
options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace']
},
textAlign: {
inDropdown: true
},
list: {
inDropdown: true
},
embedded: {
embedCallback: link => {
const detectedSrc = /<iframe.*? src="(.*?)"/.exec(embed(link));
return (detectedSrc && detectedSrc[1]) || link;
},
defaultSize: {
height: 'auto',
width: '100%'
fontFamily: {
// Setup fonts via props or use default from GeoStories
options: props.fonts || DEFAULT_FONT_FAMILIES
},
link: {
inDropdown: false,
showOpenOptionOnHover: true,
defaultTargetOption: '_self',
options: ['link', 'unlink']
},
blockType: {
inDropdown: true,
options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote', 'Code']
},
inline: {
inDropdown: true,
options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace']
},
textAlign: {
inDropdown: true
},
list: {
inDropdown: true
},
embedded: {
embedCallback: link => {
const detectedSrc = /<iframe.*? src="(.*?)"/.exec(embed(link));
return (detectedSrc && detectedSrc[1]) || link;
},
defaultSize: {
height: 'auto',
width: '100%'
}
}
}
}}
/>
}}
/>
</div>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ function TextOptions({ data = {}, onChange = () => {} }) {
style={{ marginBottom: 10 }}
placeholder="widgets.builder.wizard.titlePlaceholder"
value={data.title}
data-ms-id="add-widget-text-title"
type="text"
onChange={(e) =>
onChange("title", e.target.value)
Expand Down
1 change: 1 addition & 0 deletions web/client/plugins/DrawerMenu.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ const DrawerButton = connect(state => ({
}) =>
<Button
id={id}
data-ms-id="drawer-menu-button"
style={menuButtonStyle}
bsStyle={buttonStyle}
key="menu-button"
Expand Down
Loading