Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

improve plugin install ux #7542

Merged
merged 1 commit into from
Jun 17, 2024
Merged

improve plugin install ux #7542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/insomnia/src/plugins/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ async function _traversePluginPath(
} catch (err) {
showError({
title: 'Plugin Error',
message: 'Failed to load plugin ' + filename,
message: 'Failed to load plugin ' + filename + '. Please contact the plugin author sharing the below stack trace to help them to ensure compatibility with the latest Insomnia.',
error: err,
});
}
Expand Down
25 changes: 19 additions & 6 deletions packages/insomnia/src/ui/components/settings/plugins.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useRootLoaderData } from '../../routes/root';
import { CopyButton } from '../base/copy-button';
import { Link } from '../base/link';
import { HelpTooltip } from '../help-tooltip';
import { Icon } from '../icon';
import { showAlert, showPrompt } from '../modals';
import { Button } from '../themed-button';
interface State {
Expand Down Expand Up @@ -148,8 +149,8 @@ export const Plugins: FC = () => {
</button>
<div className="selectable force-pre-wrap">
<b>{installPluginErrMsg}</b>
{'\n\nThere may be an issue with the plugin itself, as a note you can discover and install plugins from the '}
<a href={PLUGIN_HUB_BASE}>Plugin Hub.</a>
<br />
Try using the install button on <a href={PLUGIN_HUB_BASE}>Plugin Hub.</a>
<details>
<summary>Additional Information</summary>
<pre className="pad-top-sm force-wrap selectable">
Expand All @@ -169,17 +170,29 @@ export const Plugins: FC = () => {
error: null,
installPluginErrMsg: '',
};
if (!npmPluginValue.startsWith('insomnia-plugin-')) {
newState.installPluginErrMsg = 'Please enter a plugin name starting with insomnia-plugin-';
newState.error = new Error('Invalid plugin name');
setState(state => ({ ...state, ...newState }));
return;
}
try {
await window.main.installPlugin(npmPluginValue.trim());
await refreshPlugins();
newState.npmPluginValue = ''; // Clear input if successful install
} catch (err) {
newState.installPluginErrMsg = `Failed to install ${npmPluginValue}`;
newState.installPluginErrMsg = `Failed to install ${npmPluginValue}. Please contact the plugin author sharing the below stack trace to help them to ensure compatibility with the latest Insomnia.`;
newState.error = err;
}
setState(state => ({ ...state, ...newState }));
}}
>
<div className="form-row">
<div className="form-control">
<Icon icon='info-circle' className='px-2' />
<span>Enter the full name of an npm package beginning with insomnia-plugin-*</span>
</div>
</div>
<div className="form-row">
<div className="form-control form-control--outlined">
<input
Expand All @@ -190,7 +203,7 @@ export const Plugins: FC = () => {
}}
disabled={isInstallingFromNpm}
type="text"
placeholder="npm-package-name"
placeholder="insomnia-plugin-placeholder"
value={npmPluginValue}
/>
</div>
Expand All @@ -201,7 +214,7 @@ export const Plugins: FC = () => {
</Button>
</div>
</div>
</form>
</form >
<hr />
<div className="text-right mt-2">
<Button
Expand Down Expand Up @@ -266,6 +279,6 @@ export const Plugins: FC = () => {
{isRefreshingPlugins && <i className="fa fa-refresh fa-spin space-left" />}
</Button>
</div>
</div>
</div >
);
};
Loading