Skip to content

Commit

Permalink
Adds conversation selector, custom localstorage keys, and UI cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@spong
spong committed May 10, 2023
1 parent 77af478 commit 3473f39
Show file tree
Hide file tree
Showing 8 changed files with 573 additions and 463 deletions.
6 changes: 3 additions & 3 deletions x-pack/plugins/security_solution/public/common/components/local_storage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import { useCallback, useEffect, useState } from 'react';
import { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react';

import { APP_ID } from '../../../../common/constants';

Expand All @@ -23,7 +23,7 @@ export const useLocalStorage = <T,>({
key,
plugin = APP_ID,
isInvalidDefault,
}: Props<T>): [T, (value: T) => void] => {
}: Props<T>): [T, (value: T) => void, Dispatch<SetStateAction<boolean>>] => {
const { storage } = useKibana().services;
const [initialized, setInitialized] = useState<boolean>(false);
const [_value, _setValue] = useState<T>(defaultValue);
Expand Down Expand Up @@ -52,5 +52,5 @@ export const useLocalStorage = <T,>({
}
}, [initialized, readValueFromLocalStorage]);

return [_value, setValue];
return [_value, setValue, setInitialized];
};
119 changes: 10 additions & 109 deletions ...ugins/security_solution/public/security_assistant/assistant_overlay/assistant_overlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
*/

import React, { useCallback, useState } from 'react';
import { EuiBadge, EuiButton, EuiFlexGroup, EuiFlexItem, EuiModal, EuiSpacer } from '@elastic/eui';
import { EuiModal, EuiSpacer } from '@elastic/eui';

import * as i18n from './translations';
import { SecurityAssistant } from '../security_assistant';
import useEvent from 'react-use/lib/useEvent';
import styled from 'styled-components';
import { QuickPrompts } from './quick_prompts';

const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;

Expand All @@ -21,10 +21,6 @@ const StyledEuiModal = styled(EuiModal)`
height: 100%;
`;

const FooterFlexGroup = styled(EuiFlexGroup)`
margin: 12px;
`;

interface AssistantOverlayProps {}

/**
Expand All @@ -35,131 +31,36 @@ export const AssistantOverlay: React.FC<AssistantOverlayProps> = React.memo(({})
const [isModalVisible, setIsModalVisible] = useState(false);
const [input, setInput] = useState<string | undefined>();

// const { getQuery } = useSecurityAssistantQuery({ data });

// const onStartConversation = useCallback(async () => {
// try {
// setQuery(await getQuery());
// setIsPopoverOpen((isOpen) => !isOpen);
// } catch (error) {
// toasts.addError(error, { title: i18n.ERROR_FETCHING_SECURITY_ASSISTANT_QUERY });
// }
// }, [getQuery, toasts]);

const cleanupAndCloseModal = useCallback(() => {
setIsModalVisible(false);
// setOverwrite(false);
// setOverwriteExceptions(false);
}, [setIsModalVisible]);

// const onImportComplete = useCallback(
// (callCleanup: boolean) => {
// // setIsImporting(false);
// // setSelectedFiles(null);
// importComplete();
//
// if (callCleanup) {
// importComplete();
// cleanupAndCloseModal();
// }
// },
// [cleanupAndCloseModal, importComplete]
// );

/**
* A function that reverses and array of strings and capitalizes the first character of each string
*/

// Register keyboard listener to show the modal when cmd + / is pressed

const onKeyDown = useCallback(
(event: KeyboardEvent) => {
if (event.key === ';' && (isMac ? event.metaKey : event.ctrlKey)) {
event.preventDefault();
setIsModalVisible(!isModalVisible);
// if (searchRef) {
// searchRef.focus();
// } else if (buttonRef) {
// (buttonRef.children[0] as HTMLButtonElement).click();
// }
}
// if (event.key === 'Escape' && isModalVisible) {
// setIsModalVisible(false);
// }
},
[isModalVisible]
);
useEvent('keydown', onKeyDown);

// Modal control functions
const cleanupAndCloseModal = useCallback(() => {
setIsModalVisible(false);
}, [setIsModalVisible]);

const handleCloseModal = useCallback(() => {
cleanupAndCloseModal();
}, [cleanupAndCloseModal]);

// const handleActionConnectorsCheckboxClick = useCallback(() => {
// setOverwriteActionConnectors((shouldOverwrite) => !shouldOverwrite);
// }, []);

return (
<>
{isModalVisible && (
<StyledEuiModal onClose={handleCloseModal}>
<SecurityAssistant input={input} />

<EuiSpacer size="s" />

<FooterFlexGroup gutterSize={'l'} justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize={'s'} alignItems="center">
<EuiFlexItem grow={false}>
<EuiBadge
color={'accent'}
onClick={() => setInput('Alert Summarization')}
onClickAriaLabel="Example of onClick event for the button"
>
{'Alert Summarization'}
</EuiBadge>
</EuiFlexItem>
<SecurityAssistant input={input} autoSendInput={false} />

<EuiFlexItem grow={false}>
<EuiBadge
color={'success'}
onClick={() => setInput('Rule Creation')}
onClickAriaLabel="Example of onClick event for the button"
>
{'Rule Creation'}
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBadge
color={'primary'}
onClick={() => setInput('Workflow Analysis')}
onClickAriaLabel="Example of onClick event for the button"
>
{'Workflow Analysis'}
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBadge
color={'warning'}
onClick={() => setInput('Threat Investigation Guides')}
onClickAriaLabel="Example of onClick event for the button"
>
{'Threat Investigation Guides'}
</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiSpacer size="xs" />

<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize={'l'}>
<EuiFlexItem>
<EuiButton data-test-subj="import-data-modal-button" fill>
{i18n.MAKE_IT_GO_BUTTON}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</FooterFlexGroup>
<QuickPrompts setInput={setInput} />
</StyledEuiModal>
)}
</>
Expand Down
46 changes: 46 additions & 0 deletions ...k/plugins/security_solution/public/security_assistant/assistant_overlay/quick_prompts.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui';
import styled from 'styled-components';

const QuickPromptsFlexGroup = styled(EuiFlexGroup)`
margin: 16px;
`;

type QuickPrompt = {
text: string;
color: string;
};
const quickPrompts: QuickPrompt[] = [
{ text: 'Alert Summarization', color: 'accent' },
{ text: 'Rule Creation', color: 'success' },
{ text: 'Workflow Analysis', color: 'primary' },
{ text: 'Threat Investigation Guides', color: 'warning' },
];
interface QuickPromptsProps {
setInput: (input: string) => void;
}
export const QuickPrompts: React.FC<QuickPromptsProps> = React.memo(({ setInput }) => {
return (
<QuickPromptsFlexGroup gutterSize="s" alignItems="center">
{quickPrompts.map((badge, index) => (
<EuiFlexItem key={index} grow={false}>
<EuiBadge
color={badge.color}
onClick={() => setInput(badge.text)}
onClickAriaLabel={badge.text}
>
{badge.text}
</EuiBadge>
</EuiFlexItem>
))}
</QuickPromptsFlexGroup>
);
});
QuickPrompts.displayName = 'QuickPrompts';
2 changes: 1 addition & 1 deletion x-pack/plugins/security_solution/public/security_assistant/new_chat/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const NewChatComponent: React.FC<{
panelPaddingSize="none"
>
<SecurityAssistantContainer>
<SecurityAssistant input={query} />
<SecurityAssistant input={query} localStorageKey={'alertSummary'} />
</SecurityAssistantContainer>
</EuiPopover>
);
Expand Down
Loading

0 comments on commit 3473f39

Please sign in to comment.