Re-enable plugins (#6587)

* Re-enable plugins on scratchpad

Co-authored-by: Filipe Freire <filipe.r.freire@gmail.com>

* improve error page

---------

Co-authored-by: Filipe Freire <filipe.r.freire@gmail.com>
This commit is contained in:
James Gatz 2023-09-28 14:07:02 +02:00 committed by GitHub
parent 7cefa62527
commit 62eaeb8351
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 62 deletions

View File

@ -1,8 +1,6 @@
import * as path from 'path'; import * as path from 'path';
import React, { FC, useEffect, useState } from 'react'; import React, { FC, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { isLoggedIn } from '../../../account/session';
import { import {
NPM_PACKAGE_BASE, NPM_PACKAGE_BASE,
PLUGIN_HUB_BASE, PLUGIN_HUB_BASE,
@ -28,7 +26,7 @@ interface State {
isRefreshingPlugins: boolean; isRefreshingPlugins: boolean;
} }
export const PluginsSettings: FC = () => { export const Plugins: FC = () => {
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
plugins: [], plugins: [],
npmPluginValue: '', npmPluginValue: '',
@ -271,36 +269,3 @@ export const PluginsSettings: FC = () => {
</div> </div>
); );
}; };
export const Plugins = () => {
const navigate = useNavigate();
if (isLoggedIn()) {
return <PluginsSettings />;
}
return (
<div className='flex flex-col gap-4'>
<div className="border-solid border-[--hl-md] notice surprise p-4 rounded-md">
Log in to Insomnia to enable Plugins
</div>
<div className='flex gap-2'>
<Button
variant="outlined"
size="small"
onClick={
() => navigate('/auth/login')
}
>
Log in
</Button>
<Button
onClick={() => navigate('/auth/login')}
size="small"
variant="contained"
>
Sign Up
</Button>
</div>
</div>
);
};

View File

@ -1,25 +1,15 @@
import React from 'react'; import React from 'react';
import { FC } from 'react'; import { FC } from 'react';
import { Button } from 'react-aria-components';
import { import {
isRouteErrorResponse, isRouteErrorResponse,
useFetcher,
useNavigate, useNavigate,
useNavigation, useNavigation,
useRouteError, useRouteError,
} from 'react-router-dom'; } from 'react-router-dom';
import styled from 'styled-components';
import { Button } from '../components/themed-button'; import { Icon } from '../components/icon';
const Container = styled.div({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '100%',
});
const Spinner = () => <i className="fa fa-spin fa-refresh" />;
export const ErrorRoute: FC = () => { export const ErrorRoute: FC = () => {
const error = useRouteError(); const error = useRouteError();
@ -43,21 +33,39 @@ export const ErrorRoute: FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const navigation = useNavigation(); const navigation = useNavigation();
const errorMessage = getErrorMessage(error); const errorMessage = getErrorMessage(error);
const logoutFetcher = useFetcher();
return ( return (
<Container> <div className="flex gap-2 flex-col items-center justify-center h-full w-full overflow-hidden">
<h1 style={{ color: 'var(--color-font)' }}>Application Error</h1> <h1 className='text-[--color-font] text-2xl flex items-center gap-2'><Icon className='text-[--color-danger]' icon="exclamation-triangle" /> Application Error</h1>
<p style={{ color: 'var(--color-font)' }}> <p className='text-[--color-font]'>
Failed to render. Please report to <a href="https://github.com/Kong/insomnia/issues">our Github Issues</a> Failed to render. Please report to <a className='font-bold underline' href="https://github.com/Kong/insomnia/issues">our Github Issues</a>
</p> </p>
<span style={{ color: 'var(--color-font)' }}> <div className='text-[--color-font] p-6'>
<code className="selectable" style={{ wordBreak: 'break-word', margin: 'var(--padding-sm)' }}>{errorMessage}</code> <code className="break-words p-2">{errorMessage}</code>
</span> </div>
<Button onClick={() => navigate('/organization')}> <div className='flex gap-2 items-center'>
<Button className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base" onPress={() => navigate('/organization')}>
Try to reload the app{' '} Try to reload the app{' '}
<span>{navigation.state === 'loading' ? <Spinner /> : null}</span> <span>{navigation.state === 'loading' ? <Icon icon="spinner" className='animate-spin' /> : null}</span>
</Button> </Button>
<code className="selectable" style={{ wordBreak: 'break-word', margin: 'var(--padding-sm)' }}>{getErrorStack(error)}</code> <Button
</Container> className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base"
onPress={() => logoutFetcher.submit(
{},
{
action: '/auth/logout',
method: 'POST',
},
)}
>
Logout{' '}
<span>{navigation.state === 'loading' ? <Icon icon="spinner" className='animate-spin' /> : null}</span>
</Button>
</div>
<div className='text-[--color-font] p-6 overflow-y-auto'>
<code className="break-all p-2">{getErrorStack(error)}</code>
</div>
</div>
); );
}; };