Display the settings modal for remote spaces and update the copy for … (#3885)

* Display the settings modal for remote spaces and update the copy for deleting a remote space

* Improve confirmation dialog copy

* Replace baseSpace check with spaceHasSettings

* Use the strings constant for the space word copy

* Use the strings constant for the space word copy in the modal
This commit is contained in:
James Gatz 2021-08-12 23:14:48 +03:00 committed by GitHub
parent 5a50b19595
commit 9b7dbe5011
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 13 deletions

View File

@ -15,7 +15,7 @@ export const isBaseSpace = (space: Space) => space._id === BASE_SPACE_ID;
export const isNotBaseSpace = (space: Space) => !isBaseSpace(space);
export const isLocalSpace = (space: Space): space is LocalSpace => space.remoteId === null;
export const isRemoteSpace = (space: Space): space is RemoteSpace => !isLocalSpace(space);
export const spaceHasSettings = (space: Space) => isLocalSpace(space) && !isBaseSpace(space);
export const spaceHasSettings = (space: Space) => !isBaseSpace(space);
interface CommonSpace {
name: string;

View File

@ -6,7 +6,7 @@ import { bindActionCreators } from 'redux';
import { AUTOBIND_CFG } from '../../../common/constants';
import { strings } from '../../../common/strings';
import * as models from '../../../models/index';
import { isBaseSpace, isRemoteSpace } from '../../../models/space';
import { isRemoteSpace, spaceHasSettings } from '../../../models/space';
import { RootState } from '../../redux/modules';
import * as spaceActions from '../../redux/modules/space';
import { selectActiveSpace } from '../../redux/selectors';
@ -15,6 +15,7 @@ import Modal from '../base/modal';
import ModalBody from '../base/modal-body';
import ModalHeader from '../base/modal-header';
import PromptButton from '../base/prompt-button';
import HelpTooltip from '../help-tooltip';
export type ReduxProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
@ -48,10 +49,12 @@ class SpaceSettingsModal extends PureComponent<Props> {
render() {
const { space } = this.props;
if (isBaseSpace(space) || isRemoteSpace(space)) {
if (!spaceHasSettings(space)) {
return null;
}
const isRemote = isRemoteSpace(space);
return (
<Modal ref={this._handleSetModalRef} freshState>
<ModalHeader key={`header::${space._id}`}>
@ -62,14 +65,24 @@ class SpaceSettingsModal extends PureComponent<Props> {
<div className="form-control form-control--outlined">
<label>
Name
<DebouncedInput
// @ts-expect-error -- TSCONVERSION props are spread into an input element
type="text"
delay={500}
placeholder="My Space"
defaultValue={space.name}
onChange={this._handleRename}
/>
{isRemote && (
<>
<HelpTooltip className="space-left">
To rename a ${strings.remoteSpace.singular.toLowerCase()} ${strings.space.singular.toLowerCase()} please visit <a href="https://app.insomnia.rest/app/teams">the insomnia website.</a>
</HelpTooltip>
<input disabled readOnly defaultValue={space.name} />
</>
)}
{!isRemote && (
<DebouncedInput
// @ts-expect-error -- TSCONVERSION props are spread into an input element
type="text"
delay={500}
placeholder="My Space"
defaultValue={space.name}
onChange={this._handleRename}
/>
)}
</label>
</div>
<h2>Actions</h2>

View File

@ -3,7 +3,7 @@ import { ACTIVITY_HOME } from '../../../common/constants';
import { SegmentEvent } from '../../../common/segment-event';
import { strings } from '../../../common/strings';
import * as models from '../../../models';
import { BASE_SPACE_ID, Space } from '../../../models/space';
import { BASE_SPACE_ID, isRemoteSpace, Space } from '../../../models/space';
import { showAlert, showPrompt } from '../../components/modals';
import { setActiveActivity, setActiveSpace } from './global';
@ -28,9 +28,13 @@ export const createSpace = () => dispatch => {
};
export const removeSpace = (space: Space) => dispatch => {
const message = isRemoteSpace(space)
? `Deleting a ${strings.remoteSpace.singular.toLowerCase()} ${strings.space.singular.toLowerCase()} will delete all local copies and changes of ${strings.document.plural.toLowerCase()} and ${strings.collection.plural.toLowerCase()} within. All changes that are not synced will be lost. The ${strings.remoteSpace.singular.toLowerCase()} ${strings.space.singular.toLowerCase()} will continue to exist remotely. Deleting this ${strings.space.singular.toLowerCase()} locally cannot be undone. Are you sure you want to delete ${space.name}?`
: `Deleting a space will delete all ${strings.document.plural.toLowerCase()} and ${strings.collection.plural.toLowerCase()} within. This cannot be undone. Are you sure you want to delete ${space.name}?`;
showAlert({
title: `Delete ${strings.space.singular}`,
message: `Deleting a space will delete all ${strings.document.plural.toLowerCase()} and ${strings.collection.plural.toLowerCase()} within. This cannot be undone. Are you sure you want to delete ${space.name}?`,
message,
addCancel: true,
okLabel: 'Delete',
onConfirm: async () => {