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

packages/insomnia-app/app/models/space.ts

@@ -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;

packages/insomnia-app/app/ui/components/modals/space-settings-modal.tsx

@@ -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,6 +65,15 @@ class SpaceSettingsModal extends PureComponent<Props> {
           <div className="form-control form-control--outlined">
             <label>
               Name
+              {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"
@@ -70,6 +82,7 @@ class SpaceSettingsModal extends PureComponent<Props> {
                   defaultValue={space.name}
                   onChange={this._handleRename}
                 />
+              )}
             </label>
           </div>
           <h2>Actions</h2>

packages/insomnia-app/app/ui/redux/modules/space.ts

@@ -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 () => {