Update to blueprint v5 packages (#174)

Co-authored-by: James Bradford <[email protected]> Co-authored-by: Courtney Carpenter <[email protected]>
cisagov · Aug 23, 2023 · 8385189 · 8385189
1 parent b8a2780
commit 8385189
Show file tree

Hide file tree

Showing 36 changed files with 180 additions and 336 deletions.
diff --git a/applications/client/src/components/Dropdown.tsx b/applications/client/src/components/Dropdown.tsx
@@ -1,8 +1,7 @@
 import type { Intent, MaybeElement } from '@blueprintjs/core';
-import { Button } from '@blueprintjs/core';
-import { MenuItem2 } from '@blueprintjs/popover2';
+import { Button, MenuItem } from '@blueprintjs/core';
 import type { ItemRenderer } from '@blueprintjs/select';
-import { Select2 } from '@blueprintjs/select';
+import { Select } from '@blueprintjs/select';
 import { css } from '@emotion/react';
 import { Txt } from '@redeye/ui-styles';
 import type { FC } from 'react';
@@ -12,7 +11,7 @@ const renderSort: ItemRenderer<{ key: string; label: string }> = (item, { handle
 		return null;
 	}
 	return (
-		<MenuItem2
+		<MenuItem
 			css={css`
 				text-transform: capitalize;
 			`}
@@ -58,7 +57,7 @@ export const Dropdown: FC<DropdownProps> = ({
 	icon,
 	disabled,
 }) => (
-	<Select2
+	<Select
 		popoverProps={{ minimal: true }}
 		filterable={false}
 		activeItem={activeItem}
@@ -81,7 +80,7 @@ export const Dropdown: FC<DropdownProps> = ({
 			disabled={disabled}
 			small
 		/>
-	</Select2>
+	</Select>
 );
 
 const valueStyle = css`

diff --git a/applications/client/src/components/Forms/SettingsForm.tsx b/applications/client/src/components/Forms/SettingsForm.tsx
@@ -1,5 +1,5 @@
 import { Classes, FormGroup, Switch } from '@blueprintjs/core';
-import { TimezoneSelect } from '@blueprintjs/datetime2';
+import { TimezoneSelect } from '@blueprintjs/datetime';
 import { css } from '@emotion/react';
 import { SortDirection, useStore } from '@redeye/client/store';
 import { sortOptions } from '@redeye/client/views';

diff --git a/applications/client/src/components/Forms/UsernameInput.tsx b/applications/client/src/components/Forms/UsernameInput.tsx
@@ -1,7 +1,6 @@
-import { Classes } from '@blueprintjs/core';
-import { MenuItem2 } from '@blueprintjs/popover2';
+import { Classes, MenuItem } from '@blueprintjs/core';
 import type { ItemPredicate, SuggestProps } from '@blueprintjs/select';
-import { Suggest2, getCreateNewItem } from '@blueprintjs/select';
+import { Suggest, getCreateNewItem } from '@blueprintjs/select';
 import { Add16, User16 } from '@carbon/icons-react';
 import { ClassNames, css } from '@emotion/react';
 import { CarbonIcon, createState, escapeRegExpChars } from '@redeye/client/components';
@@ -52,7 +51,7 @@ export const UsernameInput = observer<UsernameInputProps>(
 			<ClassNames>
 				{({ css: classCss }) => (
 					// for the popoverProps.className
-					<Suggest2
+					<Suggest
 						cy-test="username"
 						openOnKeyDown
 						query={state.query}
@@ -80,20 +79,19 @@ export const UsernameInput = observer<UsernameInputProps>(
 							} as any
 						}
 						inputProps={{
-							value: state.query,
+							// value: state.query, // not needed in bp5
 							onBlur: () => updateUser(state.query),
 							type: 'text',
 							name: 'username',
 							autoComplete: 'username',
 							placeholder: 'user',
 							leftIcon: <CarbonIcon icon={User16} />,
 							large: true,
-							fill: true,
 						}}
 						itemRenderer={(user, { handleClick, modifiers }) => {
 							if (!modifiers.matchesPredicate) return null;
 							return (
-								<MenuItem2
+								<MenuItem
 									text={highlightText(user.name as string, state.query)}
 									active={modifiers.active}
 									disabled={modifiers.disabled}
@@ -104,7 +102,7 @@ export const UsernameInput = observer<UsernameInputProps>(
 							);
 						}}
 						createNewItemRenderer={(_, isActive: boolean) => (
-							<MenuItem2
+							<MenuItem
 								icon={<CarbonIcon icon={Add16} />}
 								text="New User"
 								disabled={disableCreateUser || store.graphqlStore.globalOperators.has(state.query)}

diff --git a/applications/client/src/views/Campaign/Explore/Panels/Beacon/BeaconRow.tsx b/applications/client/src/views/Campaign/Explore/Panels/Beacon/BeaconRow.tsx
@@ -149,7 +149,7 @@ export const BeaconRow = observer<BeaconRowProps>(({ beacon, ...props }) => {
 			{beacon != null && !store.appMeta.blueTeam && (
 				<QuickMetaPopoverButtonMenu
 					content={
-						// <MenuItem2 text="Add Comment" />
+						// <MenuItem text="Add Comment" />
 						<ShowHideMenuItem model={beacon} onClick={handleQuickMetaClick} />
 					}
 				/>

diff --git a/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx b/applications/client/src/views/Campaign/Explore/Panels/BulkEdit.tsx
@@ -1,4 +1,4 @@
-import { Button, Intent, Menu, Position } from '@blueprintjs/core';
+import { Button, Intent, Menu, Position, MenuItem } from '@blueprintjs/core';
 import { Edit16, View16, ViewOff16 } from '@carbon/icons-react';
 import { css } from '@emotion/react';
 import type { UseCreateState } from '@redeye/client/components';
@@ -10,7 +10,6 @@ import { useCallback } from 'react';
 import type { ComponentProps } from 'react';
 import type { UseMutationResult } from '@tanstack/react-query';
 import { InfoType } from '@redeye/client/types';
-import { MenuItem2 } from '@blueprintjs/popover2';
 import { ToggleHiddenDialog } from './Meta';
 
 type HostRowProps = ComponentProps<'div'> & {
@@ -135,7 +134,7 @@ export const BulkEdit = observer<HostRowProps>(
 						content={
 							<Menu>
 								{store.settings.showHidden && (
-									<MenuItem2
+									<MenuItem
 										cy-test="show"
 										text={`Show ${typeName === 'beacons' ? 'Beacon' : 'Host'}${count === 1 ? '' : 's'}`}
 										icon={<CarbonIcon icon={View16} css={iconStyle(true)} />}
@@ -147,7 +146,7 @@ export const BulkEdit = observer<HostRowProps>(
 										}
 									/>
 								)}
-								<MenuItem2
+								<MenuItem
 									cy-test="hide"
 									text={`Hide ${typeName === 'beacons' ? 'Beacon' : 'Host'}${count === 1 ? '' : 's'}`}
 									icon={<CarbonIcon icon={ViewOff16} css={iconStyle()} />}

diff --git a/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx b/applications/client/src/views/Campaign/Explore/Panels/Meta/BeaconMeta.tsx
@@ -1,5 +1,5 @@
 import { Button, InputGroup, MenuItem } from '@blueprintjs/core';
-import { DateInput2 } from '@blueprintjs/datetime2';
+import { DateInput } from '@blueprintjs/datetime';
 import { CarbonIcon, dateTimeFormat, isDefined } from '@redeye/client/components';
 import { createState } from '@redeye/client/components/mobx-create-state';
 import type {
@@ -20,7 +20,7 @@ import { observer } from 'mobx-react-lite';
 import moment from 'moment-timezone';
 import { useEffect } from 'react';
 import type { ItemRenderer } from '@blueprintjs/select';
-import { Select2 } from '@blueprintjs/select';
+import { Select } from '@blueprintjs/select';
 import { CaretDown16 } from '@carbon/icons-react';
 import { draft, model, Model, prop } from 'mobx-keystone';
 import type { NodeColor } from '@redeye/client/views';
@@ -210,7 +210,7 @@ export const BeaconMeta = observer((props) => {
 					<Txt>{beacon?.meta[0]?.maybeCurrent?.pid}</Txt>
 					<MetaLabel>Time of Death </MetaLabel>
 					<div cy-test="beacon-time-of-death">
-						<DateInput2
+						<DateInput
 							key={store.settings.timezone}
 							disabled={!!store.appMeta.blueTeam}
 							value={store.settings.momentTz(state.metaDraft.data.timeOfDeath).toISOString()}
@@ -246,7 +246,7 @@ export const BeaconMeta = observer((props) => {
 						</div>
 					</div>
 					<MetaLabel>Type</MetaLabel>
-					<Select2
+					<Select
 						disabled={!!store.appMeta.blueTeam}
 						items={beaconTypeSelectItems}
 						itemRenderer={renderSort}
@@ -266,7 +266,7 @@ export const BeaconMeta = observer((props) => {
 							rightIcon={<CarbonIcon icon={CaretDown16} />}
 							fill
 						/>
-					</Select2>
+					</Select>
 					<MetaLabel>Graph Appearance</MetaLabel>
 					<Flex gap={1}>
 						<NodePreviewBox color={state.metaDraft.data.color} shape={state.metaDraft.data.shape} />

diff --git a/applications/client/src/views/Campaign/Explore/Panels/Meta/ServerMeta.tsx b/applications/client/src/views/Campaign/Explore/Panels/Meta/ServerMeta.tsx
@@ -1,5 +1,5 @@
-import { Button, InputGroup } from '@blueprintjs/core';
-import { Select2 } from '@blueprintjs/select';
+import { Button, InputGroup, MenuItem } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
 import type { ItemRenderer } from '@blueprintjs/select';
 import { CaretDown16 } from '@carbon/icons-react';
 import { CarbonIcon } from '@redeye/client/components';
@@ -12,7 +12,6 @@ import type { NodeColor } from '@redeye/client/views';
 import { nodeColor, ToggleHiddenDialog } from '@redeye/client/views';
 import { useMutation } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
-import { MenuItem2 } from '@blueprintjs/popover2';
 import { Flex } from '@redeye/ui-styles';
 import { draft, Model, model, prop } from 'mobx-keystone';
 import {
@@ -110,13 +109,7 @@ export const ServerMeta = observer((props) => {
 			return null;
 		}
 		return (
-			<MenuItem2
-				active={modifiers.active}
-				key={item.key}
-				onClick={handleClick}
-				text={item.label}
-				cy-test={item.label}
-			/>
+			<MenuItem active={modifiers.active} key={item.key} onClick={handleClick} text={item.label} cy-test={item.label} />
 		);
 	};
 
@@ -142,7 +135,7 @@ export const ServerMeta = observer((props) => {
 						}
 					/>
 					<MetaLabel>Type</MetaLabel>
-					<Select2
+					<Select
 						disabled={!!store.appMeta.blueTeam}
 						items={serverTypeSelectItems}
 						itemRenderer={renderSort}
@@ -161,7 +154,7 @@ export const ServerMeta = observer((props) => {
 							rightIcon={<CarbonIcon icon={CaretDown16} />}
 							fill
 						/>
-					</Select2>
+					</Select>
 					<MetaLabel>Graph Appearance</MetaLabel>
 					<Flex gap={1}>
 						<NodePreviewBox color={state.metaDraft.data.color} type="server" />

diff --git a/applications/client/src/views/Campaign/Explore/Panels/Meta/components/NodeColorSelect.tsx b/applications/client/src/views/Campaign/Explore/Panels/Meta/components/NodeColorSelect.tsx
@@ -1,7 +1,7 @@
 import type { ButtonProps } from '@blueprintjs/core';
 import { Button, MenuItem } from '@blueprintjs/core';
-import type { ItemRenderer, Select2Props } from '@blueprintjs/select';
-import { Select2 } from '@blueprintjs/select';
+import type { ItemRenderer, SelectProps } from '@blueprintjs/select';
+import { Select } from '@blueprintjs/select';
 import { CaretDown16 } from '@carbon/icons-react';
 import { CarbonIcon } from '@redeye/client/components';
 import type { NodeColor, NodeIconProps } from '@redeye/client/views/Campaign/Graph';
@@ -10,8 +10,8 @@ import { largePopoverClassName } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import { NodePreview } from './NodePreview';
 
-type NodeColorSelectProps = Partial<Select2Props<NodeColorOption>> & {
-	onItemSelect: Select2Props<NodeColorOption>['onItemSelect'];
+type NodeColorSelectProps = Partial<SelectProps<NodeColorOption>> & {
+	onItemSelect: SelectProps<NodeColorOption>['onItemSelect'];
 	buttonProps?: ButtonProps;
 	nodeIconProps?: NodeIconProps;
 	value?: NodeColor;
@@ -31,7 +31,7 @@ export const NodeColorSelect = observer<NodeColorSelectProps>(
 		);
 
 		return (
-			<Select2
+			<Select
 				items={nodeColorOptions}
 				itemRenderer={itemRenderer}
 				filterable={false}
@@ -44,7 +44,7 @@ export const NodeColorSelect = observer<NodeColorSelectProps>(
 				{...props}
 			>
 				<Button text="Color" alignText="left" rightIcon={<CarbonIcon icon={CaretDown16} />} fill {...buttonProps} />
-			</Select2>
+			</Select>
 		);
 	}
 );

diff --git a/applications/client/src/views/Campaign/Explore/Panels/Meta/components/NodeShapeSelect.tsx b/applications/client/src/views/Campaign/Explore/Panels/Meta/components/NodeShapeSelect.tsx
@@ -1,7 +1,7 @@
 import type { ButtonProps } from '@blueprintjs/core';
 import { Button, MenuItem } from '@blueprintjs/core';
-import type { ItemRenderer, Select2Props } from '@blueprintjs/select';
-import { Select2 } from '@blueprintjs/select';
+import type { ItemRenderer, SelectProps } from '@blueprintjs/select';
+import { Select } from '@blueprintjs/select';
 import { CaretDown16 } from '@carbon/icons-react';
 import { CarbonIcon } from '@redeye/client/components';
 import type { NodeIconProps } from '@redeye/client/views/Campaign/Graph';
@@ -11,8 +11,8 @@ import { largePopoverClassName } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import { NodePreview } from './NodePreview';
 
-type NodeShapeSelectProps = Partial<Select2Props<NodeShape>> & {
-	onItemSelect: Select2Props<NodeShape>['onItemSelect'];
+type NodeShapeSelectProps = Partial<SelectProps<NodeShape>> & {
+	onItemSelect: SelectProps<NodeShape>['onItemSelect'];
 	buttonProps?: ButtonProps;
 	nodeIconProps?: NodeIconProps;
 };
@@ -31,7 +31,7 @@ export const NodeShapeSelect = observer<NodeShapeSelectProps>(
 		);
 
 		return (
-			<Select2
+			<Select
 				items={graphShapeOptions}
 				itemRenderer={itemRenderer}
 				filterable={false}
@@ -43,7 +43,7 @@ export const NodeShapeSelect = observer<NodeShapeSelectProps>(
 				{...props}
 			>
 				<Button text="Shape" alignText="left" rightIcon={<CarbonIcon icon={CaretDown16} />} fill {...buttonProps} />
-			</Select2>
+			</Select>
 		);
 	}
 );

diff --git a/applications/client/src/views/Campaign/Explore/Panels/QuickMeta.tsx b/applications/client/src/views/Campaign/Explore/Panels/QuickMeta.tsx
@@ -1,6 +1,5 @@
-import { Menu, Position } from '@blueprintjs/core';
-import type { MenuItem2Props } from '@blueprintjs/popover2';
-import { MenuItem2 } from '@blueprintjs/popover2';
+import { Menu, Position, MenuItem } from '@blueprintjs/core';
+import type { MenuItemProps } from '@blueprintjs/core';
 import { OverflowMenuVertical16, View16, ViewOff16 } from '@carbon/icons-react';
 import { css } from '@emotion/react';
 import { CarbonIcon } from '@redeye/client/components';
@@ -10,12 +9,12 @@ import type { PopoverButtonProps } from '@redeye/ui-styles';
 import { PopoverButton, popoverOffset } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 
-type ShowHideMenuItemProps = Partial<MenuItem2Props> & {
+type ShowHideMenuItemProps = Partial<MenuItemProps> & {
 	model: HostModel | ServerModel | BeaconModel;
 };
 
 export const ShowHideMenuItem = observer<ShowHideMenuItemProps>(({ model, ...props }) => (
-	<MenuItem2
+	<MenuItem
 		cy-test="show-hide-item"
 		text={`${model?.hidden ? 'Show ' : 'Hide '} ${
 			model instanceof BeaconModel

diff --git a/applications/client/src/views/Campaign/Explore/components/Comment/BeaconSuggest.tsx b/applications/client/src/views/Campaign/Explore/components/Comment/BeaconSuggest.tsx
@@ -1,13 +1,13 @@
-import type { ItemPredicate, ItemRenderer, Suggest2Props } from '@blueprintjs/select';
-import { Suggest2 } from '@blueprintjs/select';
+import type { ItemPredicate, ItemRenderer, SuggestProps } from '@blueprintjs/select';
+import { Suggest } from '@blueprintjs/select';
 import type { BeaconModel } from '@redeye/client/store';
 import { useStore } from '@redeye/client/store';
-import { MenuItem2 } from '@blueprintjs/popover2';
+import { MenuItem } from '@blueprintjs/core';
 import { observer } from 'mobx-react-lite';
 import { Txt } from '@redeye/ui-styles';
 import { BeaconSuggestedRow } from './BeaconSuggestedRow';
 
-export type BeaconSuggestProps = Partial<Suggest2Props<BeaconModel>>;
+export type BeaconSuggestProps = Partial<SuggestProps<BeaconModel>>;
 
 export const BeaconSuggest = observer<BeaconSuggestProps>(
 	({ onItemSelect: _onItemSelect, popoverProps, ...suggestProps }: BeaconSuggestProps) => {
@@ -31,7 +31,7 @@ export const BeaconSuggest = observer<BeaconSuggestProps>(
 				return null;
 			}
 			return (
-				<MenuItem2
+				<MenuItem
 					key={beaconModel.id}
 					onClick={handleClick}
 					shouldDismissPopover={false}
@@ -44,7 +44,7 @@ export const BeaconSuggest = observer<BeaconSuggestProps>(
 		const inputValueRenderer: BeaconSuggestProps['inputValueRenderer'] = (item) => item.computedNameWithHost;
 
 		return (
-			<Suggest2
+			<Suggest
 				items={beacons}
 				itemPredicate={findBeacon}
 				itemRenderer={renderMenuItem}
@@ -65,7 +65,7 @@ export const BeaconSuggest = observer<BeaconSuggestProps>(
 );
 
 const noResults = (
-	<MenuItem2
+	<MenuItem
 		disabled
 		text={
 			<Txt disabled italic>