diff --git a/public/components/explorer/visualizations/__tests__/__snapshots__/datapanel.test.tsx.snap b/public/components/explorer/visualizations/__tests__/__snapshots__/datapanel.test.tsx.snap deleted file mode 100644 index 3aa9e30e6a..0000000000 --- a/public/components/explorer/visualizations/__tests__/__snapshots__/datapanel.test.tsx.snap +++ /dev/null @@ -1,6258 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Data panel component Renders data panel component 1`] = ` - - -
- -
- -
-
- - -
- - - - - -
-
- - - - - -
- -
-
- - -
- -
- - -
- -
-
- - - - Available fields - - - } - extraAction={ - - 20 - - } - id="1" - initialIsOpen={false} - isLoading={false} - isLoadingMessage={false} - paddingSize="none" - > -
-
- -
- - - 20 - - -
-
-
- -
-
- -
- -
- - - - - } - fieldInfoIcon={ - - } - fieldName={ - - agent - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - agent - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - bytes - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - bytes - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - clientip - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - clientip - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - event - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - event - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - extension - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - extension - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - geo - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - geo - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - host - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - host - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - index - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - index - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - ip - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - ip - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - machine - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - machine - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - memory - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - memory - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - message - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - message - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - phpmemory - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - phpmemory - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - referer - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - referer - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - request - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - request - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - response - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - response - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - tags - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - tags - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - timestamp - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - timestamp - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - url - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - url - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - utc_time - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - utc_time - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - -
-
-
- -
-
- - -
-
- -
- -
- - -`; diff --git a/public/components/explorer/visualizations/__tests__/__snapshots__/field_accordion.test.tsx.snap b/public/components/explorer/visualizations/__tests__/__snapshots__/field_accordion.test.tsx.snap deleted file mode 100644 index 3b69e89a7a..0000000000 --- a/public/components/explorer/visualizations/__tests__/__snapshots__/field_accordion.test.tsx.snap +++ /dev/null @@ -1,5890 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Visualization fields accordion component Renders fields accordion component 1`] = ` - - - - Available fields - - - } - extraAction={ - - 20 - - } - id="3367" - initialIsOpen={false} - isLoading={false} - isLoadingMessage={false} - paddingSize="none" - > -
-
- -
- - - 20 - - -
-
-
- -
-
- -
- -
- - - - - } - fieldInfoIcon={ - - } - fieldName={ - - agent - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - agent - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - bytes - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - bytes - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - clientip - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - clientip - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - event - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - event - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - extension - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - extension - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - geo - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - geo - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - host - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - host - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - index - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - index - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - ip - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - ip - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - machine - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - machine - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - memory - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - memory - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - message - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - message - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - phpmemory - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - phpmemory - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - referer - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - referer - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - request - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - request - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - response - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - response - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - tags - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - tags - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - timestamp - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - timestamp - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - url - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - url - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - utc_time - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - utc_time - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - -
-
-
- -
-
- - -`; diff --git a/public/components/explorer/visualizations/__tests__/__snapshots__/field_item.test.tsx.snap b/public/components/explorer/visualizations/__tests__/__snapshots__/field_item.test.tsx.snap deleted file mode 100644 index f896951af5..0000000000 --- a/public/components/explorer/visualizations/__tests__/__snapshots__/field_item.test.tsx.snap +++ /dev/null @@ -1,288 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Visualization field item component Renders field item component 1`] = ` - - - - - } - fieldInfoIcon={ - - } - fieldName={ - - agent - - } - isActive={false} - onClick={[Function]} - /> - - } - className="lnsFieldItem__popoverAnchor" - closePopover={[Function]} - data-test-subj="lnsFieldListPanelField" - display="block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelClassName="lnsFieldItem__fieldPanel" - panelPaddingSize="m" - > - -
-
- - - - } - fieldInfoIcon={ - - } - fieldName={ - - agent - - } - isActive={false} - onClick={[Function]} - onDragEnd={[Function]} - onDragLeave={[Function]} - onDragOver={[Function]} - onDragStart={[Function]} - onDrop={[Function]} - > -
- -
- - - -
-
- - - - -`; diff --git a/public/components/explorer/visualizations/__tests__/__snapshots__/field_list.test.tsx.snap b/public/components/explorer/visualizations/__tests__/__snapshots__/field_list.test.tsx.snap deleted file mode 100644 index 5ffdbb49d1..0000000000 --- a/public/components/explorer/visualizations/__tests__/__snapshots__/field_list.test.tsx.snap +++ /dev/null @@ -1,234 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Visualization field list component Renders field list component 1`] = ` - -
-
- - - - Available fields - - - } - extraAction={ - - 0 - - } - id="3327" - initialIsOpen={false} - isLoading={false} - isLoadingMessage={false} - paddingSize="none" - > -
-
- -
- - - 0 - - -
-
-
- -
-
- -
- -
-
-
- -
-
- - -
-
- -`; diff --git a/public/components/explorer/visualizations/__tests__/__snapshots__/lens_field_icon.test.tsx.snap b/public/components/explorer/visualizations/__tests__/__snapshots__/lens_field_icon.test.tsx.snap deleted file mode 100644 index d9cbea0a6e..0000000000 --- a/public/components/explorer/visualizations/__tests__/__snapshots__/lens_field_icon.test.tsx.snap +++ /dev/null @@ -1,55 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Visualization field icon component Renders field icon component 1`] = ` - - - - - - - - - - - - - -`; diff --git a/public/components/explorer/visualizations/__tests__/datapanel.test.tsx b/public/components/explorer/visualizations/__tests__/datapanel.test.tsx deleted file mode 100644 index d6f99c3389..0000000000 --- a/public/components/explorer/visualizations/__tests__/datapanel.test.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { configure, mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import React from 'react'; -import { waitFor } from '@testing-library/react'; -import { DataPanel } from '../datapanel'; -import { - SELECTED_FIELDS, - AVAILABLE_FIELDS, - UNSELECTED_FIELDS, - QUERIED_FIELDS -} from '../../../../../common/constants/explorer'; -import { - AVAILABLE_FIELDS as SIDEBAR_AVAILABLE_FIELDS, - QUERY_FIELDS -} from '../../../../../test/event_analytics_constants'; - -describe('Data panel component', () => { - configure({ adapter: new Adapter() }); - - const explorerFields = { - [SELECTED_FIELDS]: [], - [UNSELECTED_FIELDS]: [], - [AVAILABLE_FIELDS]: SIDEBAR_AVAILABLE_FIELDS, - [QUERIED_FIELDS]: QUERY_FIELDS - }; - it('Renders data panel component', async () => { - - const wrapper = mount( - - ); - - wrapper.update(); - - await waitFor(() => { - expect(wrapper).toMatchSnapshot(); - }); - }); -}); \ No newline at end of file diff --git a/public/components/explorer/visualizations/__tests__/field_accordion.test.tsx b/public/components/explorer/visualizations/__tests__/field_accordion.test.tsx deleted file mode 100644 index d171927b39..0000000000 --- a/public/components/explorer/visualizations/__tests__/field_accordion.test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { configure, mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import React from 'react'; -import { waitFor } from '@testing-library/react'; -import { FieldsAccordion } from '../fields_accordion'; -import { - AVAILABLE_FIELDS -} from '../../../../../test/event_analytics_constants'; - -describe('Visualization fields accordion component', () => { - configure({ adapter: new Adapter() }); - - it('Renders fields accordion component', async () => { - - const wrapper = mount( - - ); - - wrapper.update(); - - await waitFor(() => { - expect(wrapper).toMatchSnapshot(); - }); - }); -}); diff --git a/public/components/explorer/visualizations/__tests__/field_item.test.tsx b/public/components/explorer/visualizations/__tests__/field_item.test.tsx deleted file mode 100644 index c5e4cd8f83..0000000000 --- a/public/components/explorer/visualizations/__tests__/field_item.test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { configure, mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import React from 'react'; -import { waitFor } from '@testing-library/react'; -import { FieldItem } from '../field_item'; -import { - AVAILABLE_FIELDS -} from '../../../../../test/event_analytics_constants'; - -describe('Visualization field item component', () => { - configure({ adapter: new Adapter() }); - - it('Renders field item component', async () => { - - const wrapper = mount( - - ); - - wrapper.update(); - - await waitFor(() => { - expect(wrapper).toMatchSnapshot(); - }); - }); -}); diff --git a/public/components/explorer/visualizations/__tests__/field_list.test.tsx b/public/components/explorer/visualizations/__tests__/field_list.test.tsx deleted file mode 100644 index 15f97b5c2e..0000000000 --- a/public/components/explorer/visualizations/__tests__/field_list.test.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { configure, mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import React from 'react'; -import { waitFor } from '@testing-library/react'; -import { FieldList } from '../fieldList'; -import { - AVAILABLE_FIELDS -} from '../../../../../test/event_analytics_constants'; - -describe('Visualization field list component', () => { - configure({ adapter: new Adapter() }); - - it('Renders field list component', async () => { - - const wrapper = mount( - - ); - - wrapper.update(); - - await waitFor(() => { - expect(wrapper).toMatchSnapshot(); - }); - }); -}); diff --git a/public/components/explorer/visualizations/__tests__/lens_field_icon.test.tsx b/public/components/explorer/visualizations/__tests__/lens_field_icon.test.tsx deleted file mode 100644 index bdc846feb9..0000000000 --- a/public/components/explorer/visualizations/__tests__/lens_field_icon.test.tsx +++ /dev/null @@ -1,29 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { configure, mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import React from 'react'; -import { waitFor } from '@testing-library/react'; -import { LensFieldIcon } from '../lens_field_icon'; - -describe('Visualization field icon component', () => { - configure({ adapter: new Adapter() }); - - it('Renders field icon component', async () => { - - const wrapper = mount( - - ); - - wrapper.update(); - - await waitFor(() => { - expect(wrapper).toMatchSnapshot(); - }); - }); -}); \ No newline at end of file diff --git a/public/components/explorer/visualizations/_mixins.scss b/public/components/explorer/visualizations/_mixins.scss index ae22f3905f..c30d4dec12 100644 --- a/public/components/explorer/visualizations/_mixins.scss +++ b/public/components/explorer/visualizations/_mixins.scss @@ -6,7 +6,7 @@ // sass-lint:disable-block indentation, no-color-keywords // SASSTODO: Create this in EUI -@mixin lnsOverflowShadowHorizontal { +@mixin vizOverflowShadowHorizontal { $hideHeight: $euiScrollBarCorner * 1.25; mask-image: linear-gradient( to right, @@ -18,7 +18,7 @@ } // Static styles for a draggable item -@mixin lnsDraggable { +@mixin vizDraggable { @include euiSlightShadow; background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade); border: $euiBorderWidthThin dashed transparent; @@ -26,29 +26,29 @@ } // Static styles for a drop area -@mixin lnsDroppable { +@mixin vizDroppable { border: $euiBorderWidthThin dashed $euiBorderColor; } // Hovering state for drag item and drop area -@mixin lnsDragDropHover { +@mixin vizDragDropHover { &:hover { border: $euiBorderWidthThin dashed $euiColorMediumShade; } } // Style for drop area when there's an item being dragged -@mixin lnsDroppableActive { +@mixin vizDroppableActive { background-color: transparentize($euiColorVis0, .9); } // Style for drop area while hovering with item -@mixin lnsDroppableActiveHover { +@mixin vizDroppableActiveHover { background-color: transparentize($euiColorVis0, .75); border: $euiBorderWidthThin dashed $euiColorVis0; } // Style for drop area that is not allowed for current item -@mixin lnsDroppableNotAllowed { +@mixin vizDroppableNotAllowed { opacity: .5; } diff --git a/public/components/explorer/visualizations/_variables.scss b/public/components/explorer/visualizations/_variables.scss index a4248f8142..e62f5a76a2 100644 --- a/public/components/explorer/visualizations/_variables.scss +++ b/public/components/explorer/visualizations/_variables.scss @@ -3,8 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ -$lnsPanelMinWidth: $euiSize * 18; +$vizPanelMinWidth: $euiSize * 18; // These sizes also match canvas' page thumbnails for consistency -$lnsSuggestionHeight: 100px; -$lnsSuggestionWidth: 150px; +$vizSuggestionHeight: 100px; +$vizSuggestionWidth: 150px; diff --git a/public/components/explorer/visualizations/app.scss b/public/components/explorer/visualizations/app.scss index 2f01e1b8e9..1f60b143bc 100644 --- a/public/components/explorer/visualizations/app.scss +++ b/public/components/explorer/visualizations/app.scss @@ -3,13 +3,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -.lnsAppWrapper { +.vizAppWrapper { display: flex; flex-direction: column; flex-grow: 1; } -.lnsApp { +.vizApp { position: absolute; top: 0; bottom: 0; @@ -21,11 +21,11 @@ overflow: hidden; } -.lnsApp__header { +.vizApp__header { border-bottom: $euiBorderThin; } -.lnsApp__frame { +.vizApp__frame { position: relative; display: flex; flex-direction: column; diff --git a/public/components/explorer/visualizations/config_panel/config_panel.scss b/public/components/explorer/visualizations/config_panel/config_panel.scss index 2a129f430e..a0165edd44 100644 --- a/public/components/explorer/visualizations/config_panel/config_panel.scss +++ b/public/components/explorer/visualizations/config_panel/config_panel.scss @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -.lnsConfigPanel__addLayerBtn { +.vizConfigPanel__addLayerBtn { color: transparentize($euiColorMediumShade, .3); // Remove EuiButton's default shadow to make button more subtle // sass-lint:disable-block no-important diff --git a/public/components/explorer/visualizations/config_panel/config_panel.tsx b/public/components/explorer/visualizations/config_panel/config_panel.tsx index 02e7df2e88..c51d87522b 100644 --- a/public/components/explorer/visualizations/config_panel/config_panel.tsx +++ b/public/components/explorer/visualizations/config_panel/config_panel.tsx @@ -189,7 +189,7 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback }: any) => { return (
- +    {label}
diff --git a/public/components/explorer/visualizations/datapanel.scss b/public/components/explorer/visualizations/datapanel.scss deleted file mode 100644 index 9e97b10582..0000000000 --- a/public/components/explorer/visualizations/datapanel.scss +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -.lnsInnerIndexPatternDataPanel { - width: 100%; - height: 100%; - padding: $euiSize $euiSize 0; -} - -.lnsInnerIndexPatternDataPanel__header { - display: flex; - align-items: center; - margin-bottom: $euiSizeS; -} - -.lnsInnerIndexPatternDataPanel__fieldItems { - // Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds - padding: $euiSizeXS; -} - -.lnsInnerIndexPatternDataPanel__textField { - @include euiFormControlLayoutPadding(1, 'right'); - @include euiFormControlLayoutPadding(1, 'left'); -} - -.lnsInnerIndexPatternDataPanel__filterType { - font-size: $euiFontSizeS; - padding: $euiSizeS; - border-bottom: 1px solid $euiColorLightestShade; -} - -.lnsInnerIndexPatternDataPanel__filterTypeInner { - display: flex; - align-items: center; - - .lnsFieldListPanel__fieldIcon { - margin-right: $euiSizeS; - } -} diff --git a/public/components/explorer/visualizations/datapanel.tsx b/public/components/explorer/visualizations/datapanel.tsx deleted file mode 100644 index deccff2994..0000000000 --- a/public/components/explorer/visualizations/datapanel.tsx +++ /dev/null @@ -1,72 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import './datapanel.scss'; -import './field_item.scss'; -import React, { useState } from 'react'; -import _ from 'lodash'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiFormControlLayout, - EuiSpacer -} from '@elastic/eui'; -import { i18n } from '@osd/i18n'; -import { FieldList } from './fieldList'; - -export const DataPanel = (props: any) => { - - const fields = props.explorerFields?.availableFields; - - const [searchTerm, setSearchTerm] = useState(''); - - return ( - - - {}, - }} - > - { - setSearchTerm(e.target.value); - }} - aria-label={i18n.translate('xpack.lens.indexPatterns.filterByNameAriaLabel', { - defaultMessage: 'Search fields', - })} - /> - - - - - searchTerm === '' || field.name.indexOf(searchTerm) !== -1) } - /> - - - ); -} \ No newline at end of file diff --git a/public/components/explorer/visualizations/drag_drop/drag_drop.scss b/public/components/explorer/visualizations/drag_drop/drag_drop.scss deleted file mode 100644 index cc5399d133..0000000000 --- a/public/components/explorer/visualizations/drag_drop/drag_drop.scss +++ /dev/null @@ -1,59 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -@import '../variables'; -@import '../mixins'; - -.lnsDragDrop { - transition: background-color $euiAnimSpeedFast ease-in-out, border-color $euiAnimSpeedFast ease-in-out; -} - -// Draggable item -.lnsDragDrop-isDraggable { - @include lnsDraggable; - @include lnsDragDropHover; - - // Include a possible nested button like when using FieldButton - > .kbnFieldButton__button { - cursor: grab; - } - - &:focus { - @include euiFocusRing; - } -} - -// Draggable item when it is moving -.lnsDragDrop-isHidden { - opacity: 0; -} - -// Drop area -.lnsDragDrop-isDroppable { - @include lnsDroppable; -} - -// Drop area when there's an item being dragged -.lnsDragDrop-isDropTarget { - @include lnsDroppableActive; -} - -// Drop area while hovering with item -.lnsDragDrop-isActiveDropTarget { - @include lnsDroppableActiveHover; -} - -// Drop area that is not allowed for current item -.lnsDragDrop-isNotDroppable { - @include lnsDroppableNotAllowed; -} - -// Drop area will be replacing existing content -.lnsDragDrop-isReplacing { - &, - .lnsLayerPanel__triggerLink { - text-decoration: line-through; - } -} diff --git a/public/components/explorer/visualizations/drag_drop/drag_drop.tsx b/public/components/explorer/visualizations/drag_drop/drag_drop.tsx deleted file mode 100644 index 2d47eb1755..0000000000 --- a/public/components/explorer/visualizations/drag_drop/drag_drop.tsx +++ /dev/null @@ -1,249 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import './drag_drop.scss'; - -import React, { useState, useContext } from 'react'; -import classNames from 'classnames'; -import { DragContext } from './providers'; -// import { trackUiEvent } from '../lens_ui_telemetry'; - -type DroppableEvent = React.DragEvent; - -/** - * A function that handles a drop event. - */ -export type DropHandler = (item: unknown) => void; - -/** - * The base props to the DragDrop component. - */ -interface BaseProps { - /** - * The CSS class(es) for the root element. - */ - className?: string; - - /** - * The event handler that fires when an item - * is dropped onto this DragDrop component. - */ - onDrop?: DropHandler; - - /** - * The value associated with this item, if it is draggable. - * If this component is dragged, this will be the value of - * "dragging" in the root drag/drop context. - */ - value?: unknown; - - /** - * Optional comparison function to check whether a value is the dragged one - */ - isValueEqual?: (value1: unknown, value2: unknown) => boolean; - - /** - * The React element which will be passed the draggable handlers - */ - children: React.ReactElement; - - /** - * Indicates whether or not the currently dragged item - * can be dropped onto this component. - */ - droppable?: boolean; - - /** - * Additional class names to apply when another element is over the drop target - */ - getAdditionalClassesOnEnter?: () => string; - - /** - * The optional test subject associated with this DOM element. - */ - 'data-test-subj'?: string; - - /** - * Indicates to the user whether the currently dragged item - * will be moved or copied - */ - dragType?: 'copy' | 'move'; - - /** - * Indicates to the user whether the drop action will - * replace something that is existing or add a new one - */ - dropType?: 'add' | 'replace'; -} - -/** - * The props for a draggable instance of that component. - */ -interface DraggableProps extends BaseProps { - /** - * Indicates whether or not this component is draggable. - */ - draggable: true; - /** - * The label, which should be attached to the drag event, and which will e.g. - * be used if the element will be dropped into a text field. - */ - label: string; -} - -/** - * The props for a non-draggable instance of that component. - */ -interface NonDraggableProps extends BaseProps { - /** - * Indicates whether or not this component is draggable. - */ - draggable?: false; -} - -type Props = DraggableProps | NonDraggableProps; - -/** - * A draggable / droppable item. Items can be both draggable and droppable at - * the same time. - * - * @param props - */ - -export const DragDrop = (props: Props) => { - const { dragging, setDragging } = useContext(DragContext); - const { value, draggable, droppable, isValueEqual } = props; - return ( - - ); -}; - -const DragDropInner = React.memo(function DragDropInner( - props: Props & { - dragging: unknown; - setDragging: (dragging: unknown) => void; - isDragging: boolean; - isNotDroppable: boolean; - } -) { - const [state, setState] = useState({ - isActive: false, - dragEnterClassNames: '', - }); - const { - className, - onDrop, - value, - children, - droppable, - draggable, - dragging, - setDragging, - isDragging, - isNotDroppable, - dragType = 'copy', - dropType = 'add', - } = props; - - const isMoveDragging = isDragging && dragType === 'move'; - - const classes = classNames( - 'lnsDragDrop', - { - 'lnsDragDrop-isDraggable': draggable, - 'lnsDragDrop-isDragging': isDragging, - 'lnsDragDrop-isHidden': isMoveDragging, - 'lnsDragDrop-isDroppable': !draggable, - 'lnsDragDrop-isDropTarget': droppable, - 'lnsDragDrop-isActiveDropTarget': droppable && state.isActive, - 'lnsDragDrop-isNotDroppable': !isMoveDragging && isNotDroppable, - 'lnsDragDrop-isReplacing': droppable && state.isActive && dropType === 'replace', - }, - className, - state.dragEnterClassNames - ); - - const dragStart = (e: DroppableEvent) => { - // Setting stopPropgagation causes Chrome failures, so - // we are manually checking if we've already handled this - // in a nested child, and doing nothing if so... - if (e.dataTransfer.getData('text')) { - return; - } - - // We only can reach the dragStart method if the element is draggable, - // so we know we have DraggableProps if we reach this code. - e.dataTransfer.setData('text', (props as DraggableProps).label); - - // Chrome causes issues if you try to render from within a - // dragStart event, so we drop a setTimeout to avoid that. - setTimeout(() => setDragging(value)); - }; - - const dragEnd = (e: DroppableEvent) => { - e.stopPropagation(); - setDragging(undefined); - }; - - const dragOver = (e: DroppableEvent) => { - if (!droppable) { - return; - } - - e.preventDefault(); - - // An optimization to prevent a bunch of React churn. - if (!state.isActive) { - setState({ - ...state, - isActive: true, - dragEnterClassNames: props.getAdditionalClassesOnEnter - ? props.getAdditionalClassesOnEnter() - : '', - }); - } - }; - - const dragLeave = () => { - setState({ ...state, isActive: false, dragEnterClassNames: '' }); - }; - - const drop = (e: DroppableEvent) => { - e.preventDefault(); - e.stopPropagation(); - - setState({ ...state, isActive: false, dragEnterClassNames: '' }); - setDragging(undefined); - - if (onDrop && droppable) { - // trackUiEvent('drop_total'); - onDrop(dragging); - } - }; - - return React.cloneElement(children, { - 'data-test-subj': props['data-test-subj'] || 'lnsDragDrop', - className: classNames(children.props.className, classes), - onDragOver: dragOver, - onDragLeave: dragLeave, - onDrop: drop, - draggable, - onDragEnd: dragEnd, - onDragStart: dragStart, - }); -}); diff --git a/public/components/explorer/visualizations/drag_drop/index.ts b/public/components/explorer/visualizations/drag_drop/index.ts deleted file mode 100644 index e2a5489cd1..0000000000 --- a/public/components/explorer/visualizations/drag_drop/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -export * from './providers'; -export * from './drag_drop'; diff --git a/public/components/explorer/visualizations/drag_drop/providers.tsx b/public/components/explorer/visualizations/drag_drop/providers.tsx deleted file mode 100644 index d5105277bb..0000000000 --- a/public/components/explorer/visualizations/drag_drop/providers.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React, { useState, useMemo } from 'react'; - -/** - * The shape of the drag / drop context. - */ -export interface DragContextState { - /** - * The item being dragged or undefined. - */ - dragging: unknown; - - /** - * Set the item being dragged. - */ - setDragging: (dragging: unknown) => void; -} - -/** - * The drag / drop context singleton, used like so: - * - * const { dragging, setDragging } = useContext(DragContext); - */ -export const DragContext = React.createContext({ - dragging: undefined, - setDragging: () => {}, -}); - -/** - * The argument to DragDropProvider. - */ -export interface ProviderProps { - /** - * The item being dragged. If unspecified, the provider will - * behave as if it is the root provider. - */ - dragging: unknown; - - /** - * Sets the item being dragged. If unspecified, the provider - * will behave as if it is the root provider. - */ - setDragging: (dragging: unknown) => void; - - /** - * The React children. - */ - children: React.ReactNode; -} - -/** - * A React provider that tracks the dragging state. This should - * be placed at the root of any React application that supports - * drag / drop. - * - * @param props - */ -export function RootDragDropProvider({ children }: { children: React.ReactNode }) { - const [state, setState] = useState<{ dragging: unknown }>({ - dragging: undefined, - }); - const setDragging = useMemo(() => (dragging: unknown) => setState({ dragging }), [setState]); - - return ( - - {children} - - ); -} - -/** - * A React drag / drop provider that derives its state from a RootDragDropProvider. If - * part of a React application is rendered separately from the root, this provider can - * be used to enable drag / drop functionality within the disconnected part. - * - * @param props - */ -export function ChildDragDropProvider({ dragging, setDragging, children }: ProviderProps) { - const value = useMemo(() => ({ dragging, setDragging }), [setDragging, dragging]); - return {children}; -} diff --git a/public/components/explorer/visualizations/drag_drop/readme.md b/public/components/explorer/visualizations/drag_drop/readme.md deleted file mode 100644 index 8d11cb6226..0000000000 --- a/public/components/explorer/visualizations/drag_drop/readme.md +++ /dev/null @@ -1,69 +0,0 @@ -# Drag / Drop - -This is a simple drag / drop mechanism that plays nice with React. - -We aren't using EUI or another library, due to the fact that Lens visualizations and datasources may or may not be written in React. Even visualizations which are written in React will end up having their own ReactDOM.render call, and in that sense will be a standalone React application. We want to enable drag / drop across React and native DOM boundaries. - -## Getting started - -First, place a RootDragDropProvider at the root of your application. - -```js - - ... your app here ... - -``` - -If you have a child React application (e.g. a visualization), you will need to pass the drag / drop context down into it. This can be obtained like so: - -```js -const context = useContext(DragContext); -``` - -In your child application, place a `ChildDragDropProvider` at the root of that, and spread the context into it: - -```js - - ... your child app here ... - -``` - -This enables your child application to share the same drag / drop context as the root application. - -## Dragging - -An item can be both draggable and droppable at the same time, but for simplicity's sake, we'll treat these two cases separately. - -To enable dragging an item, use `DragDrop` with both a `draggable` and a `value` attribute. - -```js -
- {fields.map(f => ( - - {f.name} - - ))} -
-``` - -## Dropping - -To enable dropping, use `DragDrop` with both a `droppable` attribute and an `onDrop` handler attribute. Droppable should only be set to true if there is an item being dragged, and if a drop of the dragged item is supported. - -```js -const { dragging } = useContext(DragContext); - -return ( - onChange([...items, item])} - > - {items.map(x =>
{x.name}
)} - -); -``` - -## Limitations - -Currently this is a very simple drag / drop mechanism. We don't support reordering out of the box, though it could probably be built on top of this solution without modification of the core. diff --git a/public/components/explorer/visualizations/fieldList.tsx b/public/components/explorer/visualizations/fieldList.tsx deleted file mode 100644 index 0375cd680c..0000000000 --- a/public/components/explorer/visualizations/fieldList.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import { FieldsAccordion } from './fields_accordion'; - -export const FieldList = ( - { - fields, - id - }: any -) => { - - return ( -
-
- { - <> - - - } -
-
- ); -}; \ No newline at end of file diff --git a/public/components/explorer/visualizations/field_item.scss b/public/components/explorer/visualizations/field_item.scss deleted file mode 100644 index 670884bb9d..0000000000 --- a/public/components/explorer/visualizations/field_item.scss +++ /dev/null @@ -1,53 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -.lnsFieldItem { - .lnsFieldItem__infoIcon { - visibility: hidden; - opacity: 0; - } - - &:hover:not([class*='isActive']) { - cursor: grab; - - .lnsFieldItem__infoIcon { - visibility: visible; - opacity: 1; - transition: opacity $euiAnimSpeedFast ease-in-out 1s; - } - } -} - -.lnsFieldItem--missing { - background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade); - color: $euiColorDarkShade; -} - -.lnsFieldItem__topValue { - margin-bottom: $euiSizeS; - - &:last-of-type { - margin-bottom: 0; - } -} - -.lnsFieldItem__topValueProgress { - background-color: $euiColorLightestShade; - - // sass-lint:disable-block no-vendor-prefixes - &::-webkit-progress-bar { - background-color: $euiColorLightestShade; - } -} - -.lnsFieldItem__fieldPanel { - min-width: 260px; - max-width: 300px; -} - -.lnsFieldItem__buttonGroup { - // Enforce lowercase for buttons or else some browsers inherit all caps from flyout title - text-transform: none; -} diff --git a/public/components/explorer/visualizations/field_item.tsx b/public/components/explorer/visualizations/field_item.tsx deleted file mode 100644 index 0405b3df0d..0000000000 --- a/public/components/explorer/visualizations/field_item.tsx +++ /dev/null @@ -1,108 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import './field_item.scss'; - -import React, { useState } from 'react'; -import { - EuiIconTip, - EuiPopover -} from '@elastic/eui'; -import { i18n } from '@osd/i18n'; -import { EuiHighlight } from '@elastic/eui'; -import { FieldButton } from '../../common/field_button'; -import { DragDrop } from './drag_drop'; -import { LensFieldIcon } from './lens_field_icon'; - -import { debouncedComponent } from '../../common/debounced_component'; - -function wrapOnDot(str?: string) { - // u200B is a non-width white-space character, which allows - // the browser to efficiently word-wrap right after the dot - // without us having to draw a lot of extra DOM elements, etc - return str ? str.replace(/\./g, '.\u200B') : ''; -} - -export const InnerFieldItem = function InnerFieldItem(props: any) { - const { - field, - highlight, - exists, - hideDetails, - } = props; - - const [infoIsOpen, setOpen] = useState(false); - - function togglePopover() {} - - const lensFieldIcon = ; - const lensInfoIcon = ( - - ); - return ( - ('.application') || undefined} - button={ - - - {wrapOnDot(field.name)} - - } - fieldInfoIcon={lensInfoIcon} - /> - - } - isOpen={infoIsOpen} - closePopover={() => setOpen(false)} - anchorPosition="rightUp" - panelClassName="lnsFieldItem__fieldPanel" - > - - ); -}; - -export const FieldItem = debouncedComponent(InnerFieldItem); diff --git a/public/components/explorer/visualizations/field_list.scss b/public/components/explorer/visualizations/field_list.scss deleted file mode 100644 index 33faa8dfe7..0000000000 --- a/public/components/explorer/visualizations/field_list.scss +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/** - * 1. Don't cut off the shadow of the field items - */ - -.lnsIndexPatternFieldList { - @include euiOverflowShadow; - @include euiScrollBar; - margin-left: -$euiSize; /* 1 */ - position: relative; - flex-grow: 1; - overflow: auto; -} - -.lnsIndexPatternFieldList__accordionContainer { - padding-top: $euiSizeS; - position: absolute; - top: 0; - left: $euiSize; /* 1 */ - right: $euiSizeXS; /* 1 */ -} diff --git a/public/components/explorer/visualizations/fields_accordion.tsx b/public/components/explorer/visualizations/fields_accordion.tsx deleted file mode 100644 index 955558d3d7..0000000000 --- a/public/components/explorer/visualizations/fields_accordion.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import './datapanel.scss'; -import React, { memo, useCallback } from 'react'; -import { i18n } from '@osd/i18n'; -import { - EuiText, - EuiNotificationBadge, - EuiSpacer, - EuiAccordion, - EuiLoadingSpinner, - EuiIconTip, -} from '@elastic/eui'; -import { FieldItem } from './field_item'; - -export const InnerFieldsAccordion = function InnerFieldsAccordion({ - id, - label, - isFiltered, - paginatedFields, - showExistenceFetchError, -}: any) { - const renderField = useCallback( - (field) => ( - - ), - [] - ); - - return ( - - {label} - - } - extraAction={ - showExistenceFetchError ? ( - - ) : true ? ( - - {paginatedFields?.length} - - ) : ( - - ) - } - > - -
- {paginatedFields && paginatedFields.map(renderField)} -
- - ); -}; - -export const FieldsAccordion = memo(InnerFieldsAccordion); diff --git a/public/components/explorer/visualizations/frame_layout.scss b/public/components/explorer/visualizations/frame_layout.scss index 8d07d5a0a9..f80bb2dde6 100644 --- a/public/components/explorer/visualizations/frame_layout.scss +++ b/public/components/explorer/visualizations/frame_layout.scss @@ -3,13 +3,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -$lnsPanelMinWidth: $euiSize * 18; +$vizPanelMinWidth: $euiSize * 18; // These sizes also match canvas' page thumbnails for consistency -$lnsSuggestionHeight: 100px; -$lnsSuggestionWidth: 150px; +$vizSuggestionHeight: 100px; +$vizSuggestionWidth: 150px; -.lnsFrameLayout { +.vizFrameLayout { padding: 0; // position: absolute; top: 0; @@ -20,15 +20,15 @@ $lnsSuggestionWidth: 150px; flex-direction: column; } -.lnsFrameLayout__pageContent { +.vizFrameLayout__pageContent { display: flex; overflow: hidden; flex-grow: 1; } -.lnsFrameLayout__pageBody { +.vizFrameLayout__pageBody { @include euiScrollBar; - min-width: $lnsPanelMinWidth + $euiSizeXL; + min-width: $vizPanelMinWidth + $euiSizeXL; max-height: 100%; overflow: hidden auto; // Leave out bottom padding so the suggestions scrollbar stays flush to window edge @@ -41,23 +41,23 @@ $lnsSuggestionWidth: 150px; } } -.lnsFrameLayout__sidebar { +.vizFrameLayout__sidebar { margin: 0 16px 0; flex: 1 0 18%; - min-width: $lnsPanelMinWidth + $euiSize; + min-width: $vizPanelMinWidth + $euiSize; display: flex; flex-direction: column; position: relative; } -.lnsFrameLayout__sidebar--right { +.vizFrameLayout__sidebar--right { flex-basis: 25%; background-color: lightOrDarkTheme($euiColorLightestShade, $euiColorInk); - min-width: $lnsPanelMinWidth + $euiSizeXL; + min-width: $vizPanelMinWidth + $euiSizeXL; max-width: $euiFormMaxWidth + $euiSizeXXL; max-height: 100%; - .lnsConfigPanel { + .vizConfigPanel { @include euiScrollBar; padding: $euiSize 0 $euiSize $euiSize; overflow-x: hidden; diff --git a/public/components/explorer/visualizations/frame_layout.tsx b/public/components/explorer/visualizations/frame_layout.tsx index 86781b213f..6f6c8baad1 100644 --- a/public/components/explorer/visualizations/frame_layout.tsx +++ b/public/components/explorer/visualizations/frame_layout.tsx @@ -9,7 +9,6 @@ import React from 'react'; import { EuiPage, EuiPageSideBar, EuiPageBody } from '@elastic/eui'; export interface FrameLayoutProps { - dataPanel: React.ReactNode; configPanel?: React.ReactNode; suggestionsPanel?: React.ReactNode; workspacePanel?: React.ReactNode; @@ -17,12 +16,12 @@ export interface FrameLayoutProps { export function FrameLayout(props: FrameLayoutProps) { return ( - -
- + +
+ {props.workspacePanel} - + {props.configPanel}
diff --git a/public/components/explorer/visualizations/lens_field_icon.tsx b/public/components/explorer/visualizations/lens_field_icon.tsx deleted file mode 100644 index 59c947bce4..0000000000 --- a/public/components/explorer/visualizations/lens_field_icon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import { FieldIcon } from '../../common/field_icon'; -export function LensFieldIcon({ type, ...rest }) { - return ( - - ); -} - -export function normalizeOperationDataType(type) { - return type === 'document' ? 'number' : type; -} diff --git a/public/components/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap b/public/components/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap deleted file mode 100644 index b6c2eb2279..0000000000 --- a/public/components/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap +++ /dev/null @@ -1,110 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Shared components Renders tool bar button component 1`] = ` - - - - - - - -`; diff --git a/public/components/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx b/public/components/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx deleted file mode 100644 index 22fa1083b7..0000000000 --- a/public/components/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { configure, mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import React from 'react'; -import { waitFor } from '@testing-library/react'; -import { EmptyPlaceholder } from '../empty_placeholder'; -import { ToolbarButton } from '../toolbar_button'; - -describe('Shared components', () => { - configure({ adapter: new Adapter() }); - - it('Renders tool bar button component', async () => { - const handleClick = jest.fn(); - const WrappedComponent = () =>
testing
; - - const wrapper = mount( - - - - ); - - wrapper.update(); - - await waitFor(() => { - expect(wrapper).toMatchSnapshot(); - }); - }); -}); diff --git a/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx b/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx index 30e316aced..fa0bffe2a4 100644 --- a/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx +++ b/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx @@ -9,12 +9,12 @@ import { FormattedMessage } from '@osd/i18n/react'; export const EmptyPlaceholder = (props: {icon: string}) => ( <> - +

diff --git a/public/components/explorer/visualizations/shared_components/index.ts b/public/components/explorer/visualizations/shared_components/index.ts index dfbd82f359..6ce6cf7331 100644 --- a/public/components/explorer/visualizations/shared_components/index.ts +++ b/public/components/explorer/visualizations/shared_components/index.ts @@ -4,5 +4,3 @@ */ export * from './empty_placeholder'; -export { ToolbarPopoverProps, ToolbarPopover } from './toolbar_popover'; -export { ToolbarButtonProps, ToolbarButton } from './toolbar_button'; diff --git a/public/components/explorer/visualizations/shared_components/toolbar_button.scss b/public/components/explorer/visualizations/shared_components/toolbar_button.scss deleted file mode 100644 index 621cb9293d..0000000000 --- a/public/components/explorer/visualizations/shared_components/toolbar_button.scss +++ /dev/null @@ -1,65 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -.lnsToolbarButton { - line-height: $euiButtonHeight; // Keeps alignment of text and chart icon - background-color: $euiColorEmptyShade; - - // Some toolbar buttons are just icons, but EuiButton comes with margin and min-width that need to be removed - min-width: 0; - - &[class*='--text'] { - // Lighten the border color for all states - border-color: $euiBorderColor !important; // sass-lint:disable-line no-important - } - - &[class*='isDisabled'] { - // There is a popover `pointer-events: none` that messes with the not-allowed cursor - pointer-events: initial; - } - - .lnsToolbarButton__text > svg { - margin-top: -1px; // Just some weird alignment issue when icon is the child not the `iconType` - } - - .lnsToolbarButton__text:empty { - margin: 0; - } - - // Toolbar buttons don't look good with centered text when fullWidth - &[class*='fullWidth'] { - text-align: left; - - .lnsToolbarButton__content { - justify-content: space-between; - } - } - -} - -.lnsToolbarButton--groupLeft { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.lnsToolbarButton--groupCenter { - border-radius: 0; - border-left: none; -} - -.lnsToolbarButton--groupRight { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left: none; -} - -.lnsToolbarButton--bold { - font-weight: $euiFontWeightBold; -} - -.lnsToolbarButton--s { - box-shadow: none !important; // sass-lint:disable-line no-important - font-size: $euiFontSizeS; -} diff --git a/public/components/explorer/visualizations/shared_components/toolbar_button.tsx b/public/components/explorer/visualizations/shared_components/toolbar_button.tsx deleted file mode 100644 index 99d0aca643..0000000000 --- a/public/components/explorer/visualizations/shared_components/toolbar_button.tsx +++ /dev/null @@ -1,73 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import './toolbar_button.scss'; -import React from 'react'; -import classNames from 'classnames'; -import { EuiButton, PropsOf, EuiButtonProps } from '@elastic/eui'; - -const groupPositionToClassMap = { - none: null, - left: 'lnsToolbarButton--groupLeft', - center: 'lnsToolbarButton--groupCenter', - right: 'lnsToolbarButton--groupRight', -}; - -export type ToolbarButtonProps = PropsOf & { - /** - * Determines prominence - */ - fontWeight?: 'normal' | 'bold'; - /** - * Smaller buttons also remove extra shadow for less prominence - */ - size?: EuiButtonProps['size']; - /** - * Determines if the button will have a down arrow or not - */ - hasArrow?: boolean; - /** - * Adjusts the borders for groupings - */ - groupPosition?: 'none' | 'left' | 'center' | 'right'; - dataTestSubj?: string; -}; - -export const ToolbarButton: React.FunctionComponent = ({ - children, - className, - fontWeight = 'normal', - size = 's', - hasArrow = true, - groupPosition = 'none', - dataTestSubj = '', - ...rest -}) => { - const classes = classNames( - 'lnsToolbarButton', - groupPositionToClassMap[groupPosition], - [`lnsToolbarButton--${fontWeight}`, `lnsToolbarButton--${size}`], - className - ); - return ( - - {children} - - ); -}; diff --git a/public/components/explorer/visualizations/workspace_panel/chart_switch.scss b/public/components/explorer/visualizations/workspace_panel/chart_switch.scss deleted file mode 100644 index 4c90496cdb..0000000000 --- a/public/components/explorer/visualizations/workspace_panel/chart_switch.scss +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -.lnsChartSwitch__header { - > * { - display: flex; - align-items: center; - } -} - -.lnsChartSwitch__summaryIcon { - margin-right: $euiSizeS; - transform: translateY(-1px); - color: $euiTextSubduedColor; -} - -// Targeting img as this won't target normal EuiIcon's only the custom svgs's -img.lnsChartSwitch__chartIcon { // sass-lint:disable-line no-qualifying-elements - // The large icons aren't square so max out the width to fill the height - width: 100%; -} - -.lnsChartSwitch__search { - width: 4 * $euiSizeXXL; -} \ No newline at end of file diff --git a/public/components/explorer/visualizations/workspace_panel/chart_switch.tsx b/public/components/explorer/visualizations/workspace_panel/chart_switch.tsx deleted file mode 100644 index 4d96e88df1..0000000000 --- a/public/components/explorer/visualizations/workspace_panel/chart_switch.tsx +++ /dev/null @@ -1,114 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import './chart_switch.scss'; - -import React, { useState } from 'react'; -import { i18n } from '@osd/i18n'; -import { - EuiPopover, - EuiPopoverTitle, - EuiFlexGroup, - EuiFlexItem, - EuiKeyPadMenu, - EuiKeyPadMenuItem, - EuiIcon, -} from '@elastic/eui'; -import { ToolbarButton } from '../shared_components/toolbar_button'; -import { getPlotlyCategory } from '../../../visualizations/charts/shared/shared_configs'; - -function VisualizationSummary(vis: any) { - return ( - <> - - {vis.label} - - ); -} - -const VIS_CATEGORY = getPlotlyCategory('list'); - -export const ChartSwitch = ({ setVis, vis, visualizationTypes }: any) => { - const [flyoutOpen, setFlyoutOpen] = useState(false); - - const popoverWrappedSwitch = ( - setFlyoutOpen(!flyoutOpen)} - data-test-subj="lnsChartSwitchPopover" - fontWeight="bold" - > - - - } - isOpen={flyoutOpen} - closePopover={() => setFlyoutOpen(false)} - anchorPosition="downLeft" - > - {VIS_CATEGORY.map((vis_category) => { - return ( - <> - - - - {i18n.translate('xpack.lens.configPanel.chartType', { - defaultMessage: `${vis_category}`, - })} - - - - - {visualizationTypes - .filter((v) => vis_category === v.category) - .map((v) => ( - {v.label}} - title={v.fullLabel} - role="menuitem" - data-test-subj={`lnsChartSwitchPopover_${v.id}`} - onClick={() => { - setVis(v.id); - setFlyoutOpen(false); - }} - betaBadgeLabel={ - v.selection.dataLoss !== 'nothing' - ? i18n.translate('xpack.lens.chartSwitch.dataLossLabel', { - defaultMessage: 'Data loss', - }) - : undefined - } - betaBadgeTooltipContent={ - v.selection.dataLoss !== 'nothing' - ? i18n.translate('xpack.lens.chartSwitch.dataLossDescription', { - defaultMessage: - 'Switching to this chart will lose some of the configuration', - }) - : undefined - } - betaBadgeIconType={v.selection.dataLoss !== 'nothing' ? 'alert' : undefined} - > - - - ))} - - - ); - })} - - ); - - return
{popoverWrappedSwitch}
; -};