ARTEMIS-5999 - Switch from CJS to ESM build

artemis-console-extension/artemis-extension/app/package.json

@@ -4,8 +4,11 @@
   "description": "Artemis Console",
   "license": "Apache-2.0",
   "private": true,
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
   "scripts": {
-    "start": "webpack serve --mode development",
+    "start": "webpack serve --mode development --hot --open",
     "build": "webpack --mode production && yarn replace-version && yarn replace-doc-version",
     "replace-version": "replace __PACKAGE_VERSION_PLACEHOLDER__ $npm_package_version ./build/static/js -r --include=\"*.js\"",
     "replace-doc-version": "replace __PACKAGE_VERSION_PLACEHOLDER__ $npm_package_version ./build/hawtconfig.json"

artemis-console-extension/artemis-extension/app/webpack.config.cjs

@@ -242,9 +242,16 @@ module.exports = (webpackEnv, args) => {
       minimizer: [
         // This is only used in production mode
         new TerserPlugin({
+          parallel: true,
           terserOptions: {
             ecma: 2023,
-            compress: true,
+            module: true,
+            compress: {
+              passes: 2,
+              pure_getters: true,
+              drop_console: true,
+              drop_debugger: true
+            },
             mangle: true,
             output: {
               ecma: 2023,

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/package.json

@@ -9,16 +9,16 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
-      "default": "./dist/index.js"
+      "require": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
     },
     "./styles": "./dist/index.css",
     "./dist/index.css": "./dist/index.css"
   },
   "scripts": {
     "build": "tsup --clean && yarn replace-version",
     "test": "jest",
-    "replace-version": "replace __PACKAGE_VERSION_PLACEHOLDER__ $npm_package_version ./dist/index.js"
+    "replace-version": "replace __PACKAGE_VERSION_PLACEHOLDER__ $npm_package_version ./dist/index.mjs"
   },
   "dependencies": {
     "react-split": "^2.0.14",

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/Artemis.tsx

@@ -14,11 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react'
+
 import { ArtemisTabs } from './views/ArtemisTabView';
 import { PageSection, Page } from '@patternfly/react-core';
 
-
 export const Artemis: React.FunctionComponent = () => {
 
   return ( 

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMXContent.tsx

@@ -17,7 +17,7 @@
 import { PageGroup, PageSection, PageSectionVariants, Title, Divider, Text, EmptyState, EmptyStateIcon, EmptyStateVariant } from "@patternfly/react-core"
 import { useContext } from "react";
 import { ArtemisContext } from "./context";
-import { CubesIcon } from "@patternfly/react-icons/dist/esm/icons/cubes-icon";
+import { CubesIcon } from "@patternfly/react-icons/dist/esm/icons/cubes-icon.js";
 import './ArtemisJMXContent.css' 
 import { ArtemisJMXTabs } from "./views/ArtemisJMXTabView";
 

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisPreferences.tsx

@@ -17,7 +17,7 @@
 import { CardBody, Flex, FlexItem, Form, FormGroup, FormSection, Icon, MenuToggle, MenuToggleElement, Select, SelectList, SelectOption, TextInput, Tooltip } from '@patternfly/react-core'
 import React, { FormEvent, useState } from 'react'
 import { artemisPreferencesService, ArtemisOptions } from './artemis-preferences-service'
-import { HelpIcon } from '@patternfly/react-icons/dist/esm/icons/help-icon'
+import { HelpIcon } from '@patternfly/react-icons/dist/esm/icons/help-icon.js'
 
 export const ArtemisPreferences: React.FunctionComponent = () => (
   <CardBody>

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/addresses/AddressesTable.tsx

@@ -19,7 +19,7 @@ import { ActiveSort, ArtemisTable, Column, Filter, ToolbarAction } from '../tabl
 import { Navigate } from '../views/ArtemisTabView.js';
 import { artemisService } from '../artemis-service';
 import { IAction } from '@patternfly/react-table';
-import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon.js';
 import { Button, Icon, Modal, ModalVariant, TextContent, Text } from '@patternfly/react-core';
 import { CreateQueue } from '../queues/CreateQueue';
 import { Attributes, eventService, jolokiaService, Operations, workspace } from '@hawtio/react';

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/addresses/CreateAddress.tsx

@@ -29,7 +29,7 @@ import {
 import React, {useState} from 'react'
 import {artemisService} from '../artemis-service';
 import { eventService, jolokiaService } from '@hawtio/react';
-import {OutlinedQuestionCircleIcon} from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import {OutlinedQuestionCircleIcon} from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon.js';
 
 interface CreateAddressProps {
     reload: Function

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/addresses/DeleteAddress.tsx

@@ -16,10 +16,10 @@
  */
 import { ActionGroup, Text, Button, Form, Icon, Modal, ModalVariant, TextContent, Title, Popover } from '@patternfly/react-core';
 import React, { useState } from 'react'
-import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon.js';
 import { eventService, jolokiaService, workspace } from '@hawtio/react';
 import { artemisService } from '../artemis-service';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon.js';
 
 type DeleteAddressProps = {
   address: string

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/brokers/BrokerDiagram.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import * as React from 'react';
-import { ClusterIcon } from '@patternfly/react-icons/dist/esm/icons/cluster-icon';
+import { ClusterIcon } from '@patternfly/react-icons/dist/esm/icons/cluster-icon.js';
 
 import {
   ColaLayout,

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/messages/MessagesTable.tsx

@@ -19,7 +19,7 @@ import { Column } from '../table/ArtemisTable';
 import { artemisService } from '../artemis-service';
 import { Toolbar, ToolbarContent, ToolbarItem, Text, SearchInput, Button, PaginationVariant, Pagination, DataList, DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Modal, TextContent, Icon, ModalVariant } from '@patternfly/react-core';
 import { Thead, Tr, Th, Tbody, Td, ActionsColumn, IAction, Table, InnerScrollContainer } from '@patternfly/react-table';
-import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon.js';
 import { createQueueObjectName } from '../util/jmx';
 import { Link } from 'react-router-dom';
 import { eventService, jolokiaService } from '@hawtio/react';

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/messages/QueueSelect.tsx

@@ -18,7 +18,7 @@ import React, { FormEvent, useEffect, useState } from 'react';
 import { Button, MenuToggle, MenuToggleElement, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '@patternfly/react-core';
 import { artemisService } from '../artemis-service';
 import { ActiveSort, Filter, SortDirection } from '../table/ArtemisTable';
-import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon'
+import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon.js'
 import { eventService, jolokiaService } from '@hawtio/react'
 
 export type QueueSelectProps = {

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/messages/SendMessage.tsx

@@ -37,9 +37,9 @@ import {
   Popover,
   TextContent
 } from '@patternfly/react-core'
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon'
-import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'
-import { TrashIcon } from '@patternfly/react-icons/dist/esm/icons/trash-icon'
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon.js'
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon.js'
+import { TrashIcon } from '@patternfly/react-icons/dist/esm/icons/trash-icon.js'
 import { CodeEditor, Language } from '@patternfly/react-code-editor'
 import { eventService, jolokiaService } from '@hawtio/react'
 import { artemisService } from '../artemis-service'

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/queues/CreateQueue.tsx

@@ -16,9 +16,9 @@
  */
 import { ActionGroup, Button, Checkbox, Flex, FlexItem, Form, FormGroup, NumberInput, Radio, TextInput, Title, Text, TextContent, Popover, Tooltip } from '@patternfly/react-core';
 import React, { FormEvent, useState } from 'react'
-import { TrashIcon } from '@patternfly/react-icons/dist/esm/icons/trash-icon'
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon'
-import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'
+import { TrashIcon } from '@patternfly/react-icons/dist/esm/icons/trash-icon.js'
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon.js'
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon.js'
 import { artemisService } from '../artemis-service';
 import { eventService, jolokiaService, workspace } from '@hawtio/react';
 

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/queues/DeleteQueue.tsx

@@ -18,7 +18,7 @@ import { ActionGroup, Button, Form, Modal, ModalVariant, Popover, TextContent, T
 import React, { useState } from 'react'
 import { eventService, jolokiaService, workspace } from '@hawtio/react';
 import { artemisService } from '../artemis-service';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon.js';
 
 type DeleteQueueProps = {
   queue: string

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/queues/QueuesView.tsx

@@ -21,7 +21,7 @@ import { MessagesTable } from '../messages/MessagesTable';
 import { Filter } from '../table/ArtemisTable';
 import { Button, Modal, ModalVariant, TextContent, Title, Text, Icon, TextVariants, TextList, TextListItem, TextListItemVariants, TextListVariants } from '@patternfly/react-core';
 import { Message, MessageView } from '../messages/MessageView';
-import { HelpIcon } from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import { HelpIcon } from '@patternfly/react-icons/dist/esm/icons/help-icon.js';
 import { Link } from 'react-router-dom';
 
 export type QueueNavigate = {

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/status/Status.tsx

@@ -41,9 +41,9 @@ import {
     Spinner,
     Tooltip
 } from "@patternfly/react-core"
-import { EllipsisVIcon } from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'
-import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'
-import { OkIcon } from '@patternfly/react-icons/dist/esm/icons/ok-icon'
+import { EllipsisVIcon } from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon.js'
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon.js'
+import { OkIcon } from '@patternfly/react-icons/dist/esm/icons/ok-icon.js'
 import { Attributes, eventService, jolokiaService, Operations } from '@hawtio/react';
 import React, { ReactNode, useContext, useEffect, useState } from "react";
 import { Acceptors, artemisService, BrokerInfo, BrokerState, ClusterConnections } from "../artemis-service";

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/table/ArtemisFilters.tsx

@@ -38,8 +38,6 @@ export const ArtemisFilters: React.FC<ArtemisFiltersProps> = ({ columns, operati
   const [columnOpen, setColumnOpen] = useState(false);
   const [operationOpen, setOperationOpen] = useState(false);
 
-  const visibleColumns = columns.filter(c => c.visible);
-
   const applyFilter = () => {
     const filterValue = searchRef.current?.value ?? "";
     if (filterOperation && filterColumn) {
@@ -66,7 +64,7 @@ export const ArtemisFilters: React.FC<ArtemisFiltersProps> = ({ columns, operati
           selected={filterColumn?.name}
         >
           <SelectList>
-            {visibleColumns.map(column => (
+            {columns.map(column => (
               <SelectOption key={column.id} value={column.name}>{column.name}</SelectOption>
             ))}
           </SelectList>

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/table/ArtemisTable.tsx

@@ -33,16 +33,16 @@ import {
   Text,
   TextContent
 } from '@patternfly/react-core';
-import { SortAmountDownIcon } from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import { SortAmountDownIcon } from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon.js';
 import { Thead, Tr, Th, Tbody, Td, IAction, ActionsColumn, Table, InnerScrollContainer } from '@patternfly/react-table';
 import { artemisPreferencesService } from '../artemis-preferences-service';
 import {
-  OptionsMenu,
-  OptionsMenuItem,
-  OptionsMenuItemGroup,
-  OptionsMenuSeparator,
-  OptionsMenuToggle
-} from '@patternfly/react-core/deprecated'
+  MenuItem,
+  Divider,
+  MenuToggle,
+  MenuList,
+  Select
+} from '@patternfly/react-core'
 
 import { ArtemisFilters } from './ArtemisFilters';
 import {Simulate} from "react-dom/test-utils";
@@ -114,10 +114,10 @@ const operationOptions = [
   const [rows, setRows] = useState([])
   const [resultsSize, setresultsSize] = useState(0)
   const [columnsLoaded, setColumnsLoaded] = useState(false);
-
+  const [operationOpen, setOperationOpen] = useState(false);
+  const onToggle = () => setOperationOpen(prev => !prev);
   const [columns, setColumns] = useState(broker.allColumns);
   const [activeSort, setActiveSort] = useState(initialActiveSort);
-  const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [page, setPage] = useState(1);
   const [isCompact, setIsCompact] = useState(false);
@@ -334,63 +334,67 @@ const operationOptions = [
     );
   };
 
+
+
   return (
     <React.Fragment>
 
       <Toolbar id="toolbar">
         <ToolbarContent>
           <ToolbarItem key='address-sort'>
-            <OptionsMenu
-              id="options-menu-multiple-options-example"
-              menuItems={[
-                <OptionsMenuItemGroup key="sort-columns" aria-label="Sort column">
-                  {Object.values(broker.allColumns).filter((element) => element.visible).map((column, columnIndex) => (
-                    <OptionsMenuItem
-                      key={column.id}
-                      isSelected={activeSort.id === column.id}
-                      onSelect={() => {
-                        updateActiveSort(column.id, activeSort.order)
-                      }}
-                    >
-                      {column.name}
-                    </OptionsMenuItem>
-                  ))}
-                </OptionsMenuItemGroup>,
-                <OptionsMenuSeparator key="separator" />,
-                <OptionsMenuItemGroup key="sort-direction" aria-label="Sort direction">
-                  <OptionsMenuItem
-                    onSelect={() => updateActiveSort(activeSort.id, SortDirection.ASCENDING)}
-                    isSelected={activeSort.order === SortDirection.ASCENDING}
-                    id="ascending"
-                    key="ascending"
-                  >
-                    Ascending
-                  </OptionsMenuItem>
-                  <OptionsMenuItem
-                    onSelect={() => updateActiveSort(activeSort.id, SortDirection.DESCENDING)}
-                    isSelected={activeSort.order === SortDirection.DESCENDING}
-                    id="descending"
-                    key="descending"
-                  >
-                    Descending
-                  </OptionsMenuItem>
-                </OptionsMenuItemGroup>
-              ]}
-              isOpen={isSortDropdownOpen}
-              toggle={
-                <OptionsMenuToggle
-                  hideCaret
-                  onToggle={() => setIsSortDropdownOpen(!isSortDropdownOpen)}
-                  toggleTemplate={<SortAmountDownIcon />}
-                />
-              }
-              isPlain
-              isGrouped
-            />
+            <Select
+              aria-label="Options menu"
+              isOpen={operationOpen}
+              onOpenChange={setOperationOpen}
+              onSelect={() => setOperationOpen(false)}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onToggle}
+                  variant="plain"
+                >
+                  <SortAmountDownIcon />
+                </MenuToggle>
+              )}
+            >
+              <MenuList>
+                {visibleColumns.map(column => (
+                  <MenuItem
+                    key={column.id}
+                    isSelected={activeSort.id === column.id}
+                    onClick={() => {
+                      updateActiveSort(column.id, activeSort.order)
+                    }}>
+                    {column.name}
+                  </MenuItem>
+                ))}
+                <Divider key="separator" />
+                <MenuItem
+                  onClick={() => {
+                    updateActiveSort(activeSort.id, SortDirection.ASCENDING)
+                  }}
+                  isSelected={activeSort.order === SortDirection.ASCENDING}
+                  id="ascending"
+                  key="ascending"
+                >
+                  Ascending
+                </MenuItem>
+                <MenuItem
+                  onClick={() => {
+                    updateActiveSort(activeSort.id, SortDirection.DESCENDING)
+                  }}
+                  isSelected={activeSort.order === SortDirection.DESCENDING}
+                  id="descending"
+                  key="descending"
+                >
+                  Descending
+                </MenuItem>
+              </MenuList>
+            </Select>
           </ToolbarItem>
 
           <ArtemisFilters
-            columns={columns}
+            columns={visibleColumns}
             operationOptions={operationOptions}
             initialFilter={filter}
             onApplyFilter={(f) => {

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/tsup.config.ts

@@ -21,7 +21,7 @@ import { defineConfig } from 'tsup'
 
 export default defineConfig({
   entry: ["src/index.ts"],
-  format: "cjs",
+  format: "esm",
   target: "esnext",
   sourcemap: true,
   dts: true,