mirror/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia.git synced 2026-04-21 14:47:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Swap out switch for new activity toggle component (#2335)

Browse Source 
* Swap out switch for new activity toggle component

* Extra check

* Remove some more theme stuff

* Some PR feedback
This commit is contained in:
Gregory Schier
2020-06-30 16:54:56 -07:00
committed by GitHub
parent 984d6051ab
commit 48348e04c1
20 changed files with 153 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
packages/insomnia-app/.storybook/preview-head.html
View File

@@ -306,33 +306,6 @@
--hl-xl-rgb: 130, 130, 130, 0.8;
}
[theme='studio-light'] .theme--activity-bar,
[subtheme='studio-light'] .theme--activity-bar--sub {
/* Background */
--color-bg: rgb(0, 48, 82);
--color-bg-rgb: 0, 48, 82;
/* Foreground */
--color-font: rgb(255, 255, 255);
--color-font-rgb: 255, 255, 255;
/* Highlight */
--hl: rgb(23, 130, 207);
--hl-rgb: 23, 130, 207;
--hl-xxs: rgba(23, 130, 207, 0.05);
--hl-xxs-rgb: 23, 130, 207, 0.05;
--hl-xs: rgba(23, 130, 207, 0.1);
--hl-xs-rgb: 23, 130, 207, 0.1;
--hl-sm: rgba(23, 130, 207, 0.2);
--hl-sm-rgb: 23, 130, 207, 0.2;
--hl-md: rgba(23, 130, 207, 0.3);
--hl-md-rgb: 23, 130, 207, 0.3;
--hl-lg: rgba(23, 130, 207, 0.5);
--hl-lg-rgb: 23, 130, 207, 0.5;
--hl-xl: rgba(23, 130, 207, 0.8);
--hl-xl-rgb: 23, 130, 207, 0.8;
}
[theme='studio-light'] .theme--dropdown__menu,
[subtheme='studio-light'] .theme--dropdown__menu--sub {
/* Background */
@@ -413,33 +386,6 @@
--color-info-rgb: 0, 91, 158;
}
[theme='studio-light'] .theme--activity-bar,
[subtheme='studio-light'] .theme--activity-bar--sub {
/* Background */
--color-bg: rgb(0, 48, 82);
--color-bg-rgb: 0, 48, 82;
/* Foreground */
--color-font: rgb(255, 255, 255);
--color-font-rgb: 255, 255, 255;
/* Highlight */
--hl: rgb(23, 130, 207);
--hl-rgb: 23, 130, 207;
--hl-xxs: rgba(23, 130, 207, 0.05);
--hl-xxs-rgb: 23, 130, 207, 0.05;
--hl-xs: rgba(23, 130, 207, 0.1);
--hl-xs-rgb: 23, 130, 207, 0.1;
--hl-sm: rgba(23, 130, 207, 0.2);
--hl-sm-rgb: 23, 130, 207, 0.2;
--hl-md: rgba(23, 130, 207, 0.3);
--hl-md-rgb: 23, 130, 207, 0.3;
--hl-lg: rgba(23, 130, 207, 0.5);
--hl-lg-rgb: 23, 130, 207, 0.5;
--hl-xl: rgba(23, 130, 207, 0.8);
--hl-xl-rgb: 23, 130, 207, 0.8;
}
[theme='studio-light'] .theme--dropdown__menu,
[subtheme='studio-light'] .theme--dropdown__menu--sub {
/* Background */
@@ -571,33 +517,6 @@
--hl-xl-rgb: 133, 157, 176, 0.8;
}
[theme='studio-colorful'] .theme--activity-bar,
[subtheme='studio-colorful'] .theme--activity-bar--sub {
/* Background */
--color-bg: rgb(0, 69, 114);
--color-bg-rgb: 0, 69, 114;
/* Foreground */
--color-font: rgb(255, 255, 255);
--color-font-rgb: 255, 255, 255;
/* Highlight */
--hl: rgb(23, 130, 207);
--hl-rgb: 23, 130, 207;
--hl-xxs: rgba(23, 130, 207, 0.05);
--hl-xxs-rgb: 23, 130, 207, 0.05;
--hl-xs: rgba(23, 130, 207, 0.1);
--hl-xs-rgb: 23, 130, 207, 0.1;
--hl-sm: rgba(23, 130, 207, 0.2);
--hl-sm-rgb: 23, 130, 207, 0.2;
--hl-md: rgba(23, 130, 207, 0.3);
--hl-md-rgb: 23, 130, 207, 0.3;
--hl-lg: rgba(23, 130, 207, 0.5);
--hl-lg-rgb: 23, 130, 207, 0.5;
--hl-xl: rgba(23, 130, 207, 0.8);
--hl-xl-rgb: 23, 130, 207, 0.8;
}
[theme='studio-colorful'] .theme--dropdown__menu,
[subtheme='studio-colorful'] .theme--dropdown__menu--sub {
/* Background */

10
packages/insomnia-app/app/common/constants.js
View File

@@ -4,8 +4,6 @@ import * as electron from 'electron';
import path from 'path';
import mkdirp from 'mkdirp';
import { getDataDirectory } from './misc';
import type { GlobalActivity } from '../ui/components/activity-bar/activity-bar';
import { ACTIVITY_INSOMNIA } from '../ui/components/activity-bar/activity-bar';
// App Stuff
@@ -153,6 +151,14 @@ export const DEFAULT_PANE_WIDTH = 0.5;
export const DEFAULT_PANE_HEIGHT = 0.5;
export const DEFAULT_SIDEBAR_WIDTH = 19;
// Activities
export type GlobalActivity = 'spec' | 'debug' | 'monitor' | 'home';
export const ACTIVITY_SPEC: GlobalActivity = 'spec';
export const ACTIVITY_DEBUG: GlobalActivity = 'debug';
export const ACTIVITY_UNIT_TEST: GlobalActivity = 'unittest';
export const ACTIVITY_HOME: GlobalActivity = 'home';
export const ACTIVITY_INSOMNIA: GlobalActivity = 'insomnia';
// HTTP Methods
export const METHOD_GET = 'GET';
export const METHOD_POST = 'POST';

2
packages/insomnia-app/app/common/misc.js
View File

@@ -6,7 +6,7 @@ import * as uuid from 'uuid';
import zlib from 'zlib';
import { join as pathJoin } from 'path';
import { METHOD_OPTIONS, METHOD_DELETE, DEBOUNCE_MILLIS } from './constants';
import type { GlobalActivity } from '../ui/components/activity-bar/activity-bar';
import type { GlobalActivity } from './constants';
const ESCAPE_REGEX_MATCH = /[-[\]/{}()*+?.\\^$|]/g;

1
packages/insomnia-app/app/plugins/misc.js
View File

@@ -39,7 +39,6 @@ type ThemeInner = {
...ThemeBlock,
rawCss?: string,
styles: ?{
activityBar?: ThemeBlock,
dialog?: ThemeBlock,
dialogFooter?: ThemeBlock,
dialogHeader?: ThemeBlock,

69
packages/insomnia-app/app/ui/components/activity-bar/activity-bar-button.js
View File

@@ -1,69 +0,0 @@
// @flow
import * as React from 'react';
import autobind from 'autobind-decorator';
import classnames from 'classnames';
import type { GlobalActivity } from './activity-bar';
import type { HotKeyDefinition, HotKeyRegistry } from '../../../common/hotkeys';
import { getHotKeyDisplay } from '../../../common/hotkeys';
import KeydownBinder from '../keydown-binder';
import { executeHotKey } from '../../../common/hotkeys-listener';
type Props = {|
activity: {
key: GlobalActivity,
name: string,
hotKey: HotKeyDefinition,
},
hotKeyRegistry: HotKeyRegistry,
activeActivity: GlobalActivity,
setActivity: GlobalActivity => void,
|};
const ACTIVITY_MAP_ICONS: { [GlobalActivity]: string } = {
home: 'fa fa-home',
spec: 'ico-edit-spec',
debug: 'ico-debug',
};
@autobind
class ActivityBarButton extends React.PureComponent<Props> {
_handleSetActivity() {
const { setActivity, activity } = this.props;
setActivity(activity.key);
}
async _handleKeyDown(e: KeyboardEvent) {
const { activity, setActivity } = this.props;
await executeHotKey(e, activity.hotKey, () => {
setActivity(activity.key);
});
}
render() {
const { activeActivity, activity, hotKeyRegistry } = this.props;
const classes = {
'activity-bar__item': true,
'activity-bar__item--active': activity.key === activeActivity,
};
const icon = ACTIVITY_MAP_ICONS[activity.key];
return (
<KeydownBinder onKeydown={this._handleKeyDown}>
<li>
<button
className={classnames(classes)}
title={`${activity.name} (${getHotKeyDisplay(activity.hotKey, hotKeyRegistry, false)})`}
onClick={this._handleSetActivity}>
<i className={icon} />
</button>
</li>
</KeydownBinder>
);
}
}
export default ActivityBarButton;

74
packages/insomnia-app/app/ui/components/activity-bar/activity-bar.js
View File

@@ -1,74 +0,0 @@
// @flow
import * as React from 'react';
import autobind from 'autobind-decorator';
import ActivityBarButton from './activity-bar-button';
import { getHotKeyDisplay, hotKeyRefs } from '../../../common/hotkeys';
import type { HotKeyDefinition, HotKeyRegistry } from '../../../common/hotkeys';
export type GlobalActivity = 'spec' | 'debug' | 'monitor' | 'home';
export const ACTIVITY_SPEC: GlobalActivity = 'spec';
export const ACTIVITY_DEBUG: GlobalActivity = 'debug';
export const ACTIVITY_MONITOR: GlobalActivity = 'monitor';
export const ACTIVITY_HOME: GlobalActivity = 'home';
export const ACTIVITY_INSOMNIA: GlobalActivity = 'insomnia';
type Props = {|
activity: GlobalActivity,
setActivity: GlobalActivity => void,
showSettings: () => void,
hotKeyRegistry: HotKeyRegistry,
|};
const ACTIVITIES: Array<{ key: GlobalActivity, name: string, hotKey: HotKeyDefinition }> = [
{
key: ACTIVITY_HOME,
name: 'Home',
hotKey: hotKeyRefs.SHOW_HOME,
},
{
key: ACTIVITY_SPEC,
name: 'API Specification',
hotKey: hotKeyRefs.SHOW_SPEC_EDITOR,
},
{
key: ACTIVITY_DEBUG,
name: 'Debug API',
hotKey: hotKeyRefs.SHOW_TEST,
},
];
@autobind
class ActivityBar extends React.PureComponent<Props> {
render() {
const { activity, showSettings, setActivity, hotKeyRegistry } = this.props;
return (
<ul className="activity-bar theme--activity-bar">
{ACTIVITIES.map(a => (
<ActivityBarButton
key={a.key}
activity={a}
activeActivity={activity}
setActivity={setActivity}
hotKeyRegistry={hotKeyRegistry}
/>
))}
<span className="activity-bar__spacer" />
<li>
<button
onClick={showSettings}
className="activity-bar__item activity-bar__item--bottom"
title={`Settings (${getHotKeyDisplay(
hotKeyRefs.PREFERENCES_SHOW_GENERAL,
hotKeyRegistry,
false,
)})`}>
<i className="ico-preferences" />
</button>
</li>
</ul>
);
}
}
export default ActivityBar;

40
packages/insomnia-app/app/ui/components/activity-toggle.js Normal file
View File

@@ -0,0 +1,40 @@
// @flow
import React from 'react';
import { MultiSwitch } from 'insomnia-components';
import type { GlobalActivity } from '../../common/constants';
import { ACTIVITY_DEBUG, ACTIVITY_SPEC, ACTIVITY_UNIT_TEST } from '../../common/constants';
import type { Settings } from '../../models/settings';
import type { Workspace } from '../../models/workspace';
type Props = {
activity: GlobalActivity,
handleActivityChange: (workspaceId: string, activity: GlobalActivity) => Promise<void>,
settings: Settings,
workspace: Workspace,
};
export default function ActivityToggle({
activity,
handleActivityChange,
settings,
workspace,
}: Props) {
const choices = [
{ label: 'Design', value: ACTIVITY_SPEC },
{ label: 'Debug', value: ACTIVITY_DEBUG },
];
if (settings.enableUnitTestingBeta || activity === ACTIVITY_UNIT_TEST) {
choices.push({ label: 'Test', value: ACTIVITY_UNIT_TEST });
}
return (
<MultiSwitch
defaultValue={activity}
name="activity-toggle"
onChange={a => handleActivityChange(workspace._id, a)}
choices={choices}
/>
);
}

30
packages/insomnia-app/app/ui/components/wrapper-debug.js
View File

@@ -1,10 +1,9 @@
// @flow
import * as React from 'react';
import autobind from 'autobind-decorator';
import { Breadcrumb, Switch, Header } from 'insomnia-components';
import { Breadcrumb, Header } from 'insomnia-components';
import PageLayout from './page-layout';
import type { WrapperProps } from './wrapper';
import { ACTIVITY_HOME } from './activity-bar/activity-bar';
import RequestPane from './request-pane';
import ErrorBoundary from './error-boundary';
import ResponsePane from './response-pane';
@@ -13,11 +12,13 @@ import SidebarFilter from './sidebar/sidebar-filter';
import EnvironmentsDropdown from './dropdowns/environments-dropdown';
import designerLogo from '../images/insomnia-designer-logo.svg';
import WorkspaceDropdown from './dropdowns/workspace-dropdown';
import { isInsomnia } from '../../common/constants';
import { ACTIVITY_HOME, isInsomnia } from '../../common/constants';
import ActivityToggle from './activity-toggle';
type Props = {
forceRefreshKey: string,
gitSyncDropdown: React.Node,
handleActivityChange: (workspaceId: string, activity: GlobalActivity) => Promise<void>,
handleChangeEnvironment: Function,
handleDeleteResponse: Function,
handleDeleteResponses: Function,
@@ -42,7 +43,6 @@ type Props = {
handleUpdateRequestUrl: Function,
handleUpdateSettingsShowPasswords: Function,
handleUpdateSettingsUseBulkHeaderEditor: Function,
handleSetDesignActivity: (workspaceId: string) => Promise<void>,
wrapperProps: WrapperProps,
};
@@ -52,18 +52,11 @@ class WrapperDebug extends React.PureComponent<Props> {
this.props.wrapperProps.handleSetActiveActivity(ACTIVITY_HOME);
}
async _handleDesign(): Promise<void> {
const {
handleSetDesignActivity,
wrapperProps: { activeWorkspace },
} = this.props;
await handleSetDesignActivity(activeWorkspace._id);
}
_renderPageHeader() {
const {
gitSyncDropdown,
wrapperProps: { activeApiSpec },
handleActivityChange,
wrapperProps: { activeApiSpec, activeWorkspace, settings, activity },
} = this.props;
return (
@@ -80,12 +73,11 @@ class WrapperDebug extends React.PureComponent<Props> {
</React.Fragment>
}
gridCenter={
<Switch
onClick={this._handleDesign}
optionItems={[
{ label: 'DESIGN', selected: false },
{ label: 'DEBUG', selected: true },
]}
<ActivityToggle
activity={activity}
handleActivityChange={handleActivityChange}
settings={settings}
workspace={activeWorkspace}
/>
}
gridRight={gitSyncDropdown}

34
packages/insomnia-app/app/ui/components/wrapper-design.js
View File

@@ -3,7 +3,7 @@ import * as React from 'react';
import autobind from 'autobind-decorator';
import type { WrapperProps } from './wrapper';
import PageLayout from './page-layout';
import { Breadcrumb, Button, Header, NoticeTable, Switch } from 'insomnia-components';
import { Breadcrumb, Button, Header, NoticeTable } from 'insomnia-components';
import ErrorBoundary from './error-boundary';
import SpecEditorSidebar from './spec-editor/spec-editor-sidebar';
import CodeEditor from './codemirror/code-editor';
@@ -12,7 +12,6 @@ import { showModal } from './modals';
import GenerateConfigModal from './modals/generate-config-modal';
import classnames from 'classnames';
import SwaggerUI from 'swagger-ui-react';
import { ACTIVITY_HOME } from './activity-bar/activity-bar';
import type { ApiSpec } from '../../models/api-spec';
import designerLogo from '../images/insomnia-designer-logo.svg';
import previewIcon from '../images/icn-eye.svg';
@@ -21,14 +20,17 @@ import * as models from '../../models/index';
import { parseApiSpec } from '../../common/api-specs';
import { getConfigGenerators } from '../../plugins';
import AlertModal from './modals/alert-modal';
import { ACTIVITY_HOME } from '../../common/constants';
import type { GlobalActivity } from '../../common/constants';
import ActivityToggle from './activity-toggle';
const spectral = new Spectral();
type Props = {|
gitSyncDropdown: React.Node,
wrapperProps: WrapperProps,
handleActivityChange: (workspaceId: string, activity: GlobalActivity) => Promise<void>,
handleUpdateApiSpec: (s: ApiSpec) => Promise<void>,
handleSetDebugActivity: (s: ApiSpec) => Promise<void>,
wrapperProps: WrapperProps,
|};
type State = {|
@@ -181,22 +183,21 @@ class WrapperDesign extends React.PureComponent<Props, State> {
}
render() {
const { gitSyncDropdown, wrapperProps } = this.props;
const { gitSyncDropdown, wrapperProps, handleActivityChange } = this.props;
const { activeApiSpec, settings } = wrapperProps;
const { activeApiSpec, settings, activity, activeWorkspace } = wrapperProps;
const { lintMessages, previewHidden, hasConfigPlugins } = this.state;
let swaggerUiSpec;
try {
const { contents } = parseApiSpec(activeApiSpec.contents);
swaggerUiSpec = contents;
} catch (err) {
swaggerUiSpec = parseApiSpec(activeApiSpec.contents).contents;
} catch (err) {}
if (!swaggerUiSpec) {
swaggerUiSpec = {};
}
const lintErrorsExist = !!lintMessages.find(c => c.type === 'error');
return (
<PageLayout
wrapperProps={this.props.wrapperProps}
@@ -214,12 +215,11 @@ class WrapperDesign extends React.PureComponent<Props, State> {
</React.Fragment>
}
gridCenter={
<Switch
onClick={this._handleDebugSpec.bind(this, lintErrorsExist)}
optionItems={[
{ label: 'DESIGN', selected: true },
{ label: 'DEBUG', selected: false },
]}
<ActivityToggle
activity={activity}
handleActivityChange={handleActivityChange}
settings={settings}
workspace={activeWorkspace}
/>
}
gridRight={

13
packages/insomnia-app/app/ui/components/wrapper-home.js
View File

@@ -27,8 +27,8 @@ import { trackEvent } from '../../common/analytics';
import YAML from 'yaml';
import TimeFromNow from './time-from-now';
import Highlight from './base/highlight';
import type { GlobalActivity } from './activity-bar/activity-bar';
import { ACTIVITY_DEBUG, ACTIVITY_SPEC } from './activity-bar/activity-bar';
import type { GlobalActivity } from '../../common/constants';
import { ACTIVITY_DEBUG, ACTIVITY_HOME, ACTIVITY_SPEC } from '../../common/constants';
import { fuzzyMatchAll } from '../../common/misc';
import type { WrapperProps } from './wrapper';
import Notice from './notice';
@@ -273,8 +273,13 @@ class WrapperHome extends React.PureComponent<Props, State> {
async _handleSetActiveWorkspace(id: string, defaultActivity: GlobalActivity) {
const { handleSetActiveWorkspace, handleSetActiveActivity } = this.props.wrapperProps;
const selectedWorkspaceMeta = await models.workspaceMeta.getOrCreateByParentId(id);
handleSetActiveActivity(selectedWorkspaceMeta.activeActivity || defaultActivity);
const { activeActivity } = await models.workspaceMeta.getOrCreateByParentId(id);
if (!activeActivity || activeActivity === ACTIVITY_HOME) {
handleSetActiveActivity(defaultActivity);
} else {
handleSetActiveActivity(activeActivity);
}
handleSetActiveWorkspace(id);
}

3
packages/insomnia-app/app/ui/components/wrapper-onboarding.js
View File

@@ -5,7 +5,7 @@ import 'swagger-ui-react/swagger-ui.css';
import { showPrompt } from './modals';
import type { BaseModel } from '../../models';
import * as models from '../../models';
import { ACTIVITY_HOME } from './activity-bar/activity-bar';
import { ACTIVITY_HOME, getAppLongName, getAppName, getAppSynopsis } from '../../common/constants';
import type { WrapperProps } from './wrapper';
import PageLayout from './page-layout';
import * as db from '../../common/database';
@@ -13,7 +13,6 @@ import chartSrc from '../images/chart.svg';
import imgSrc from '../images/logo.png';
import type { ForceToWorkspace } from '../redux/modules/helpers';
import { ForceToWorkspaceKeys } from '../redux/modules/helpers';
import { getAppLongName, getAppName, getAppSynopsis } from '../../common/constants';
type Props = {|
wrapperProps: WrapperProps,

75
packages/insomnia-app/app/ui/components/wrapper.js
View File

@@ -65,13 +65,6 @@ import VCS from '../../sync/vcs';
import type { StatusCandidate } from '../../sync/types';
import type { RequestMeta } from '../../models/request-meta';
import type { RequestVersion } from '../../models/request-version';
import type { GlobalActivity } from './activity-bar/activity-bar';
import {
ACTIVITY_DEBUG,
ACTIVITY_HOME,
ACTIVITY_INSOMNIA,
ACTIVITY_SPEC,
} from './activity-bar/activity-bar';
import type { ApiSpec } from '../../models/api-spec';
import GitVCS from '../../sync/git/git-vcs';
import { trackPageView } from '../../common/analytics';
@@ -84,7 +77,17 @@ import { importRaw } from '../../common/import';
import GitSyncDropdown from './dropdowns/git-sync-dropdown';
import { DropdownButton } from './base/dropdown';
import type { ForceToWorkspace } from '../redux/modules/helpers';
import { getAppName } from '../../common/constants';
import {
ACTIVITY_DEBUG,
ACTIVITY_HOME,
ACTIVITY_INSOMNIA,
ACTIVITY_SPEC,
getAppName,
} from '../../common/constants';
import { Spectral } from '@stoplight/spectral';
import type { GlobalActivity } from '../../common/constants';
const spectral = new Spectral();
export type WrapperProps = {
// Helper Functions
@@ -294,32 +297,46 @@ class Wrapper extends React.PureComponent<WrapperProps, State> {
return null;
}
async _handleWorkspaceActivityChange(workspaceId: string, activeActivity: GlobalActivity) {
const { activity: updatedActivity } = this.props.handleSetActiveActivity(activeActivity);
await models.workspaceMeta.updateByParentId(workspaceId, { activeActivity: updatedActivity });
}
async _handleWorkspaceActivityChange(workspaceId: string, nextActivity: GlobalActivity) {
const { activity, activeApiSpec, handleSetActiveActivity } = this.props;
async _handleSetDesignActivity(workspaceId: string): Promise<void> {
await this._handleWorkspaceActivityChange(workspaceId, ACTIVITY_SPEC);
}
// Remember last activity on workspace for later, but only if it isn't HOME
if (nextActivity !== ACTIVITY_HOME) {
await models.workspaceMeta.updateByParentId(workspaceId, { activeActivity: nextActivity });
}
async _handleSetDebugActivity(apiSpec: ApiSpec): Promise<void> {
const workspaceId = apiSpec.parentId;
await this._handleWorkspaceActivityChange(workspaceId, ACTIVITY_DEBUG);
if (activity !== ACTIVITY_SPEC) {
handleSetActiveActivity(nextActivity);
return;
}
// Handle switching away from the spec design activity. For this, we want to generate
// requests that can be accessed from debug or test.
// If there are errors in the spec, show the user a warning first
const results = await spectral.run(activeApiSpec.contents);
if (activeApiSpec.contents && results && results.length) {
showModal(AlertModal, {
title: 'Error Generating Configuration',
message:
'Some requests may not be available due to errors found in the ' +
'specification. We recommend fixing errors before proceeding. 🤗',
okLabel: 'Proceed',
addCancel: true,
onConfirm: () => {
handleSetActiveActivity(nextActivity);
},
});
return;
}
// Delaying generation so design to debug mode is smooth
handleSetActiveActivity(nextActivity);
setTimeout(() => {
// Delaying generation so design to debug mode is smooth
importRaw(
() => Promise.resolve(workspaceId), // Always import into current workspace
apiSpec.contents,
);
importRaw(() => Promise.resolve(workspaceId), activeApiSpec.contents);
}, 1000);
}
_handleSetHomeActivity(): void {
this.props.handleSetActiveActivity(ACTIVITY_HOME);
}
// Settings updaters
_handleUpdateSettingsShowPasswords(showPasswords: boolean): Promise<Settings> {
return sUpdate(this.props.settings, { showPasswords });
@@ -760,7 +777,7 @@ class Wrapper extends React.PureComponent<WrapperProps, State> {
{activity === ACTIVITY_SPEC && (
<WrapperDesign
gitSyncDropdown={gitSyncDropdown}
handleSetDebugActivity={this._handleSetDebugActivity}
handleActivityChange={this._handleWorkspaceActivityChange}
handleUpdateApiSpec={this._handleUpdateApiSpec}
wrapperProps={this.props}
/>
@@ -770,7 +787,7 @@ class Wrapper extends React.PureComponent<WrapperProps, State> {
<WrapperDebug
forceRefreshKey={this.state.forceRefreshKey}
gitSyncDropdown={gitSyncDropdown}
handleSetDesignActivity={this._handleSetDesignActivity}
handleActivityChange={this._handleWorkspaceActivityChange}
handleChangeEnvironment={this._handleChangeEnvironment}
handleDeleteResponse={this._handleDeleteResponse}
handleDeleteResponses={this._handleDeleteResponses}

13
packages/insomnia-app/app/ui/containers/app.js
View File

@@ -14,7 +14,6 @@ import Toast from '../components/toast';
import CookiesModal from '../components/modals/cookies-modal';
import RequestSwitcherModal from '../components/modals/request-switcher-modal';
import SettingsModal, { TAB_INDEX_SHORTCUTS } from '../components/modals/settings-modal';
import { ACTIVITY_HOME, ACTIVITY_INSOMNIA } from '../components/activity-bar/activity-bar';
import {
COLLAPSE_SIDEBAR_REMS,
DEFAULT_PANE_HEIGHT,
@@ -29,6 +28,8 @@ import {
PREVIEW_MODE_SOURCE,
getAppName,
getAppId,
ACTIVITY_INSOMNIA,
ACTIVITY_HOME,
} from '../../common/constants';
import * as globalActions from '../redux/modules/global';
import * as entitiesActions from '../redux/modules/entities';
@@ -931,11 +932,17 @@ class App extends PureComponent {
* @private
*/
_updateDocumentTitle() {
const { activeWorkspace, activeApiSpec, activeEnvironment, activeRequest } = this.props;
const {
activeWorkspace,
activeApiSpec,
activeEnvironment,
activeRequest,
activity,
} = this.props;
let title;
if (this.props.activity === ACTIVITY_HOME) {
if (activity === ACTIVITY_HOME) {
title = getAppName();
} else {
title = getAppId() === APP_ID_INSOMNIA ? activeWorkspace.name : activeApiSpec.fileName;

58
packages/insomnia-app/app/ui/css/components/activity-bar.less
View File

@@ -1,58 +0,0 @@
.activity-bar {
display: flex;
flex-direction: column;
background: var(--color-bg);
border-right: 1px solid var(--hl-md);
padding-top: var(--padding-sm);
button {
margin: 0 var(--padding-sm);
i {
display: flex;
}
&:last-child {
margin-bottom: var(--padding-sm);
}
}
&__spacer {
flex: 1;
}
&__item {
display: flex;
align-items: center;
justify-content: center;
height: var(--line-height-sm);
width: var(--line-height-sm);
border-radius: var(--radius-sm);
i {
color: var(--color-font);
font-size: var(--font-size-xl);
opacity: var(--opacity-super-subtle);
}
// Set active opacity
&:hover {
background-color: var(--hl-sm);
color: var(--color-font);
i {
opacity: 1;
}
}
&--active {
background-color: var(--hl-lg);
border: 1px solid var(--hl);
i {
color: var(--color-font);
opacity: 1;
}
}
}
}

6
packages/insomnia-app/app/ui/css/components/wrapper.less
View File

@@ -68,12 +68,6 @@
}
}
.activity-bar {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: span 3;
}
.sidebar {
grid-column-start: 2;
grid-row-start: 2;

1
packages/insomnia-app/app/ui/css/index.less
View File

@@ -51,7 +51,6 @@
@import 'components/scrollbar';
@import 'components/shortcuts';
@import 'components/sidebar';
@import 'components/activity-bar';
@import 'components/spec-editor';
@import 'components/spec-editor-sidebar';
@import 'components/tabs';

8
packages/insomnia-app/app/ui/redux/modules/__tests__/helpers.test.js
View File

@@ -2,15 +2,11 @@
import { askToImportIntoWorkspace, ensureActivityIsForApp, ForceToWorkspaceKeys } from '../helpers';
import * as modals from '../../../components/modals';
import {
ACTIVITY_DEBUG,
ACTIVITY_HOME,
ACTIVITY_INSOMNIA,
ACTIVITY_SPEC,
} from '../../../components/activity-bar/activity-bar';
import * as constants from '../../../../common/constants';
import { APP_ID_DESIGNER, APP_ID_INSOMNIA } from '../../../../../config';
const { ACTIVITY_DEBUG, ACTIVITY_HOME, ACTIVITY_INSOMNIA, ACTIVITY_SPEC } = constants;
describe('askToImportIntoWorkspace', () => {
it('should return null if forcing to a new workspace', () => {
const func = askToImportIntoWorkspace('id', ForceToWorkspaceKeys.new);

2
packages/insomnia-app/app/ui/redux/modules/global.js
View File

@@ -24,13 +24,13 @@ import SettingsModal, {
import install from '../../../plugins/install';
import type { ForceToWorkspace } from './helpers';
import { askToImportIntoWorkspace, ensureActivityIsForApp } from './helpers';
import type { GlobalActivity } from '../../components/activity-bar/activity-bar';
import { createPlugin } from '../../../plugins/create';
import { reloadPlugins } from '../../../plugins';
import { setTheme } from '../../../plugins/misc';
import { setActivityAttribute } from '../../../common/misc';
import { isDevelopment } from '../../../common/constants';
import type { Workspace } from '../../../models/workspace';
import type { GlobalActivity } from '../../../common/constants';
const LOCALSTORAGE_PREFIX = 'insomnia::meta';

5
packages/insomnia-app/app/ui/redux/modules/helpers.js
View File

@@ -1,9 +1,8 @@
// @flow
import { showModal } from '../../components/modals';
import AskModal from '../../components/modals/ask-modal';
import type { GlobalActivity } from '../../components/activity-bar/activity-bar';
import { ACTIVITY_HOME, ACTIVITY_INSOMNIA } from '../../components/activity-bar/activity-bar';
import { getDefaultAppId } from '../../../common/constants';
import type { GlobalActivity } from '../../../common/constants';
import { ACTIVITY_HOME, ACTIVITY_INSOMNIA, getDefaultAppId } from '../../../common/constants';
import { APP_ID_INSOMNIA } from '../../../../config';
export const ForceToWorkspaceKeys = {

6
packages/insomnia-components/index.js
View File

@@ -7,9 +7,11 @@ import _DropdownDivider from './components/dropdown/dropdown-divider';
import _DropdownItem from './components/dropdown/dropdown-item';
import _GravatarImg from './components/gravatar-img';
import _Header from './components/header';
import _MultiSwitch from './components/multi-switch';
import _NoticeTable from './components/notice-table';
import _SvgIcon from './components/svg-icon';
import _RadioButtonGroup from './components/radio-button-group';
import _Sidebar from './components/sidebar';
import _SvgIcon from './components/svg-icon';
import _Switch from './components/switch';
import _ToggleSwitch from './components/toggle-switch';
import * as table from './components/table';
@@ -23,7 +25,9 @@ export const DropdownDivider = _DropdownDivider;
export const DropdownItem = _DropdownItem;
export const GravatarImg = _GravatarImg;
export const Header = _Header;
export const MultiSwitch = _MultiSwitch;
export const NoticeTable = _NoticeTable;
export const RadioButtonGroup = _RadioButtonGroup;
export const SvgIcon = _SvgIcon;
export const Switch = _Switch;
export const Sidebar = _Sidebar;