Merge branch 'develop' into keybind-for-toggleComment

Kong · Dec 6, 2023 · f7009b8 · f7009b8
2 parents 1222291 + 6fa7e5d
commit f7009b8
Show file tree

Hide file tree

Showing 19 changed files with 1,041 additions and 1,018 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/insomnia/package.json b/packages/insomnia/package.json
@@ -165,7 +165,7 @@
  "postcss": "^8.4.6",
  "react": "^18.2.0",
  "react-aria": "3.23.1",
- "react-aria-components": "^1.0.0-alpha.6",
+ "react-aria-components": "^1.0.0-rc.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.19.0",
  "react-stately": "3.21.0",

diff --git a/packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx
@@ -5,9 +5,9 @@ import {
  Dialog,
  Heading,
  Input,
- Item,
  Label,
  Menu,
+ MenuItem,
  MenuTrigger,
  Modal,
  ModalOverlay,
@@ -108,15 +108,15 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId }) => {
  className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
  >
  {item => (
- <Item
+ <MenuItem
  key={item.id}
  id={item.id}
  className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
  aria-label={item.name}
  >
  <Icon icon={item.icon} />
  <span>{item.name}</span>
- </Item>
+ </MenuItem>
  )}
  </Menu>
  </Popover>
@@ -130,12 +130,14 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId }) => {
  isDismissable
  className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
  >
- <Modal className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+ <Modal
+ onOpenChange={isOpen => {
+ setProjectType('');
+ setIsProjectSettingsModalOpen(isOpen);
+ }}
+ className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+ >
  <Dialog
- onClose={() => {
- setIsProjectSettingsModalOpen(false);
- setProjectType('');
- }}
  className="outline-none"
  >
  {({ close }) => (

diff --git a/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx
@@ -1,6 +1,6 @@
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { Fragment, useCallback, useState } from 'react';
-import { Button, Item, Menu, MenuTrigger, Popover } from 'react-aria-components';
+import { Button, Menu, MenuItem, MenuTrigger, Popover } from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import { exportHarRequest } from '../../../common/har';
@@ -252,15 +252,15 @@ export const RequestActionsDropdown = ({
  className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
  >
  {item => (
- <Item
+ <MenuItem
  key={item.id}
  id={item.id}
  className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
  aria-label={item.name}
  >
  <Icon icon={item.icon} />
  <span>{item.name}</span>
- </Item>
+ </MenuItem>
  )}
  </Menu>
  </Popover>

diff --git a/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx
@@ -1,6 +1,6 @@
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { Fragment, useRef, useState } from 'react';
-import { Button, Item, Menu, MenuTrigger, Popover } from 'react-aria-components';
+import { Button, Menu, MenuItem, MenuTrigger, Popover } from 'react-aria-components';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { toKebabCase } from '../../../common/misc';
@@ -284,15 +284,15 @@ export const RequestGroupActionsDropdown = ({
  className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
  >
  {item => (
- <Item
+ <MenuItem
  key={item.id}
  id={item.id}
  className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
  aria-label={item.name}
  >
  <Icon icon={item.icon} />
  <span>{item.name}</span>
- </Item>
+ </MenuItem>
  )}
  </Menu>
  </Popover>

diff --git a/packages/insomnia/src/ui/components/dropdowns/sync-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/sync-dropdown.tsx
@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import React, { FC, Fragment, useEffect, useState } from 'react';
-import { Button, Collection, Item, Menu, MenuTrigger, Popover, Section, Tooltip, TooltipTrigger } from 'react-aria-components';
+import { Button, Collection, Menu, MenuItem, MenuTrigger, Popover, Section, Tooltip, TooltipTrigger } from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 import { useInterval } from 'react-use';
 
@@ -320,7 +320,7 @@ export const SyncDropdown: FC<Props> = ({ gitSyncEnabled }) => {
  <Section className='border-b border-solid border-[--hl-sm] pb-2'>
  <Collection items={switchToGitRepoActionList}>
  {item => (
- <Item
+ <MenuItem
  textValue={item.name}
  className={'group aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent disabled:cursor-not-allowed focus:outline-none transition-colors'}
  aria-label={item.name}
@@ -329,46 +329,46 @@ export const SyncDropdown: FC<Props> = ({ gitSyncEnabled }) => {
  <Icon icon={item.icon} />
  <div>{item.name}</div>
  </div>
- </Item>
+ </MenuItem>
  )}
  </Collection>
  </Section>
  {syncError && (
  <Section className='border-b border-solid border-[--hl-sm]'>
- <Item
+ <MenuItem
  className={'flex overflow-hidden gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent disabled:cursor-not-allowed focus:outline-none transition-colors'}
  aria-label={syncError}
  >
  <Icon icon="exclamation-triangle" className="text-[--color-warning]" />
  <p className='whitespace-normal'>{syncError}</p>
- </Item>
+ </MenuItem>
  </Section>
  )}
  {!syncError && (
  <Fragment>
  <Section className='border-b border-solid border-[--hl-sm]'>
  <Collection items={localBranchesActionList}>
  {item => (
- <Item
+ <MenuItem
  className={`aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors ${item.isActive ? 'font-bold' : ''}`}
  aria-label={item.name}
  >
  <Icon icon={item.icon} className={item.isActive ? 'text-[--color-success]' : ''} />
  <span className='truncate'>{item.name}</span>
- </Item>
+ </MenuItem>
  )}
  </Collection>
  </Section>
  <Section>
  <Collection items={syncMenuActionList}>
  {item => (
- <Item
+ <MenuItem
  className={'aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors'}
  aria-label={item.name}
  >
  <Icon icon={item.icon} />
  <span>{item.name}</span>
- </Item>
+ </MenuItem>
  )}
  </Collection>
  </Section>

diff --git a/packages/insomnia/src/ui/components/dropdowns/workspace-card-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/workspace-card-dropdown.tsx
@@ -224,11 +224,13 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
  isDismissable
  className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
  >
- <Modal className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+ <Modal
+ onOpenChange={() => {
+ setIsDeleteRemoteWorkspaceModalOpen(false);
+ }}
+ className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+ >
  <Dialog
- onClose={() => {
- setIsDeleteRemoteWorkspaceModalOpen(false);
- }}
  className="outline-none"
  >
  {({ close }) => (

diff --git a/packages/insomnia/src/ui/components/dropdowns/workspace-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/workspace-dropdown.tsx
@@ -1,6 +1,6 @@
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { FC, ReactNode, useCallback, useState } from 'react';
-import { Button, Dialog, Heading, Item, Menu, MenuTrigger, Modal, ModalOverlay, Popover } from 'react-aria-components';
+import { Button, Dialog, Heading, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, Popover } from 'react-aria-components';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { isLoggedIn } from '../../../account/session';
@@ -216,15 +216,15 @@ export const WorkspaceDropdown: FC = () => {
  className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
  >
  {item => (
- <Item
+ <MenuItem
  key={item.id}
  id={item.id}
  className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
  aria-label={item.name}
  >
  {item.icon}
  <span>{item.name}</span>
- </Item>
+ </MenuItem>
  )}
  </Menu>
  </Popover>
@@ -271,11 +271,13 @@ export const WorkspaceDropdown: FC = () => {
  isDismissable
  className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
  >
- <Modal className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+ <Modal
+ onOpenChange={() => {
+ setIsDeleteRemoteWorkspaceModalOpen(false);
+ }}
+ className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+ >
  <Dialog
- onClose={() => {
- setIsDeleteRemoteWorkspaceModalOpen(false);
- }}
  className="outline-none"
  >
  {({ close }) => (

diff --git a/packages/insomnia/src/ui/components/modals/sync-branches-modal.tsx b/packages/insomnia/src/ui/components/modals/sync-branches-modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Dialog, GridList, Heading, Input, Item, Label, Modal, ModalOverlay, TextField } from 'react-aria-components';
+import { Button, Dialog, GridList, GridListItem, Heading, Input, Label, Modal, ModalOverlay, TextField } from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import { PromptButton } from '../base/prompt-button';
@@ -169,9 +169,13 @@ export const SyncBranchesModal = ({ onClose, branches, remoteBranches, currentBr
  isDismissable
  className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
  >
- <Modal className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+ <Modal
+ onOpenChange={isOpen => {
+ !isOpen && onClose();
+ }}
+ className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+ >
  <Dialog
- onClose={onClose}
  className="outline-none flex-1 h-full flex flex-col overflow-hidden"
  >
  {({ close }) => (
@@ -230,14 +234,14 @@ export const SyncBranchesModal = ({ onClose, branches, remoteBranches, currentBr
  className="divide-y divide-solid divide-[--hl-sm] flex flex-col focus:outline-none overflow-y-auto flex-1 data-[empty]:py-0"
  >
  {item => (
- <Item
+ <GridListItem
  id={item.id}
  key={item.key}
  textValue={item.name}
  className="p-2 w-full focus:outline-none focus:bg-[--hl-sm] transition-colors"
  >
  <LocalBranchItem branch={item.name} isCurrent={item.isCurrent} organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
- </Item>
+ </GridListItem>
  )}
  </GridList>
  </div>
@@ -257,14 +261,14 @@ export const SyncBranchesModal = ({ onClose, branches, remoteBranches, currentBr
  className="divide-y divide-solid divide-[--hl-sm] flex flex-col focus:outline-none overflow-y-auto flex-1 data-[empty]:py-0"
  >
  {item => (
- <Item
+ <GridListItem
  id={item.id}
  key={item.key}
  textValue={item.name}
  className="p-2 w-full focus:outline-none focus:bg-[--hl-sm] transition-colors"
  >
  <RemoteBranchItem branch={item.name} isCurrent={item.isCurrent} organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
- </Item>
+ </GridListItem>
  )}
  </GridList>
  </div>

diff --git a/packages/insomnia/src/ui/components/modals/sync-history-modal.tsx b/packages/insomnia/src/ui/components/modals/sync-history-modal.tsx
@@ -64,9 +64,13 @@ export const SyncHistoryModal = ({ history, onClose }: Props) => {
  isDismissable
  className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
  >
- <Modal className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+ <Modal
+ onOpenChange={isOpen => {
+ !isOpen && onClose();
+ }}
+ className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+ >
  <Dialog
- onClose={onClose}
  className="outline-none flex-1 h-full flex flex-col overflow-hidden"
  >
  {({ close }) => (

diff --git a/packages/insomnia/src/ui/components/modals/sync-staging-modal.tsx b/packages/insomnia/src/ui/components/modals/sync-staging-modal.tsx
@@ -58,9 +58,13 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
  isDismissable
  className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
  >
- <Modal className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+ <Modal
+ onOpenChange={isOpen => {
+ !isOpen && onClose();
+ }}
+ className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+ >
  <Dialog
- onClose={onClose}
  className="outline-none flex-1 h-full flex flex-col overflow-hidden"
  >
  {({ close }) => (

diff --git a/packages/insomnia/src/ui/components/settings/import-export.tsx b/packages/insomnia/src/ui/components/settings/import-export.tsx
@@ -1,5 +1,5 @@
 import React, { FC, Fragment, useEffect, useState } from 'react';
-import { Button, Heading, Item, ListBox, Popover, Select, SelectValue } from 'react-aria-components';
+import { Button, Heading, ListBox, ListBoxItem, Popover, Select, SelectValue } from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 import { useRouteLoaderData } from 'react-router-dom';
 
@@ -62,7 +62,6 @@ const UntrackedProject = ({
  }}
  selectedKey={selectedOrganizationId}
  isDisabled={organizations.length === 0}
- items={organizations}
  >
  <Button className="px-4 py-1 disabled:bg-[--hl-xs] disabled:cursor-not-allowed 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] data-[pressed]:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
  <SelectValue<Organization> className="flex truncate items-center justify-center gap-2">
@@ -87,11 +86,12 @@ const UntrackedProject = ({
  <Icon icon="caret-down" />
  </Button>
  <Popover className="min-w-max">
- <ListBox<Organization>
+ <ListBox
+ items={organizations}
  className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
  >
  {item => (
- <Item
+ <ListBoxItem
  id={item.id}
  key={item.id}
  className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
@@ -110,7 +110,7 @@ const UntrackedProject = ({
  )}
  </Fragment>
  )}
- </Item>
+ </ListBoxItem>
  )}
  </ListBox>
  </Popover>
@@ -133,7 +133,8 @@ export const ImportExport: FC<Props> = ({ hideSettingsModal }) => {
  projectId,
  workspaceId,
  } = useParams() as { organizationId: string; projectId: string; workspaceId?: string };
- const { organizations } = useOrganizationLoaderData();
+ const organizationData = useOrganizationLoaderData();
+ const organizations = organizationData?.organizations || [];
 
  const untrackedProjectsFetcher = useFetcher<LoaderData>();