Skip to content

Commit

Permalink
ui imrpovements (#7528)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gatzjames
gatzjames authored Jun 11, 2024
1 parent 6924e28 commit cc6d669
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 7 deletions.
4 changes: 3 additions & 1 deletion packages/insomnia/src/ui/components/time-from-now.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ interface Props {
intervalSeconds?: number;
className?: string;
titleCase?: boolean;
title?: (text: string) => string;
}
const toTitleCase = (value: string) => (
value
Expand Down Expand Up @@ -54,11 +55,12 @@ export const TimeFromNow: FC<Props> = ({
className,
timestamp,
titleCase,
title,
intervalSeconds,
}) => {
const text = useTimeNowLabel(timestamp, titleCase, intervalSeconds);
return (
<span title={new Date(timestamp).toLocaleString()} className={className}>
<span title={title ? title(text) : new Date(timestamp).toLocaleString()} className={className}>
{text}
</span>
);
Expand Down
8 changes: 8 additions & 0 deletions packages/insomnia/src/ui/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1008,6 +1008,14 @@ async function renderApp() {
},
],
},
{
path: 'toggle-expand-all',
action: async (...args) => (await import('./routes/actions')).toggleExpandAllRequestGroupsAction(...args),
},
{
path: 'expand-all-for-request',
action: async (...args) => (await import('./routes/actions')).expandAllForRequest(...args),
},
],
},
{
Expand Down
55 changes: 54 additions & 1 deletion packages/insomnia/src/ui/routes/actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,16 @@ import { database as db } from '../../common/database';
import { importResourcesToWorkspace, scanResources } from '../../common/import';
import { generateId } from '../../common/misc';
import * as models from '../../models';
import { GrpcRequest } from '../../models/grpc-request';
import { getById, update } from '../../models/helpers/request-operations';
import { MockServer } from '../../models/mock-server';
import { isRemoteProject } from '../../models/project';
import { isRequest, Request } from '../../models/request';
import { isRequestGroup, isRequestGroupId } from '../../models/request-group';
import { isRequestGroup, isRequestGroupId, RequestGroup } from '../../models/request-group';
import { isRequestGroupMeta } from '../../models/request-group-meta';
import { UnitTest } from '../../models/unit-test';
import { UnitTestSuite } from '../../models/unit-test-suite';
import { WebSocketRequest } from '../../models/websocket-request';
import { isCollection, isMockServer, scopeToActivity, Workspace } from '../../models/workspace';
import { WorkspaceMeta } from '../../models/workspace-meta';
import { getSendRequestCallback } from '../../network/unit-test-feature';
Expand Down Expand Up @@ -1349,3 +1352,53 @@ export const updateMockServerAction: ActionFunction = async ({ request, params }
await models.mockServer.update(mockServer, patch);
return null;
};

export const toggleExpandAllRequestGroupsAction: ActionFunction = async ({ params, request }) => {
const { workspaceId } = params;
invariant(typeof workspaceId === 'string', 'Workspace ID is required');
const workspace = await models.workspace.getById(workspaceId);
invariant(workspace, 'Workspace not found');
const data = await request.json() as {
toggle: 'collapse-all' | 'expand-all';
};

const descendants = await database.withDescendants(workspace);
const requestGroups = descendants.filter(isRequestGroup);
const requestGroupMetas = descendants.filter(isRequestGroupMeta);
await Promise.all(requestGroups.map(requestGroup => {
const requestGroupMeta = requestGroupMetas.find(meta => meta.parentId === requestGroup._id);

if (!requestGroupMeta) {
return;
}

return models.requestGroupMeta.update(requestGroupMeta, { collapsed: data.toggle === 'collapse-all' });
}));
return null;
};

export const expandAllForRequest: ActionFunction = async ({ params, request }) => {
const { workspaceId } = params;
invariant(typeof workspaceId === 'string', 'Workspace ID is required');
const data = await request.json() as {
requestId: string;
};
const activeRequest = await getById(data.requestId);
invariant(request, 'Request not found');

const ancestors = await database.withAncestors<RequestGroup | Request | WebSocketRequest | GrpcRequest>(activeRequest, [models.requestGroup.type]);

const requestGroups = ancestors.filter(isRequestGroup);

await Promise.all(requestGroups.map(async requestGroup => {
const requestGroupMeta = await models.requestGroupMeta.getByParentId(requestGroup._id);

if (!requestGroupMeta) {
return;
}

return models.requestGroupMeta.update(requestGroupMeta, { collapsed: false });
}));

return { success: true };
};
61 changes: 59 additions & 2 deletions packages/insomnia/src/ui/routes/debug.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ import {
SearchField,
Select,
SelectValue,
ToggleButton,
Tooltip,
TooltipTrigger,
useDragAndDrop,
} from 'react-aria-components';
import { ImperativePanelGroupHandle, Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
Expand Down Expand Up @@ -651,6 +654,11 @@ export const Debug: FC = () => {
...environment,
}));

// const allCollapsed = collection.every(item => item.hidden);
const [allExpanded, setAllExpanded] = useState(false);

const toggleExpandAllFetcher = useFetcher();

const visibleCollection = collection.filter(item => !item.hidden);

const parentRef = useRef<HTMLDivElement>(null);
Expand All @@ -662,8 +670,19 @@ export const Debug: FC = () => {
getItemKey: index => visibleCollection[index].doc._id,
});

const [direction, setDirection] = useState<'horizontal' | 'vertical'>(settings.forceVerticalLayout ? 'vertical' : 'horizontal');
const expandAllForRequestFetcher = useFetcher();

useLayoutEffect(() => {
if (expandAllForRequestFetcher.state !== 'idle' && expandAllForRequestFetcher.data && requestId) {
setTimeout(() => {
const activeIndex = collection.findIndex(item => item.doc._id === requestId);
activeIndex && virtualizer.scrollToIndex(activeIndex);
}, 100);
}
}, [collection, expandAllForRequestFetcher.data, expandAllForRequestFetcher.state, requestId, virtualizer]);

const [direction, setDirection] = useState<'horizontal' | 'vertical'>(settings.forceVerticalLayout ? 'vertical' : 'horizontal');
useEffect(() => {
if (settings.forceVerticalLayout) {
setDirection('vertical');
return () => { };
Expand Down Expand Up @@ -920,6 +939,34 @@ export const Debug: FC = () => {
</Popover>
</Select>

<TooltipTrigger>
<ToggleButton
aria-label="Expand All/Collapse all"
defaultSelected={allExpanded}
onChange={() => {
setAllExpanded(!allExpanded);
toggleExpandAllFetcher.submit({
toggle: allExpanded ? 'collapse-all' : 'expand-all',
}, {
action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/toggle-expand-all`,
method: 'POST',
encType: 'application/json',
});
}}
className="flex items-center justify-center h-full aspect-square rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
>
{({ isSelected }) => (
<Icon icon={isSelected ? 'down-left-and-up-right-to-center' : 'up-right-and-down-left-from-center'} />
)}
</ToggleButton>
<Tooltip
offset={8}
className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
>
<span>{allExpanded ? 'Collapse all' : 'Expand all'}</span>
</Tooltip>
</TooltipTrigger>

<MenuTrigger>
<Button
aria-label="Create in collection"
Expand Down Expand Up @@ -1225,7 +1272,17 @@ export const Debug: FC = () => {
</div>
</Panel>
<PanelResizeHandle className='h-full w-[1px] bg-[--hl-md]' />
<Panel>
<Panel
onFocus={() => {
requestId && expandAllForRequestFetcher.submit({
requestId,
}, {
action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/expand-all-for-request`,
method: 'POST',
encType: 'application/json',
});
}}
>
<PanelGroup autoSaveId="insomnia-panels" direction={direction}>
<Panel id="pane-one" className='pane-one theme--pane'>
{workspaceId ? (
Expand Down
18 changes: 15 additions & 3 deletions packages/insomnia/src/ui/routes/project.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Heading,
Input,
Label,
Link,
ListBox,
ListBoxItem,
Menu,
Expand All @@ -22,6 +23,8 @@ import {
Select,
SelectValue,
TextField,
Tooltip,
TooltipTrigger,
} from 'react-aria-components';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import {
Expand Down Expand Up @@ -1340,9 +1343,17 @@ const ProjectRoute: FC = () => {
/>
)}
</div>
<Heading className="pt-4 text-lg font-bold line-clamp-2" title={item.name}>
{item.name}
</Heading>
<TooltipTrigger>
<Link onPress={e => e.continuePropagation()} className="pt-4 text-base font-bold line-clamp-4">
{item.name}
</Link>
<Tooltip
offset={8}
className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
>
<span>{item.name}</span>
</Tooltip>
</TooltipTrigger>
<div className="flex-1 flex flex-col gap-2 justify-end text-sm text-[--hl]">
{item.version && (
<div className="flex-1 pt-2">
Expand All @@ -1369,6 +1380,7 @@ const ProjectRoute: FC = () => {
<div className="text-sm flex items-center gap-2 truncate">
<Icon icon="clock" />
<TimeFromNow
title={text => `Last updated ${text}, and created on ${new Date(item.created).toLocaleDateString()}`}
timestamp={
item.lastModifiedTimestamp
}
Expand Down

0 comments on commit cc6d669

Please sign in to comment.