From ed189e4c6d7f0f9b3487a5e57b7474573d72a579 Mon Sep 17 00:00:00 2001 From: dzonidoo Date: Thu, 21 Dec 2023 18:30:03 +0100 Subject: [PATCH 01/12] create Button compnent and change usages of old button --- .../components/AgendaCoverageRequest.tsx | 15 ++-- .../components/AgendaListGroupHeader.tsx | 11 +-- assets/cards/components/EditCard.tsx | 17 ++--- .../components/CompanyPermissions.tsx | 7 +- assets/companies/components/EditCompany.tsx | 14 ++-- .../components/EditCompanyDetails.tsx | 21 +++--- .../components/CompanyDetailsProductRow.tsx | 11 +-- .../components/CompanyReportsApp.tsx | 30 ++++---- .../components/ContentActivity.tsx | 11 +-- assets/components/Buttons.tsx | 58 ++++++++++++++++ assets/components/CardEditor.tsx | 26 +++---- assets/components/EditPanel.tsx | 14 ++-- assets/components/ListBar.tsx | 10 +-- assets/components/Modal.tsx | 68 +++---------------- .../components/GeneralSettingsApp.tsx | 8 ++- assets/home/components/HomeApp.tsx | 13 ++-- .../components/EditMonitoringProfile.tsx | 21 +++--- .../components/MonitoringSchedule.tsx | 6 +- .../navigations/components/EditNavigation.tsx | 18 ++--- .../oauth_clients/components/EditClient.tsx | 21 +++--- assets/products/components/EditProduct.tsx | 17 ++--- .../search/components/AdvancedSearchPanel.tsx | 19 +++--- assets/search/components/MonitoringEditor.tsx | 34 +++++----- assets/search/components/SearchBar.tsx | 10 +-- .../SearchResultsAdvancedSearchRow.tsx | 11 +-- .../SearchResultsFiltersRow.tsx | 11 +-- .../SearchResultsTopicRow.tsx | 27 ++++---- .../components/SearchResultsBar/index.tsx | 10 +-- assets/search/components/TopicEditor.tsx | 18 +++-- assets/search/components/TopicForm.tsx | 12 ++-- .../components/EditSectionFilter.tsx | 18 ++--- assets/styles/custom-modal.scss | 2 +- assets/ui/components/Collapse.tsx | 9 ++- .../components/profile/UserProfile.tsx | 28 ++++---- assets/users/components/EditUser.tsx | 66 +++++++++--------- assets/wire/components/FollowStory.tsx | 13 ++-- assets/wire/components/SelectedItemsBar.tsx | 20 ++++-- assets/wire/components/filters/FiltersTab.tsx | 25 ++++--- 38 files changed, 399 insertions(+), 351 deletions(-) create mode 100644 assets/components/Buttons.tsx diff --git a/assets/agenda/components/AgendaCoverageRequest.tsx b/assets/agenda/components/AgendaCoverageRequest.tsx index dc94452a4..79f87f128 100644 --- a/assets/agenda/components/AgendaCoverageRequest.tsx +++ b/assets/agenda/components/AgendaCoverageRequest.tsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import {gettext} from 'utils'; +import {Button} from '../../components/Buttons'; class AgendaCoverageRequest extends React.Component { @@ -51,19 +52,17 @@ class AgendaCoverageRequest extends React.Component {
- - +
); diff --git a/assets/agenda/components/AgendaListGroupHeader.tsx b/assets/agenda/components/AgendaListGroupHeader.tsx index 2ce320660..c0dc41b4a 100644 --- a/assets/agenda/components/AgendaListGroupHeader.tsx +++ b/assets/agenda/components/AgendaListGroupHeader.tsx @@ -6,6 +6,7 @@ import {formatDate, gettext} from 'utils'; import {getCoverageIcon} from '../utils'; import {Skeleton} from 'primereact/skeleton'; +import {Button} from '../../components/Buttons'; interface IProps { group: string; @@ -85,14 +86,14 @@ export function AgendaListGroupHeader({group, itemIds, itemsById, itemsShown, to )}
- + />
); diff --git a/assets/cards/components/EditCard.tsx b/assets/cards/components/EditCard.tsx index 589a430fe..4789fec7e 100644 --- a/assets/cards/components/EditCard.tsx +++ b/assets/cards/components/EditCard.tsx @@ -11,6 +11,7 @@ import { CARD_TYPES, getCardEditComponent, } from 'components/cards/utils'; +import {Button} from 'components/Buttons'; class EditCard extends React.Component { @@ -84,16 +85,16 @@ class EditCard extends React.Component {
- - +
diff --git a/assets/companies/components/CompanyPermissions.tsx b/assets/companies/components/CompanyPermissions.tsx index db902a702..83b7da304 100644 --- a/assets/companies/components/CompanyPermissions.tsx +++ b/assets/companies/components/CompanyPermissions.tsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import {gettext} from 'utils'; import CheckboxInput from 'components/CheckboxInput'; +import {Button} from 'components/Buttons'; function CompanyPermissions({ company, @@ -160,11 +161,11 @@ function CompanyPermissions({
-
diff --git a/assets/companies/components/EditCompany.tsx b/assets/companies/components/EditCompany.tsx index 637f49f00..d7f566fc8 100644 --- a/assets/companies/components/EditCompany.tsx +++ b/assets/companies/components/EditCompany.tsx @@ -24,6 +24,7 @@ import CompanyPermissions from './CompanyPermissions'; import EditCompanyAPI from './EditCompanyAPI'; import AuditInformation from 'components/AuditInformation'; import {EditCompanyDetails} from './EditCompanyDetails'; +import {Button} from 'components/Buttons'; interface IStateProps { company: ICompany; @@ -187,14 +188,13 @@ class EditCompany extends React.Component {
- + />
)} diff --git a/assets/companies/components/EditCompanyDetails.tsx b/assets/companies/components/EditCompanyDetails.tsx index 39be98ed6..3626c3c10 100644 --- a/assets/companies/components/EditCompanyDetails.tsx +++ b/assets/companies/components/EditCompanyDetails.tsx @@ -8,6 +8,7 @@ import TextInput from 'components/TextInput'; import SelectInput from 'components/SelectInput'; import DateInput from 'components/DateInput'; import CheckboxInput from 'components/CheckboxInput'; +import {Button} from 'components/Buttons'; interface IProps { company: ICompany; @@ -183,17 +184,17 @@ export function EditCompanyDetails({
- {company._id && } - + )} +
diff --git a/assets/company-admin/components/CompanyDetailsProductRow.tsx b/assets/company-admin/components/CompanyDetailsProductRow.tsx index 94882aa37..d25214a0b 100644 --- a/assets/company-admin/components/CompanyDetailsProductRow.tsx +++ b/assets/company-admin/components/CompanyDetailsProductRow.tsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import {gettext, getConfig} from 'utils'; import classNames from 'classnames'; +import {Button} from 'components/Buttons'; export function CompanyDetailsProductRow({product, onNameClicked, showSeatRequestModal}: any) { const unlimited = product.max_seats == null || product.max_seats < 1; @@ -28,12 +29,12 @@ export function CompanyDetailsProductRow({product, onNameClicked, showSeatReques {product.description} {getConfig('allow_companies_to_manage_products') && !unlimited && ( - + /> )} diff --git a/assets/company-reports/components/CompanyReportsApp.tsx b/assets/company-reports/components/CompanyReportsApp.tsx index 467643b43..4e78fff92 100644 --- a/assets/company-reports/components/CompanyReportsApp.tsx +++ b/assets/company-reports/components/CompanyReportsApp.tsx @@ -10,6 +10,7 @@ import { } from '../actions'; import {gettext} from 'utils'; import {panels} from '../utils'; +import {Button} from 'components/Buttons'; const options = [ {value: '', text: ''}, @@ -60,18 +61,21 @@ class CompanyReportsApp extends React.Component {
- {this.props.activeReport && } - {this.props.activeReport && } + {this.props.activeReport && ( +
, @@ -113,4 +117,4 @@ const mapDispatchToProps: any = { const component: React.ComponentType = connect(mapStateToProps, mapDispatchToProps)(CompanyReportsApp); -export default component; \ No newline at end of file +export default component; diff --git a/assets/company-reports/components/ContentActivity.tsx b/assets/company-reports/components/ContentActivity.tsx index cf8fd9128..1f2cef99a 100644 --- a/assets/company-reports/components/ContentActivity.tsx +++ b/assets/company-reports/components/ContentActivity.tsx @@ -10,6 +10,7 @@ import {fetchReport, REPORTS, runReport, toggleFilter, fetchAggregations} from ' import CalendarButton from '../../components/CalendarButton'; import MultiSelectDropdown from '../../components/MultiSelectDropdown'; import ReportsTable from './ReportsTable'; +import {Button} from 'components/Buttons'; class ContentActivity extends React.Component { static propTypes: any; @@ -282,12 +283,12 @@ class ContentActivity extends React.Component { ); })} - + /> ): void; +} + +interface IPropsSubmit extends IPropsButtonBase { + type?: 'submit', + onClick?(event: React.MouseEvent): void; +} + +interface IPropsReset extends IPropsButtonBase { + type?: 'reset', + onClick?(event: React.MouseEvent): void; +} + +type IProps = IPropsButton | IPropsSubmit | IPropsReset; + +export class Button extends React.PureComponent { + render() { + const classes = classNames('nh-button', { + 'nh-button--primary': !this.props.variant, + [`nh-button--${this.props.size}`]: this.props.size, + [`nh-button--${this.props.variant}`]: this.props.variant, + 'nh-button--disabled': this.props.disabled, + }, this.props.className); + + return ( + + ); + } +} diff --git a/assets/components/CardEditor.tsx b/assets/components/CardEditor.tsx index b1d0c0367..e0a57d42f 100644 --- a/assets/components/CardEditor.tsx +++ b/assets/components/CardEditor.tsx @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {gettext} from 'utils'; +import {Button} from 'components/Buttons'; export default class CardEditor extends React.Component { static propTypes: any; @@ -58,22 +59,21 @@ export default class CardEditor extends React.Component {
{editorTitle || label}
{editorCardBody}
- + onClick={this.onSave} + /> + {!hideCancel && ( - + /> )}
diff --git a/assets/components/EditPanel.tsx b/assets/components/EditPanel.tsx index 7da41513f..f440b777c 100644 --- a/assets/components/EditPanel.tsx +++ b/assets/components/EditPanel.tsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import {gettext} from '../utils'; import {isEmpty, get, pickBy, isEqual, every} from 'lodash'; import CheckboxInput from 'components/CheckboxInput'; +import {Button} from 'components/Buttons'; class EditPanel extends React.Component { static propTypes: any; @@ -127,18 +128,17 @@ class EditPanel extends React.Component {
{this.props.onCancel && ( - )} -
diff --git a/assets/components/ListBar.tsx b/assets/components/ListBar.tsx index 93913c020..d715888c0 100644 --- a/assets/components/ListBar.tsx +++ b/assets/components/ListBar.tsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import SearchBar from 'search/components/SearchBar'; +import {Button} from 'components/Buttons'; class ListBar extends React.Component { static propTypes: any; @@ -27,14 +28,13 @@ class ListBar extends React.Component { )}
{this.props.onNewItem && ( - + /> )}
diff --git a/assets/components/Modal.tsx b/assets/components/Modal.tsx index 7d68f74ed..e3efa3bf7 100644 --- a/assets/components/Modal.tsx +++ b/assets/components/Modal.tsx @@ -2,58 +2,11 @@ import React from 'react'; import {get} from 'lodash'; import {connect} from 'react-redux'; import {Modal as BSModal} from 'bootstrap'; - import {gettext} from 'utils'; import {closeModal} from 'actions'; - import CloseButton from './CloseButton'; import classNames from 'classnames'; - -interface IButtonProps { - label: string; - type?: React.ButtonHTMLAttributes['type']; - onClick?(event: React.MouseEvent): void; -} - -/** - * Primary modal button for actions like save/send/etc - */ -function ModalPrimaryButton({label, type, onClick, disabled}: IButtonProps & {disabled?: boolean}): React.ReactElement { - assertButtonHandler(label, type, onClick); - return ( - - ); -} - -/** - * Secondary modal button for actions like cancel/reset - */ -export function ModalSecondaryButton({label, type, onClick}: IButtonProps): React.ReactElement { - assertButtonHandler(label, type, onClick); - return ( - - ); -} - -/** - * Test if button makes any sense - * - * either type or onClick handler must be specified - */ -function assertButtonHandler(label: IButtonProps['label'], type: IButtonProps['type'], onClick: IButtonProps['onClick']) { - if (!type && !onClick) { - console.warn('You should use either type or onClick handler for button', label); - } -} +import {Button} from 'components/Buttons'; interface IProps { title: string; @@ -138,18 +91,19 @@ class Modal extends React.Component { {this.props.children}
- - {' '} - + onClick={this.onSubmit} + />
diff --git a/assets/general-settings/components/GeneralSettingsApp.tsx b/assets/general-settings/components/GeneralSettingsApp.tsx index 84be80f06..8c28e7767 100644 --- a/assets/general-settings/components/GeneralSettingsApp.tsx +++ b/assets/general-settings/components/GeneralSettingsApp.tsx @@ -9,6 +9,7 @@ import {save} from '../actions'; import TextInput from 'components/TextInput'; import CheckboxInput from 'components/CheckboxInput'; import AuditInformation from 'components/AuditInformation'; +import {Button} from 'components/Buttons'; function isInput(field: any) { return ['text', 'number', 'boolean'].includes(field.type); @@ -108,8 +109,11 @@ class GeneralSettingsApp extends React.Component {
{fields} - - +
+ /> ) : (
diff --git a/assets/monitoring/components/EditMonitoringProfile.tsx b/assets/monitoring/components/EditMonitoringProfile.tsx index 2c01ec85e..9a3367522 100644 --- a/assets/monitoring/components/EditMonitoringProfile.tsx +++ b/assets/monitoring/components/EditMonitoringProfile.tsx @@ -13,6 +13,7 @@ import AuditInformation from 'components/AuditInformation'; import MonitoringSchedule from './MonitoringSchedule'; import {gettext} from 'utils'; +import {Button} from 'components/Buttons'; const getCompanyOptions = (companies: any) => companies.map((company: any) => ({value: company._id, text: company.name})); @@ -201,16 +202,18 @@ class EditMonitoringProfile extends React.Component {
- {item._id && } - + )} +
diff --git a/assets/monitoring/components/MonitoringSchedule.tsx b/assets/monitoring/components/MonitoringSchedule.tsx index 8fad29120..5f3b9f2f6 100644 --- a/assets/monitoring/components/MonitoringSchedule.tsx +++ b/assets/monitoring/components/MonitoringSchedule.tsx @@ -7,6 +7,7 @@ import {gettext} from 'utils'; import DatePicker from 'react-datepicker'; import SelectInput from 'components/SelectInput'; +import {Button} from 'components/Buttons'; class MonitoringSchedule extends React.Component { static propTypes: any; @@ -193,10 +194,9 @@ class MonitoringSchedule extends React.Component { {ui}
-
diff --git a/assets/navigations/components/EditNavigation.tsx b/assets/navigations/components/EditNavigation.tsx index 86609c062..d0eaa4325 100644 --- a/assets/navigations/components/EditNavigation.tsx +++ b/assets/navigations/components/EditNavigation.tsx @@ -10,6 +10,7 @@ import {gettext} from 'utils'; import {sectionsPropType} from 'features/sections/types'; import {MAX_TILE_IMAGES} from '../actions'; import AuditInformation from 'components/AuditInformation'; +import {Button} from 'components/Buttons'; class EditNavigation extends React.Component { @@ -115,16 +116,17 @@ class EditNavigation extends React.Component { )}
- - + +
diff --git a/assets/oauth_clients/components/EditClient.tsx b/assets/oauth_clients/components/EditClient.tsx index f78b8289e..26b3e3cab 100644 --- a/assets/oauth_clients/components/EditClient.tsx +++ b/assets/oauth_clients/components/EditClient.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import TextInput from 'components/TextInput'; import {gettext} from 'utils'; +import {Button} from 'components/Buttons'; class EditClient extends React.Component { static propTypes: any; @@ -58,16 +59,18 @@ class EditClient extends React.Component { }
- {this.props.client._id && } - + )} +
diff --git a/assets/products/components/EditProduct.tsx b/assets/products/components/EditProduct.tsx index 3b1065a9d..27f4550b9 100644 --- a/assets/products/components/EditProduct.tsx +++ b/assets/products/components/EditProduct.tsx @@ -9,6 +9,7 @@ import {gettext, getProductQuery} from 'utils'; import EditPanel from '../../components/EditPanel'; import AuditInformation from 'components/AuditInformation'; import {sectionsPropType} from '../../features/sections/types'; +import {Button} from 'components/Buttons'; const getProductCompanies = (product: any, companies: any) => ({ companies: companies.filter((company: any) => { @@ -181,16 +182,16 @@ class EditProduct extends React.Component {
{this.getPoductTestButton(this.props.product)} - - +
diff --git a/assets/search/components/AdvancedSearchPanel.tsx b/assets/search/components/AdvancedSearchPanel.tsx index f910ac1ec..f6b33c2c8 100644 --- a/assets/search/components/AdvancedSearchPanel.tsx +++ b/assets/search/components/AdvancedSearchPanel.tsx @@ -9,6 +9,7 @@ import {toggleAdvancedSearchField, setAdvancedSearchKeywords, clearAdvancedSearc import CheckboxInput from 'components/CheckboxInput'; import InputWrapper from 'components/InputWrapper'; +import {Button} from 'components/Buttons'; function AdvancedSearchPanelComponent({ params, @@ -157,25 +158,25 @@ function AdvancedSearchPanelComponent({
- - + />
); diff --git a/assets/search/components/MonitoringEditor.tsx b/assets/search/components/MonitoringEditor.tsx index 6d681883b..a2694848e 100644 --- a/assets/search/components/MonitoringEditor.tsx +++ b/assets/search/components/MonitoringEditor.tsx @@ -11,6 +11,7 @@ import MonitoringSchedule from '../../monitoring/components/MonitoringSchedule'; import {fetchCompanyUsers} from 'companies/actions'; import {postMonitoringProfile} from 'monitoring/actions'; +import {Button} from 'components/Buttons'; class MonitoringEditor extends React.Component { static propTypes: any; @@ -199,22 +200,23 @@ class MonitoringEditor extends React.Component { value={profile.is_enabled} {...propsToFields} /> - {isAdmin && (
- - -
)} + {isAdmin && ( +
+
+ )} } {this.state.activeTab === 'users' && diff --git a/assets/search/components/SearchBar.tsx b/assets/search/components/SearchBar.tsx index c8d60ba3c..94adac46b 100644 --- a/assets/search/components/SearchBar.tsx +++ b/assets/search/components/SearchBar.tsx @@ -6,6 +6,7 @@ import {connect} from 'react-redux'; import {gettext} from 'utils'; import {searchQuerySelector} from 'search/selectors'; +import {Button} from 'components/Buttons'; class SearchBar extends React.Component { static propTypes: any; @@ -86,13 +87,12 @@ class SearchBar extends React.Component {
{this.props.toggleAdvancedSearchPanel == null ? null : ( - + /> )} {this.props.toggleSearchTipsPanel == null ? null : ( + /> ); } diff --git a/assets/search/components/SearchResultsBar/SearchResultsFiltersRow.tsx b/assets/search/components/SearchResultsBar/SearchResultsFiltersRow.tsx index 9e91f1c8c..d5b7d8a87 100644 --- a/assets/search/components/SearchResultsBar/SearchResultsFiltersRow.tsx +++ b/assets/search/components/SearchResultsBar/SearchResultsFiltersRow.tsx @@ -9,6 +9,7 @@ import {setItemTypeFilter} from 'agenda/actions'; import {searchFilterSelector} from 'search/selectors'; import {connect} from 'react-redux'; import {agendaCoverageStatusFilter, getActiveFilterLabel} from 'agenda/components/AgendaCoverageExistsFilter'; +import {Button} from 'components/Buttons'; const IS_AGENDA = location.pathname.includes('/agenda'); @@ -207,17 +208,17 @@ function SearchResultsFiltersRow({ /> ); tags.push( - + /> ); } diff --git a/assets/search/components/SearchResultsBar/SearchResultsTopicRow.tsx b/assets/search/components/SearchResultsBar/SearchResultsTopicRow.tsx index 2534b3c1a..e433e262a 100644 --- a/assets/search/components/SearchResultsBar/SearchResultsTopicRow.tsx +++ b/assets/search/components/SearchResultsBar/SearchResultsTopicRow.tsx @@ -8,6 +8,7 @@ import {canUserUpdateTopic} from 'users/utils'; import {SearchResultTagList} from './SearchResultTagList'; import {Tag} from 'components/Tag'; import {IProps as IParentProps} from './SearchResultTagsList'; +import {Button} from 'components/Buttons'; type IProps = Pick {!hasActiveTopic || !canUserUpdateTopic(user, activeTopic) ? null : ( - + /> )} - + />
)} diff --git a/assets/search/components/SearchResultsBar/index.tsx b/assets/search/components/SearchResultsBar/index.tsx index 84155a1e3..c7dccf26f 100644 --- a/assets/search/components/SearchResultsBar/index.tsx +++ b/assets/search/components/SearchResultsBar/index.tsx @@ -22,6 +22,7 @@ import { import {Dropdown} from './../../../components/Dropdown'; import {SearchResultTagsList} from './SearchResultTagsList'; +import {Button} from 'components/Buttons'; class SearchResultsBarComponent extends React.Component { @@ -168,16 +169,15 @@ class SearchResultsBarComponent extends React.Component { )) } : null} - + /> + /> ) } diff --git a/assets/section-filters/components/EditSectionFilter.tsx b/assets/section-filters/components/EditSectionFilter.tsx index 802a911cc..21c9d67b4 100644 --- a/assets/section-filters/components/EditSectionFilter.tsx +++ b/assets/section-filters/components/EditSectionFilter.tsx @@ -7,6 +7,7 @@ import CheckboxInput from 'components/CheckboxInput'; import AuditInformation from 'components/AuditInformation'; import {gettext} from 'utils'; import {sectionsPropType} from '../../features/sections/types'; +import {Button} from 'components/Buttons'; class EditSectionFilter extends React.Component { static propTypes: any; @@ -82,16 +83,17 @@ class EditSectionFilter extends React.Component {
- - + +
diff --git a/assets/styles/custom-modal.scss b/assets/styles/custom-modal.scss index 2a62e0186..af81908e4 100644 --- a/assets/styles/custom-modal.scss +++ b/assets/styles/custom-modal.scss @@ -66,7 +66,7 @@ // Footer (for actions) .modal-footer { - gap: var(--space--1); + gap: var(--space--1-5); @include phone { padding: 0.5rem 1rem; } diff --git a/assets/ui/components/Collapse.tsx b/assets/ui/components/Collapse.tsx index a1c009f84..591583c99 100644 --- a/assets/ui/components/Collapse.tsx +++ b/assets/ui/components/Collapse.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import {gettext} from 'utils'; +import {Button} from 'components/Buttons'; export class CollapseBoxWithButton extends React.Component { static propTypes: any; @@ -37,11 +38,13 @@ export class CollapseBoxWithButton extends React.Component {
{this.props.edit && ( - + /> )}
diff --git a/assets/user-profile/components/profile/UserProfile.tsx b/assets/user-profile/components/profile/UserProfile.tsx index 0bbe0dfa8..75e017984 100644 --- a/assets/user-profile/components/profile/UserProfile.tsx +++ b/assets/user-profile/components/profile/UserProfile.tsx @@ -18,6 +18,7 @@ import { } from '../../actions'; import {IUserProfileState} from 'user-profile/reducers'; import {IUserProfileUpdates} from 'interfaces/user'; +import {Button} from 'components/Buttons'; interface IProps { user: IUser; @@ -171,13 +172,12 @@ class UserProfile extends React.PureComponent { {getSubscriptionTimesString(user)} - + />
@@ -200,17 +200,17 @@ class UserProfile extends React.PureComponent {
- + variant='secondary' + onClick={onCancel} + /> - + variant='primary' + onClick={this.save} + />
); diff --git a/assets/users/components/EditUser.tsx b/assets/users/components/EditUser.tsx index 2fb8f8115..27a2a1095 100644 --- a/assets/users/components/EditUser.tsx +++ b/assets/users/components/EditUser.tsx @@ -32,6 +32,7 @@ import {getUserStateLabelDetails} from 'company-admin/components/CompanyUserList import {companyProductSeatsSelector, companySectionListSelector, sectionListSelector} from 'company-admin/selectors'; import {IUser} from 'interfaces/user'; import ActionButton from 'components/ActionButton'; +import {Button} from 'components/Buttons'; const getCompanyOptions = (companies: Array) => companies.map((company) => ({value: company._id, text: company.name})); @@ -172,28 +173,26 @@ const EditUserComponent: React.ComponentType = (props: IProps) => { {(currentUserIsAdmin && user._id != null && user._id !== currentUser._id) && (
{original.is_approved === false ? ( - + /> ) : (
- + value={gettext('Impersonate User')} + type="submit" + variant='tertiary' + size='small' + />
)}
@@ -356,10 +355,11 @@ const EditUserComponent: React.ComponentType = (props: IProps) => { <> {isCompanyAdmin && (
- + />
)} @@ -462,24 +460,26 @@ const EditUserComponent: React.ComponentType = (props: IProps) => {
{!user.is_validated || isCompanyAdmin ? null : ( - + onClick={onResetPassword} + /> + )} + {user._id && (currentUserIsAdmin || isCompanyAdmin) && user._id !== currentUser._id && ( +
diff --git a/assets/wire/components/FollowStory.tsx b/assets/wire/components/FollowStory.tsx index b33a7ade5..bbb2f2626 100644 --- a/assets/wire/components/FollowStory.tsx +++ b/assets/wire/components/FollowStory.tsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import {get} from 'lodash'; import {gettext} from 'utils'; import types from 'wire/types'; +import {Button} from 'components/Buttons'; const isFollowing = (item: any, topics: any) => item && item.slugline && topics && topics.find( @@ -15,12 +16,12 @@ export default function FollowStory({item, user, topics, followStory}: any) { if (canFollowStory) { return ( - + onClick={() => followStory(item)} + /> ); } @@ -32,4 +33,4 @@ FollowStory.propTypes = { user: types.user.isRequired, topics: types.topics.isRequired, followStory: PropTypes.func.isRequired, -}; \ No newline at end of file +}; diff --git a/assets/wire/components/SelectedItemsBar.tsx b/assets/wire/components/SelectedItemsBar.tsx index 93ad5d522..a51d0687d 100644 --- a/assets/wire/components/SelectedItemsBar.tsx +++ b/assets/wire/components/SelectedItemsBar.tsx @@ -6,6 +6,7 @@ import {isEmpty} from 'lodash'; import {gettext} from 'utils'; import {selectAll, selectNone} from 'wire/actions'; +import {Button} from 'components/Buttons'; class SelectedItemsBar extends React.PureComponent { static propTypes: any; @@ -40,13 +41,18 @@ class SelectedItemsBar extends React.PureComponent { return (
- - - +
{!isResetActive && !this.props.resultsFiltered ? null : ([
- - - + value={gettext('Search')} + variant='primary' + onClick={this.search} + />
])} From 8aa7ba54c2dff735b926b077a2bb03634f239caa Mon Sep 17 00:00:00 2001 From: dzonidoo Date: Thu, 21 Dec 2023 18:52:05 +0100 Subject: [PATCH 02/12] create IconButton component adn change usages of old button with icon --- assets/agenda/components/AgendaListItem.tsx | 6 +- .../agenda/components/CoverageItemStatus.tsx | 5 +- assets/am-news/components/AmNewsListItem.tsx | 3 +- assets/cards/components/EditCard.tsx | 11 +-- assets/companies/components/EditCompany.tsx | 10 +-- assets/components/ActionButton.tsx | 82 ++++++------------- assets/components/ActionList.tsx | 56 ++++++++----- assets/components/ActionMenu.tsx | 8 +- assets/components/CardEditor.tsx | 20 +++-- assets/components/CloseButton.tsx | 33 ++++---- assets/components/CloseModalButton.tsx | 21 +++++ assets/components/Icon.tsx | 25 ++++++ assets/components/IconButton.tsx | 81 ++++++++++++++++++ assets/components/Modal.tsx | 4 +- assets/components/NotificationListItem.tsx | 4 +- assets/components/PersonalizeHomeModal.tsx | 14 ++-- assets/components/PreviewActionButtons.tsx | 4 +- assets/components/SortItems.tsx | 15 ++-- assets/components/TextInput.tsx | 12 +-- .../cards/edit/ConfigNavigation.tsx | 2 +- assets/home/components/HomeApp.tsx | 17 ++-- assets/interfaces/common.ts | 2 +- .../components/EditMonitoringProfile.tsx | 11 +-- .../navigations/components/EditNavigation.tsx | 12 +-- .../oauth_clients/components/EditClient.tsx | 11 +-- assets/products/components/EditProduct.tsx | 11 +-- .../search/components/AdvancedSearchPanel.tsx | 22 +++-- assets/search/components/MonitoringEditor.tsx | 12 +-- assets/search/components/SearchBar.tsx | 13 +-- assets/search/components/Topic.tsx | 3 +- assets/search/components/TopicEditor.tsx | 12 +-- assets/search/components/TopicFolder.tsx | 41 ++++++---- .../components/EditSectionFilter.tsx | 11 +-- assets/ui/components/Preview.tsx | 11 ++- .../EditNotificationScheduleModal.tsx | 26 +++--- .../components/UserProfileApp.tsx | 9 +- assets/users/components/EditUser.tsx | 38 ++++----- assets/wire/components/SelectedItemsBar.tsx | 13 +-- assets/wire/components/WireListItem.tsx | 9 +- 39 files changed, 374 insertions(+), 326 deletions(-) create mode 100644 assets/components/CloseModalButton.tsx create mode 100644 assets/components/Icon.tsx create mode 100644 assets/components/IconButton.tsx diff --git a/assets/agenda/components/AgendaListItem.tsx b/assets/agenda/components/AgendaListItem.tsx index d1514e1cb..432961a5d 100644 --- a/assets/agenda/components/AgendaListItem.tsx +++ b/assets/agenda/components/AgendaListItem.tsx @@ -291,9 +291,8 @@ class AgendaListItem extends React.Component { {!this.props.showShortcutActionIcons ? null : this.props.actions.map((action) => action.shortcut && ( ))} @@ -321,9 +320,8 @@ class AgendaListItem extends React.Component { {!this.props.showShortcutActionIcons ? null : this.props.actions.map((action) => action.shortcut && ( ))} diff --git a/assets/agenda/components/CoverageItemStatus.tsx b/assets/agenda/components/CoverageItemStatus.tsx index 1269a51d7..137a798ad 100644 --- a/assets/agenda/components/CoverageItemStatus.tsx +++ b/assets/agenda/components/CoverageItemStatus.tsx @@ -82,10 +82,11 @@ export default class CoverageItemStatus extends React.Component { ); diff --git a/assets/am-news/components/AmNewsListItem.tsx b/assets/am-news/components/AmNewsListItem.tsx index 52faf3b26..1def9b483 100644 --- a/assets/am-news/components/AmNewsListItem.tsx +++ b/assets/am-news/components/AmNewsListItem.tsx @@ -147,9 +147,8 @@ class AmNewsListItem extends React.Component { action.shortcut && )} diff --git a/assets/cards/components/EditCard.tsx b/assets/cards/components/EditCard.tsx index 4789fec7e..62391c0cb 100644 --- a/assets/cards/components/EditCard.tsx +++ b/assets/cards/components/EditCard.tsx @@ -12,6 +12,7 @@ import { getCardEditComponent, } from 'components/cards/utils'; import {Button} from 'components/Buttons'; +import CloseButton from 'components/CloseButton'; class EditCard extends React.Component { @@ -46,15 +47,7 @@ class EditCard extends React.Component {

{this.props.card.label}

- +
diff --git a/assets/companies/components/EditCompany.tsx b/assets/companies/components/EditCompany.tsx index d7f566fc8..6a988b8eb 100644 --- a/assets/companies/components/EditCompany.tsx +++ b/assets/companies/components/EditCompany.tsx @@ -25,6 +25,7 @@ import EditCompanyAPI from './EditCompanyAPI'; import AuditInformation from 'components/AuditInformation'; import {EditCompanyDetails} from './EditCompanyDetails'; import {Button} from 'components/Buttons'; +import CloseButton from 'components/CloseButton'; interface IStateProps { company: ICompany; @@ -170,14 +171,7 @@ class EditCompany extends React.Component { >

{this.props.company.name}

-