From bf2ce5c7e667c6110f76266af09466bd3a18bc35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Wed, 13 Sep 2023 12:20:45 +0200 Subject: [PATCH 1/8] chore(DashboardHeader) convert to TS chore(DashboardWrapper) convert to TS move to utils and update imports fix md line fix build errors update columnmanagement dashboardwrapper import testing move files out of utils change to absolute imports change to relative imports for each component update page import add rollup plugin-typescript rename rollup.config.js to rollup.config.mjs revert build changes and remove imports from top of md files revert yarn.lock, revert to index.d.ts, update jumplinks import --- .../src/components/Page/DashboardHeader.tsx | 186 +++++++ .../src/components/Page/DashboardWrapper.tsx | 123 +++++ .../react-core/src/components/Page/index.ts | 2 + packages/react-core/src/demos/AlertGroup.md | 2 - packages/react-core/src/demos/BackToTop.md | 2 - packages/react-core/src/demos/Banner.md | 6 +- packages/react-core/src/demos/Card/Card.md | 1 - .../src/demos/Card/examples/CardView.tsx | 2 +- packages/react-core/src/demos/JumpLinks.md | 4 +- packages/react-core/src/demos/Nav.md | 28 +- .../react-core/src/demos/PrimaryDetail.md | 7 +- packages/react-core/src/demos/Tabs.md | 5 +- packages/react-core/src/demos/Toolbar.md | 4 +- .../react-core/src/demos/Wizard/WizardDemo.md | 6 +- .../{ => src/demos/assets}/index.d.ts | 0 .../AlertGroupToastWithNotificationDrawer.tsx | 4 +- .../examples/BackToTop/BackToTopNameDemo.tsx | 2 +- .../src/demos/examples/DashboardHeader.js | 220 -------- .../src/demos/examples/DashboardWrapper.js | 127 ----- .../examples/JumpLinks/JumpLinksWithDrawer.js | 2 +- .../src/demos/examples/Nav/NavDrilldown.tsx | 3 +- .../PrimaryDetailContentPadding.tsx | 2 +- .../PrimaryDetail/PrimaryDetailFullPage.tsx | 2 +- .../PrimaryDetailInlineModifier.tsx | 2 +- .../src/demos/examples/Tabs/ModalTabs.tsx | 2 +- .../src/demos/examples/Tabs/NestedTabs.tsx | 2 +- .../examples/Tabs/NestedUnindentedTabs.tsx | 2 +- .../src/demos/examples/Tabs/TabsAndTable.tsx | 2 +- .../Toolbar/ConsoleLogViewerToolbar.tsx | 473 ++++++++++++++++++ packages/react-table/src/docs/demos/Table.md | 2 +- .../src/docs/demos/table-demos/BulkSelect.jsx | 2 +- .../demos/table-demos/ColumnManagement.jsx | 2 +- .../src/docs/demos/table-demos/Compact.jsx | 2 +- .../demos/table-demos/CompoundExpansion.jsx | 2 +- .../demos/table-demos/ExpandCollapseAll.jsx | 3 +- .../demos/table-demos/SortableResponsive.jsx | 2 +- .../table-demos/StaticBottomPagination.jsx | 2 +- .../demos/table-demos/StickyFirstColumn.jsx | 3 +- .../docs/demos/table-demos/StickyHeader.jsx | 3 +- 39 files changed, 831 insertions(+), 415 deletions(-) create mode 100644 packages/react-core/src/components/Page/DashboardHeader.tsx create mode 100644 packages/react-core/src/components/Page/DashboardWrapper.tsx rename packages/react-core/{ => src/demos/assets}/index.d.ts (100%) delete mode 100644 packages/react-core/src/demos/examples/DashboardHeader.js delete mode 100644 packages/react-core/src/demos/examples/DashboardWrapper.js create mode 100644 packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx diff --git a/packages/react-core/src/components/Page/DashboardHeader.tsx b/packages/react-core/src/components/Page/DashboardHeader.tsx new file mode 100644 index 00000000000..32cb47ca274 --- /dev/null +++ b/packages/react-core/src/components/Page/DashboardHeader.tsx @@ -0,0 +1,186 @@ +import React, { useState } from 'react'; +import { Avatar } from '../Avatar'; +import { Brand } from '../Brand'; +import { Button, ButtonVariant } from '../Button'; +import { Divider } from '../Divider'; +import { Dropdown, DropdownGroup, DropdownItem, DropdownList } from '../Dropdown'; +import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent } from '../Masthead'; +import { MenuToggle } from '../MenuToggle'; +import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '../Toolbar'; +import { PageToggleButton } from './PageToggleButton'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; +import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg'; + +interface DashboardHeaderProps { + notificationBadge?: React.ReactNode; +} + +export const DashboardHeader: React.FC = ({ notificationBadge }) => { + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + + const kebabDropdownItems = ( + <> + + Settings + + + Help + + + ); + + const userDropdownItems = ( + <> + My profile + User management + Logout + + ); + + const onDropdownToggle = () => { + setIsDropdownOpen((prevIsDropdownOpen) => !prevIsDropdownOpen); + }; + + const onDropdownSelect = () => { + setIsDropdownOpen(false); + }; + + const onKebabDropdownToggle = () => { + setIsKebabDropdownOpen((prevIsKebabDropdownOpen) => !prevIsKebabDropdownOpen); + }; + + const onKebabDropdownSelect = () => { + setIsKebabDropdownOpen(false); + }; + + const onFullKebabToggle = () => { + setIsFullKebabDropdownOpen((prevIsFullKebabDropdownOpen) => !prevIsFullKebabDropdownOpen); + }; + + const onFullKebabSelect = () => { + setIsFullKebabDropdownOpen(false); + }; + + return ( + + + + + + + + + + + + + + + + {notificationBadge ? ( + notificationBadge + ) : ( + + + + + ); + + const selectDropdownContent = ( + + {Object.entries(firstOptions).map(([value, { type }]) => ( + + {type} + {` ${value}`} + + ))} + + ); + + const selectToggleContent = ({ showText }: { showText: boolean }) => { + if (!containerSelected) { + return 'Select'; + } + return ( + + {firstOptions[containerSelected].type} + {showText && ` ${containerSelected}`} + + ); + }; + + const LogsSearchInput = ( + } breakpoint="lg"> + + + + + ); + + const leftAlignedItemsDesktop = ( + + + + + + + + + + + + ); + + const leftAlignedItemsMobile = ( + + + Select container}> + + + + + Options}> + + + + + {isPaused ? 'Resume log' : 'Pause log'}}> + + + + + ); + + const leftAlignedItems = ( + + {leftAlignedItemsDesktop} + {leftAlignedItemsMobile} + + ); + + const rightAlignedItemsDesktop = ( + + + setExternalExpanded(isOpen)} + onSelect={onExternalSelect} + toggle={(toggleRef) => ( + + External logs + + )} + > + {externalDropdownItems} + + + + setDownloadExpanded(isOpen)} + onSelect={onDownloadSelect} + toggle={(toggleRef) => ( + + Download + + )} + > + {downloadDropdownItems} + + + + ); + + const rightAlignedItemsMobile = ( + + + External logs}> + setExternalExpandedMobile(isOpen)} + onSelect={onExternalSelectMobile} + toggle={(toggleRef) => ( + } + aria-label="External logs" + /> + )} + > + {externalDropdownItems} + + + + + Download}> + setDownloadExpandedMobile(isOpen)} + onSelect={onDownloadSelectMobile} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + } + aria-label="Download" + /> + )} + > + {downloadDropdownItems} + + + + + ); + + const rightAlignedItems = ( + + {LogsSearchInput} + {rightAlignedItemsDesktop} + {rightAlignedItemsMobile} + + Expand}> + + + + + ); + + const items = ( + + {leftAlignedItems} + {rightAlignedItems} + + ); + + return ( + + + + {items} + + + + ); +}; diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md index 967d23c2f05..f5a2773dd15 100644 --- a/packages/react-table/src/docs/demos/Table.md +++ b/packages/react-table/src/docs/demos/Table.md @@ -5,6 +5,7 @@ section: components import { Checkbox, +DashboardWrapper, Label, PageSection, ToolbarExpandIconWrapper, @@ -47,7 +48,6 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; diff --git a/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx b/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx index 660b15c3903..9150ab87ca0 100644 --- a/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx +++ b/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { + DashboardWrapper, Dropdown, DropdownList, DropdownItem, @@ -14,7 +15,6 @@ import { ToolbarItem } from '@patternfly/react-core'; import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; export const BulkSelectTableDemo = () => { diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx index c6281aae543..16d960d4f44 100644 --- a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx +++ b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx @@ -3,6 +3,7 @@ import React from 'react'; import { Button, Card, + DashboardWrapper, DataList, DataListCheck, DataListItem, @@ -28,7 +29,6 @@ import { import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper.js'; import { capitalize } from '@patternfly/react-table/src/components/Table/utils/utils'; import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; diff --git a/packages/react-table/src/docs/demos/table-demos/Compact.jsx b/packages/react-table/src/docs/demos/table-demos/Compact.jsx index d88949489b7..fac6d086253 100644 --- a/packages/react-table/src/docs/demos/table-demos/Compact.jsx +++ b/packages/react-table/src/docs/demos/table-demos/Compact.jsx @@ -4,6 +4,7 @@ import { Button, Card, Label, + DashboardWrapper, MenuToggle, MenuToggleElement, Pagination, @@ -17,7 +18,6 @@ import { } from '@patternfly/react-core'; import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; export const CompactTable = () => { diff --git a/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx b/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx index 8032a33c911..b490b8d57fe 100644 --- a/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx +++ b/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx @@ -3,6 +3,7 @@ import { ActionsColumn, Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } import { Button, Card, + DashboardWrapper, Flex, FlexItem, MenuToggle, @@ -19,7 +20,6 @@ import { import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; export const CompoundExpandable = () => { diff --git a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx index 72f4aa4079b..01fac30f27f 100644 --- a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx +++ b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx @@ -1,7 +1,6 @@ import React from 'react'; -import { Card, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core'; +import { Card, DashboardWrapper, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core'; import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; const expandableColumns = ['Servers', 'Threads', 'Applications', 'Workspaces', 'Status']; diff --git a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx index c83212033d5..6d5dcd68b2b 100644 --- a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx +++ b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx @@ -3,6 +3,7 @@ import React from 'react'; import { Button, Card, + DashboardWrapper, Dropdown, DropdownList, Flex, @@ -38,7 +39,6 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; diff --git a/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx index 58f64349a58..63013e70fcb 100644 --- a/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx +++ b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx @@ -3,6 +3,7 @@ import React from 'react'; import { Button, Card, + DashboardWrapper, Toolbar, ToolbarContent, ToolbarGroup, @@ -17,7 +18,6 @@ import { } from '@patternfly/react-core'; import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; export const StaticBottomPagination = () => { diff --git a/packages/react-table/src/docs/demos/table-demos/StickyFirstColumn.jsx b/packages/react-table/src/docs/demos/table-demos/StickyFirstColumn.jsx index ed4815047d1..6176c6b9e30 100644 --- a/packages/react-table/src/docs/demos/table-demos/StickyFirstColumn.jsx +++ b/packages/react-table/src/docs/demos/table-demos/StickyFirstColumn.jsx @@ -1,7 +1,6 @@ import React from 'react'; import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table'; -import { Card, PageSection } from '@patternfly/react-core'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; +import { Card, DashboardWrapper, PageSection } from '@patternfly/react-core'; export const StickyFirstColumn = () => { const facts = Array.from( diff --git a/packages/react-table/src/docs/demos/table-demos/StickyHeader.jsx b/packages/react-table/src/docs/demos/table-demos/StickyHeader.jsx index 53888d8341f..f130d9d36b1 100644 --- a/packages/react-table/src/docs/demos/table-demos/StickyHeader.jsx +++ b/packages/react-table/src/docs/demos/table-demos/StickyHeader.jsx @@ -1,8 +1,7 @@ import React from 'react'; -import { Card, Label, PageSection } from '@patternfly/react-core'; +import { Card, DashboardWrapper, Label, PageSection } from '@patternfly/react-core'; import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; export const StickyHeader: React.FunctionComponent = () => { From 81134cae7913cb09c70e864fd3636aa00356e1bb Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Thu, 21 Sep 2023 16:38:37 -0400 Subject: [PATCH 2/8] add rollup-svg, move Dashboard components out of page --- packages/react-core/package.json | 1 + .../components/{Page => }/DashboardHeader.tsx | 18 ++++++++--------- .../{Page => }/DashboardWrapper.tsx | 10 +++++----- .../react-core/src/components/Page/index.ts | 2 -- packages/react-core/src/components/index.ts | 2 ++ packages/rollup.base.js | 2 ++ yarn.lock | 20 +++++++++++++++++++ 7 files changed, 39 insertions(+), 16 deletions(-) rename packages/react-core/src/components/{Page => }/DashboardHeader.tsx (95%) rename packages/react-core/src/components/{Page => }/DashboardWrapper.tsx (94%) diff --git a/packages/react-core/package.json b/packages/react-core/package.json index dff8d38e696..07796b5f655 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -63,6 +63,7 @@ "rimraf": "^3.0.2", "rollup": "^3.21.5", "rollup-plugin-scss": "^4.0.0", + "rollup-plugin-svg": "2.0.0", "rollup-plugin-terser": "^7.0.2", "typescript": "^4.7.4" }, diff --git a/packages/react-core/src/components/Page/DashboardHeader.tsx b/packages/react-core/src/components/DashboardHeader.tsx similarity index 95% rename from packages/react-core/src/components/Page/DashboardHeader.tsx rename to packages/react-core/src/components/DashboardHeader.tsx index 32cb47ca274..d3b88a67b56 100644 --- a/packages/react-core/src/components/Page/DashboardHeader.tsx +++ b/packages/react-core/src/components/DashboardHeader.tsx @@ -1,13 +1,13 @@ import React, { useState } from 'react'; -import { Avatar } from '../Avatar'; -import { Brand } from '../Brand'; -import { Button, ButtonVariant } from '../Button'; -import { Divider } from '../Divider'; -import { Dropdown, DropdownGroup, DropdownItem, DropdownList } from '../Dropdown'; -import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent } from '../Masthead'; -import { MenuToggle } from '../MenuToggle'; -import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '../Toolbar'; -import { PageToggleButton } from './PageToggleButton'; +import { Avatar } from './Avatar'; +import { Brand } from './Brand'; +import { Button, ButtonVariant } from './Button'; +import { Divider } from './Divider'; +import { Dropdown, DropdownGroup, DropdownItem, DropdownList } from './Dropdown'; +import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent } from './Masthead'; +import { MenuToggle } from './MenuToggle'; +import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from './Toolbar'; +import { PageToggleButton } from './Page/PageToggleButton'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; diff --git a/packages/react-core/src/components/Page/DashboardWrapper.tsx b/packages/react-core/src/components/DashboardWrapper.tsx similarity index 94% rename from packages/react-core/src/components/Page/DashboardWrapper.tsx rename to packages/react-core/src/components/DashboardWrapper.tsx index ce288198e34..6167e7548a2 100644 --- a/packages/react-core/src/components/Page/DashboardWrapper.tsx +++ b/packages/react-core/src/components/DashboardWrapper.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; -import { Breadcrumb, BreadcrumbItem } from '../Breadcrumb'; -import { Nav, NavItem, NavList } from '../Nav'; -import { Page, PageSection, PageSidebar, PageSidebarBody } from '../Page'; -import { SkipToContent } from '../SkipToContent'; -import { Text, TextContent } from '../Text'; +import { Breadcrumb, BreadcrumbItem } from './Breadcrumb'; +import { Nav, NavItem, NavList } from './Nav'; +import { Page, PageSection, PageSidebar, PageSidebarBody } from './Page'; +import { SkipToContent } from './SkipToContent'; +import { Text, TextContent } from './Text'; import { DashboardHeader } from './DashboardHeader'; interface DashboardWrapperProps { diff --git a/packages/react-core/src/components/Page/index.ts b/packages/react-core/src/components/Page/index.ts index 4eba0c99671..fd3bc29fe52 100644 --- a/packages/react-core/src/components/Page/index.ts +++ b/packages/react-core/src/components/Page/index.ts @@ -7,5 +7,3 @@ export * from './PageSection'; export * from './PageNavigation'; export * from './PageToggleButton'; export * from './PageContext'; -export * from './DashboardHeader'; -export * from './DashboardWrapper'; diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts index a322279493d..df602c271d9 100644 --- a/packages/react-core/src/components/index.ts +++ b/packages/react-core/src/components/index.ts @@ -18,6 +18,8 @@ export * from './Checkbox'; export * from './Chip'; export * from './ClipboardCopy'; export * from './CodeBlock'; +export * from './DashboardHeader'; +export * from './DashboardWrapper'; export * from './DataList'; export * from './DatePicker'; export * from './DescriptionList'; diff --git a/packages/rollup.base.js b/packages/rollup.base.js index df6dd17252d..67c6de55065 100644 --- a/packages/rollup.base.js +++ b/packages/rollup.base.js @@ -3,6 +3,7 @@ const commonjs = require('@rollup/plugin-commonjs'); const scss = require('rollup-plugin-scss'); const replace = require('@rollup/plugin-replace'); const { terser } = require('rollup-plugin-terser'); +const svg = require('rollup-plugin-svg'); const isProduction = process.env.IS_PRODUCTION; let exitCode = 0; @@ -38,6 +39,7 @@ module.exports = ({ packageName, name }) => ({ nodeResolve(), commonjs(), scss(), + svg(), isProduction && terser(), circularFailPlugin() ], diff --git a/yarn.lock b/yarn.lock index 889287929bf..7dbb0e7e490 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9083,6 +9083,11 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0: resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123" integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA== +estree-walker@^0.2.1: + version "0.2.1" + resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e" + integrity sha512-6/I1dwNKk0N9iGOU3ydzAAurz4NPo/ttxZNCqgIVbWFvWyzWBSNonRrJ5CpjDuyBfmM7ENN7WCzUi9aT/UPXXQ== + estree-walker@^0.6.1: version "0.6.1" resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz" @@ -16914,6 +16919,13 @@ rollup-plugin-scss@^4.0.0: dependencies: rollup-pluginutils "^2.3.3" +rollup-plugin-svg@2.0.0: + version "2.0.0" + resolved "https://registry.npmjs.org/rollup-plugin-svg/-/rollup-plugin-svg-2.0.0.tgz#ce11b55e915d5b2190328c4e6632bd6b4fe12ee9" + integrity sha512-DmE7dSQHo1SC5L2uH2qul3Mjyd5oV6U1aVVkyvTLX/mUsRink7f1b1zaIm+32GEBA6EHu8H/JJi3DdWqM53ySQ== + dependencies: + rollup-pluginutils "^1.3.1" + rollup-plugin-terser@^7.0.2: version "7.0.2" resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d" @@ -16924,6 +16936,14 @@ rollup-plugin-terser@^7.0.2: serialize-javascript "^4.0.0" terser "^5.0.0" +rollup-pluginutils@^1.3.1: + version "1.5.2" + resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408" + integrity sha512-SjdWWWO/CUoMpDy8RUbZ/pSpG68YHmhk5ROKNIoi2En9bJ8bTt3IhYi254RWiTclQmL7Awmrq+rZFOhZkJAHmQ== + dependencies: + estree-walker "^0.2.1" + minimatch "^3.0.2" + rollup-pluginutils@^2.3.3: version "2.8.2" resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz" From 51c7819e9ede1430d18826e31b754412c8c5c8ea Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Fri, 22 Sep 2023 11:44:00 -0400 Subject: [PATCH 3/8] add svg transformer --- jest.config.js | 3 ++- package.json | 1 + yarn.lock | 5 +++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index 4e28a21b5ff..620b84b3b63 100644 --- a/jest.config.js +++ b/jest.config.js @@ -10,7 +10,8 @@ module.exports = { ], roots: ['/packages'], transform: { - '^.+\\.[jt]sx?$': 'babel-jest' + '^.+\\.[jt]sx?$': 'babel-jest', + '^.+\\.svg$': 'jest-transform-stub' }, setupFilesAfterEnv: ['/packages/testSetup.ts'], transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|@popperjs|lodash|monaco-editor|react-monaco-editor)'], diff --git a/package.json b/package.json index a372ea8108c..68dd2fdb3ed 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@typescript-eslint/eslint-plugin": "^5.59.2", "@typescript-eslint/parser": "^5.59.2", "babel-jest": "^27.2.5", + "jest-transform-stub": "^2.0.0", "concurrently": "^7.6.0", "eslint": "^8.39.0", "eslint-plugin-markdown": "^3.0.0", diff --git a/yarn.lock b/yarn.lock index 7dbb0e7e490..d4adc7bb893 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12354,6 +12354,11 @@ jest-snapshot@^27.2.5: pretty-format "^27.2.5" semver "^7.3.2" +jest-transform-stub@^2.0.0: + version "2.0.0" + resolved "https://registry.npmjs.org/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz#19018b0851f7568972147a5d60074b55f0225a7d" + integrity sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg== + jest-util@^27.2.5: version "27.2.5" resolved "https://registry.npmjs.org/jest-util/-/jest-util-27.2.5.tgz" From b1781b33c6b2c3de27901e8c2dacb21b9f9c0ace Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Fri, 22 Sep 2023 15:21:21 -0400 Subject: [PATCH 4/8] clean up dashboardwrapper code --- .../src/components/DashboardWrapper.tsx | 33 ++++++++----------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/react-core/src/components/DashboardWrapper.tsx b/packages/react-core/src/components/DashboardWrapper.tsx index 6167e7548a2..fff2fef948d 100644 --- a/packages/react-core/src/components/DashboardWrapper.tsx +++ b/packages/react-core/src/components/DashboardWrapper.tsx @@ -1,22 +1,17 @@ import React, { useState } from 'react'; import { Breadcrumb, BreadcrumbItem } from './Breadcrumb'; import { Nav, NavItem, NavList } from './Nav'; -import { Page, PageSection, PageSidebar, PageSidebarBody } from './Page'; +import { Page, PageProps, PageSection, PageSidebar, PageSidebarBody } from './Page'; import { SkipToContent } from './SkipToContent'; import { Text, TextContent } from './Text'; import { DashboardHeader } from './DashboardHeader'; -interface DashboardWrapperProps { - children: React.ReactNode; - mainContainerId?: string; - breadcrumb?: React.ReactNode; - header?: React.ReactNode; - sidebar?: React.ReactNode; +interface DashboardWrapperProps extends Omit { + /** Programmatically manage if the sidebar nav is shown */ sidebarNavOpen?: boolean; - onPageResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, resizeObject: any) => void; - hasNoBreadcrumb?: boolean; - notificationDrawer?: React.ReactNode; - isNotificationDrawerExpanded?: boolean; + /** Flag to render sample breadcrumb if custom breadcrumb not passed */ + hasDefaultBreadcrumb?: boolean; + /** Flag to render sample page title if custom title not passed */ hasPageTemplateTitle?: boolean; } @@ -48,12 +43,12 @@ export const DashboardWrapper: React.FC = ({ sidebar, sidebarNavOpen, onPageResize, - hasNoBreadcrumb, + hasDefaultBreadcrumb, notificationDrawer, isNotificationDrawerExpanded, hasPageTemplateTitle, ...pageProps -}) => { +}: DashboardWrapperProps) => { const [activeItem, setActiveItem] = useState(1); const onNavSelect = (_event: React.FormEvent, result: any) => { @@ -61,8 +56,8 @@ export const DashboardWrapper: React.FC = ({ }; let renderedBreadcrumb; - if (!hasNoBreadcrumb) { - renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb; + if (!hasDefaultBreadcrumb) { + renderedBreadcrumb = breadcrumb ?? DashboardBreadcrumb; } const PageNav = ( @@ -94,19 +89,19 @@ export const DashboardWrapper: React.FC = ({ ); const PageSkipToContent = ( - + Skip to content ); return ( } - sidebar={sidebar !== undefined ? sidebar : _sidebar} + header={header ?? } + sidebar={sidebar ?? _sidebar} isManagedSidebar skipToContent={PageSkipToContent} breadcrumb={renderedBreadcrumb} - mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'} + mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'} notificationDrawer={notificationDrawer} isNotificationDrawerExpanded={isNotificationDrawerExpanded} {...(typeof onPageResize === 'function' && { From 3a7399e690427502a98e32e16927ed616a111b57 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Fri, 22 Sep 2023 15:29:50 -0400 Subject: [PATCH 5/8] cleanup dashboard header code --- .../react-core/src/components/DashboardHeader.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/DashboardHeader.tsx b/packages/react-core/src/components/DashboardHeader.tsx index d3b88a67b56..c87e982d622 100644 --- a/packages/react-core/src/components/DashboardHeader.tsx +++ b/packages/react-core/src/components/DashboardHeader.tsx @@ -18,6 +18,7 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg'; interface DashboardHeaderProps { + /** Render custom notification badge */ notificationBadge?: React.ReactNode; } @@ -46,7 +47,7 @@ export const DashboardHeader: React.FC = ({ notificationBa ); const onDropdownToggle = () => { - setIsDropdownOpen((prevIsDropdownOpen) => !prevIsDropdownOpen); + setIsDropdownOpen(!isDropdownOpen); }; const onDropdownSelect = () => { @@ -54,7 +55,7 @@ export const DashboardHeader: React.FC = ({ notificationBa }; const onKebabDropdownToggle = () => { - setIsKebabDropdownOpen((prevIsKebabDropdownOpen) => !prevIsKebabDropdownOpen); + setIsKebabDropdownOpen(!isKebabDropdownOpen); }; const onKebabDropdownSelect = () => { @@ -62,7 +63,7 @@ export const DashboardHeader: React.FC = ({ notificationBa }; const onFullKebabToggle = () => { - setIsFullKebabDropdownOpen((prevIsFullKebabDropdownOpen) => !prevIsFullKebabDropdownOpen); + setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen); }; const onFullKebabSelect = () => { @@ -89,9 +90,7 @@ export const DashboardHeader: React.FC = ({ notificationBa align={{ default: 'alignRight' }} spacer={{ default: 'spacerNone', md: 'spacerMd' }} > - {notificationBadge ? ( - notificationBadge - ) : ( + {notificationBadge ?? (