Skip to content

Commit

Permalink
Merge pull request #4980 from kobotoolbox/task-810-replace-deprecated…
Browse files Browse the repository at this point in the history 
…-buttons

[TASK-810] Replace deprecated buttons with Button component
  • Loading branch information
@magicznyleszek
magicznyleszek committed Jun 25, 2024
2 parents 613615f + 2d3a4b4 commit e96f356
Show file tree
Hide file tree
Showing 76 changed files with 1,474 additions and 2,222 deletions.
4 changes: 0 additions & 4 deletions jsapp/js/account/accountSettings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,6 @@
.account-settings-save:last-child {
margin-right: sizes.$x50;
}

.account-settings-close {
padding: 0 12px;
}
}

.form-modal__item {
Expand Down
12 changes: 7 additions & 5 deletions jsapp/js/account/changePasswordRoute.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type {WithRouterProps} from 'jsapp/js/router/legacy';
import './accountSettings.scss';
import styles from './changePasswordRoute.module.scss';
import UpdatePasswordForm from './security/password/updatePasswordForm.component';
import Button from 'js/components/common/button';

bem.AccountSettings = makeBem(null, 'account-settings');
bem.AccountSettings__left = makeBem(bem.AccountSettings, 'left');
Expand All @@ -33,12 +34,13 @@ const ChangePasswordRoute = class ChangePassword extends React.Component<WithRou
<DocumentTitle title={`${accountName} | KoboToolbox`}>
<bem.AccountSettings>
<bem.AccountSettings__actions>
<button
<Button
type='bare'
color='storm'
size='l'
startIcon='close'
onClick={this.close.bind(this)}
className='account-settings-close mdl-button mdl-button--icon'
>
<i className='k-icon k-icon-close' />
</button>
/>
</bem.AccountSettings__actions>

<bem.AccountSettings__item m='column'>
Expand Down
34 changes: 0 additions & 34 deletions jsapp/js/bemComponents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,6 @@

import bem, {makeBem} from 'js/bem';

// DEPRECATED: please don't use this component. From now on, we will only use
// the `Button` component (from `js/components/common/button`) as it covers
// all possible cases.
bem.Button = makeBem(null, 'mdl-button', 'button');
bem.KoboButton = makeBem(null, 'kobo-button', 'button');
bem.KoboLightButton = makeBem(null, 'kobo-light-button', 'button');
bem.KoboTextButton = makeBem(null, 'kobo-text-button', 'button');
// END DEPRECATED

bem.KoboLightBadge = makeBem(null, 'kobo-light-badge', 'span');

bem.KoboSelect = makeBem(null, 'kobo-select');
bem.KoboSelect__wrapper = makeBem(bem.KoboSelect, 'wrapper');
bem.KoboSelect__label = makeBem(bem.KoboSelect, 'label', 'span');
Expand All @@ -31,13 +20,10 @@ bem.EmptyContent = makeBem(null, 'empty-content', 'section');
bem.EmptyContent__icon = makeBem(bem.EmptyContent, 'icon', 'i');
bem.EmptyContent__title = makeBem(bem.EmptyContent, 'title', 'h1');
bem.EmptyContent__message = makeBem(bem.EmptyContent, 'message', 'p');
bem.EmptyContent__button = makeBem(bem.EmptyContent, 'button', 'button');

bem.ServiceRow = makeBem(null, 'service-row');
bem.ServiceRow__column = makeBem(bem.ServiceRow, 'column');
bem.ServiceRow__actionButton = makeBem(bem.ServiceRow, 'action-button', 'button');
bem.ServiceRow__linkOverlay = makeBem(bem.ServiceRow, 'link-overlay', 'a');
bem.ServiceRowButton = makeBem(null, 'service-row-button', 'button');

bem.FormBuilder = makeBem(null, 'form-builder');
bem.FormBuilder__contents = makeBem(bem.FormBuilder, 'contents');
Expand All @@ -55,8 +41,6 @@ bem.FormBuilderHeader = makeBem(null, 'form-builder-header');
bem.FormBuilderHeader__row = makeBem(bem.FormBuilderHeader, 'row');
bem.FormBuilderHeader__cell = makeBem(bem.FormBuilderHeader, 'cell');
bem.FormBuilderHeader__item = makeBem(bem.FormBuilderHeader, 'item', 'span');
bem.FormBuilderHeader__button = makeBem(bem.FormBuilderHeader, 'button', 'button');
bem.FormBuilderHeader__close = makeBem(bem.FormBuilderHeader, 'close', 'button');

bem.FormMedia = makeBem(null, 'form-media');
bem.FormMedia__title = makeBem(bem.FormMedia, 'title');
Expand Down Expand Up @@ -101,16 +85,6 @@ bem.TableMeta__bulkOptions = makeBem(bem.TableMeta, 'bulk-options');

bem.CollectionsWrapper = makeBem(null, 'collections-wrapper');

bem.CollectionNav = makeBem(null, 'collection-nav');
bem.CollectionNav__search = makeBem(bem.CollectionNav, 'search');
bem.CollectionNav__searchcriteria = makeBem(bem.CollectionNav, 'searchcriteria', 'ul');
bem.CollectionNav__searchcriterion = makeBem(bem.CollectionNav, 'searchcriterion', 'li');
bem.CollectionNav__actions = makeBem(bem.CollectionNav, 'actions');
bem.CollectionNav__button = makeBem(bem.CollectionNav, 'button', 'button');
bem.CollectionNav__link = makeBem(bem.CollectionNav, 'link', 'a');
bem.CollectionNav__searchcancel = makeBem(bem.CollectionNav, 'searchcancel', 'i');
bem.CollectionNav__searchicon = makeBem(bem.CollectionNav, 'searchicon', 'i');

bem.FormView = makeBem(null, 'form-view');
// used in header.es6
bem.FormView__title = makeBem(bem.FormView, 'title');
Expand All @@ -123,17 +97,13 @@ bem.FormView__sidetabs = makeBem(bem.FormView, 'sidetabs');
bem.FormView__label = makeBem(bem.FormView, 'label');
bem.FormView__group = makeBem(bem.FormView, 'group');
bem.FormView__item = makeBem(bem.FormView, 'item');
bem.FormView__iconButton = makeBem(bem.FormView, 'icon-button', 'button');

bem.FormView__row = makeBem(bem.FormView, 'row');
bem.FormView__cell = makeBem(bem.FormView, 'cell');
bem.FormView__cellLabel = makeBem(bem.FormView, 'cell-label');
bem.FormView__column = makeBem(bem.FormView, 'column');

bem.FormView__banner = makeBem(bem.FormView, 'banner');
bem.FormView__link = makeBem(bem.FormView, 'link', 'a');
bem.FormView__secondaryButtons = makeBem(bem.FormView, 'secondaryButtons');
bem.FormView__secondaryButton = makeBem(bem.FormView, 'secondaryButton', 'button');
bem.FormView__reportButtons = makeBem(bem.FormView, 'reportButtons');
bem.FormView__form = makeBem(bem.FormView, 'form', 'form');

Expand All @@ -147,7 +117,6 @@ bem.ReportView__item = makeBem(bem.ReportView, 'item');
bem.ReportView__itemHeading = makeBem(bem.ReportView, 'itemHeading');
bem.ReportView__headingMeta = makeBem(bem.ReportView, 'headingMeta');
bem.ReportView__itemContent = makeBem(bem.ReportView, 'itemContent');
bem.ReportView__headingButton = makeBem(bem.ReportView, 'headingButton', 'button');
bem.ReportView__chart = makeBem(bem.ReportView, 'chart');

bem.GraphSettings = makeBem(null, 'graph-settings');
Expand Down Expand Up @@ -236,7 +205,6 @@ bem.Breadcrumbs__divider = makeBem(bem.Breadcrumbs, 'divider', 'i');
bem.AssetInfoBox = makeBem(null, 'asset-info-box');
bem.AssetInfoBox__column = makeBem(bem.AssetInfoBox, 'column');
bem.AssetInfoBox__cell = makeBem(bem.AssetInfoBox, 'cell');
bem.AssetInfoBox__toggle = makeBem(bem.AssetInfoBox, 'toggle', 'button');

bem.PrintOnly = makeBem(null, 'print-only');

Expand All @@ -245,13 +213,11 @@ bem.ProjectDownloads__advancedView = makeBem(bem.ProjectDownloads, 'advanced-vie
bem.ProjectDownloads__column = makeBem(bem.ProjectDownloads, 'column');
bem.ProjectDownloads__columnRow = makeBem(bem.ProjectDownloads, 'column-row');
bem.ProjectDownloads__title = makeBem(bem.ProjectDownloads, 'title', 'span');
bem.ProjectDownloads__textButton = makeBem(bem.ProjectDownloads, 'text-button', 'button');
bem.ProjectDownloads__selectorRow = makeBem(bem.ProjectDownloads, 'selector-row');
bem.ProjectDownloads__anonymousRow = makeBem(bem.ProjectDownloads, 'anonymous-row');
bem.ProjectDownloads__legacyIframeWrapper = makeBem(bem.ProjectDownloads, 'legacy-iframe-wrapper');
bem.ProjectDownloads__submitRow = makeBem(bem.ProjectDownloads, 'submit-row', 'footer');
bem.ProjectDownloads__exportsSelector = makeBem(bem.ProjectDownloads, 'exports-selector');
bem.ProjectDownloads__deleteSettingsButton = makeBem(bem.ProjectDownloads, 'delete-settings-button', 'button');
bem.ProjectDownloads__exportsCreator = makeBem(bem.ProjectDownloads, 'exports-creator');

bem.BackgroundAudioPlayer = makeBem(null, 'background-audio-player');
Expand Down
8 changes: 0 additions & 8 deletions jsapp/js/components/RESTServices.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,6 @@
}

.rest-services-list__header-right {float: right;}

.rest-services-list__header-back-button {
@extend .mdl-button, .mdl-button--icon;

i {
vertical-align: middle;
}
}
}

// custom styles for RESTServicesForm
Expand Down
72 changes: 42 additions & 30 deletions jsapp/js/components/RESTServices/RESTServiceLogs.es6
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
HOOK_LOG_STATUSES,
MODAL_TYPES
} from '../../constants';
import Button from 'js/components/common/button';

export default class RESTServiceLogs extends React.Component {
constructor(props){
Expand Down Expand Up @@ -203,13 +204,16 @@ export default class RESTServiceLogs extends React.Component {
renderHeader() {
return (
<header className='rest-services-list__header'>
<a
className='rest-services-list__header-back-button'
href={`/#/forms/${this.state.assetUid}/settings/rest`}
>
<i className='k-icon k-icon-angle-left' />
{t('Back to REST Services')}
</a>
<Button
type='frame'
color='storm'
size='m'
onClick={() => {
window.location.assign(`/#/forms/${this.state.assetUid}/settings/rest`);
}}
startIcon='angle-left'
label={t('Back to REST Services')}
/>

<h2 className='rest-services-list__header-label rest-services-list__header-label--big'>
{this.state.hookName}
Expand All @@ -224,12 +228,14 @@ export default class RESTServiceLogs extends React.Component {
}

return (
<bem.ServiceRowButton
m={this.state.isLoadingLogs ? 'loading' : null}
onClick={this.loadMore}
>
{this.state.isLoadingLogs ? t('Loading…') : t('Load more')}
</bem.ServiceRowButton>
<Button
type='frame'
color='blue'
size='l'
isPending={this.state.isLoadingLogs}
onClick={this.loadMore.bind(this)}
label={t('Load more')}
/>
);
}

Expand Down Expand Up @@ -261,13 +267,15 @@ export default class RESTServiceLogs extends React.Component {
<bem.ServiceRow__column m='status'>
{t('Status')}
{ this.hasAnyFailedLogs() &&
<bem.ServiceRow__actionButton
<Button
type='bare'
color='storm'
size='m'
onClick={this.retryAll.bind(this)}
data-tip={t('Retry all submissions')}
disabled={!this.state.isHookActive}
>
<i className='k-icon k-icon-replace'/>
</bem.ServiceRow__actionButton>
tooltip={t('Retry all submissions')}
isDisabled={!this.state.isHookActive}
startIcon='replace'
/>
}
</bem.ServiceRow__column>
<bem.ServiceRow__column m='date'>{t('Date')}</bem.ServiceRow__column>
Expand Down Expand Up @@ -310,22 +318,26 @@ export default class RESTServiceLogs extends React.Component {
{statusLabel}

{log.status === HOOK_LOG_STATUSES.FAILED &&
<bem.ServiceRow__actionButton
disabled={!this.state.isHookActive}
<Button
type='bare'
color='storm'
size='m'
isDisabled={!this.state.isHookActive}
onClick={this.retryLog.bind(this, log)}
data-tip={t('Retry submission')}
>
<i className='k-icon k-icon-replace' />
</bem.ServiceRow__actionButton>
tooltip={t('Retry submission')}
startIcon='replace'
/>
}

{this.hasInfoToDisplay(log) &&
<bem.ServiceRow__actionButton
<Button
type='bare'
color='storm'
size='m'
onClick={this.showLogInfo.bind(this, log)}
data-tip={t('More info')}
>
<i className='k-icon k-icon-information' />
</bem.ServiceRow__actionButton>
tooltip={t('More info')}
startIcon='information'
/>
}
</bem.ServiceRow__column>

Expand Down
55 changes: 30 additions & 25 deletions jsapp/js/components/RESTServices/RESTServicesForm.es6
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import autoBind from 'react-autobind';
import KoboTagsInput from 'js/components/common/koboTagsInput';
import alertify from 'alertifyjs';
import bem from 'js/bem';
import LoadingSpinner from 'js/components/common/loadingSpinner';
import {dataInterface} from '../../dataInterface';
Expand All @@ -14,6 +13,7 @@ import {KEY_CODES} from 'js/constants';
import envStore from 'js/envStore';
import {notify} from 'js/utils';
import pageState from 'js/pageState.store';
import Button from 'js/components/common/button';

const EXPORT_TYPES = {
json: {
Expand Down Expand Up @@ -335,6 +335,8 @@ export default class RESTServicesForm extends React.Component {
</label>

{this.state.customHeaders.map((item, n) => {
// TODO change these inputs into `<TextBox>`es, make sure that that
// weird onChange handling is turned into something less confusing
return (
<bem.FormModal__item m='http-header-row' key={n}>
<input
Expand All @@ -344,8 +346,8 @@ export default class RESTServicesForm extends React.Component {
name='headerName'
value={this.state.customHeaders[n].name}
data-index={n}
onChange={this.handleCustomHeaderChange}
onKeyPress={this.onCustomHeaderInputKeyPress}
onChange={this.handleCustomHeaderChange.bind(this)}
onKeyPress={this.onCustomHeaderInputKeyPress.bind(this)}
/>

<input
Expand All @@ -355,29 +357,31 @@ export default class RESTServicesForm extends React.Component {
name='headerValue'
value={this.state.customHeaders[n].value}
data-index={n}
onChange={this.handleCustomHeaderChange}
onKeyPress={this.onCustomHeaderInputKeyPress}
onChange={this.handleCustomHeaderChange.bind(this)}
onKeyPress={this.onCustomHeaderInputKeyPress.bind(this)}
/>

<bem.Button
m='icon'
<Button
type='bare'
color='red'
size='m'
className='http-header-row-remove'
data-index={n}
onClick={this.removeCustomHeaderRow}
>
<i className='k-icon k-icon-trash'/>
</bem.Button>
startIcon='trash'
onClick={this.removeCustomHeaderRow.bind(this)}
/>
</bem.FormModal__item>
);
})}

<bem.KoboButton
m='small'
onClick={this.addNewCustomHeaderRow}
>
<i className='k-icon k-icon-plus' />
{t('Add header')}
</bem.KoboButton>
<Button
type='full'
color='storm'
size='s'
startIcon='plus'
onClick={this.addNewCustomHeaderRow.bind(this)}
label={t('Add header')}
/>
</bem.FormModal__item>
);
}
Expand Down Expand Up @@ -521,13 +525,14 @@ export default class RESTServicesForm extends React.Component {
</bem.FormModal__item>

<bem.Modal__footer>
<bem.KoboButton
m='blue'
onClick={this.onSubmit}
disabled={this.state.isSubmitPending}
>
{ isEditingExistingHook ? t('Save') : t('Create') }
</bem.KoboButton>
<Button
type='full'
color='blue'
size='l'
onClick={this.onSubmit.bind(this)}
isDisabled={this.state.isSubmitPending}
label={isEditingExistingHook ? t('Save') : t('Create')}
/>
</bem.Modal__footer>
</bem.FormModal__form>
);
Expand Down
Loading

0 comments on commit e96f356

Please sign in to comment.