From bb21151594b50ea6bb382d219ab8e32a35755bd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Wed, 13 Sep 2023 12:20:45 +0200
Subject: [PATCH] chore(DashboardHeader) convert to TS

---
 .../demos/assets/custom.d.ts}                 |   0
 .../src/demos/examples/DashboardHeader.js     | 220 ------------------
 .../src/demos/examples/DashboardWrapper.js    |   2 +-
 .../demos/examples/Page/DashboardHeader.tsx   | 200 ++++++++++++++++
 yarn.lock                                     |  18 +-
 5 files changed, 210 insertions(+), 230 deletions(-)
 rename packages/react-core/{index.d.ts => src/demos/assets/custom.d.ts} (100%)
 delete mode 100644 packages/react-core/src/demos/examples/DashboardHeader.js
 create mode 100644 packages/react-core/src/demos/examples/Page/DashboardHeader.tsx

diff --git a/packages/react-core/index.d.ts b/packages/react-core/src/demos/assets/custom.d.ts
similarity index 100%
rename from packages/react-core/index.d.ts
rename to packages/react-core/src/demos/assets/custom.d.ts
diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
deleted file mode 100644
index 1367cfa8626..00000000000
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ /dev/null
@@ -1,220 +0,0 @@
-import React from 'react';
-import {
-  Avatar,
-  Brand,
-  Button,
-  ButtonVariant,
-  Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownList,
-  Masthead,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand,
-  MastheadContent,
-  MenuToggle,
-  Toolbar,
-  ToolbarContent,
-  ToolbarGroup,
-  ToolbarItem,
-  PageToggleButton
-} from '@patternfly/react-core';
-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';
-
-export default class DashboardHeader extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      isFullKebabDropdownOpen: false,
-      activeItem: 0
-    };
-
-    this.onDropdownToggle = () => {
-      this.setState((prevState) => ({
-        isDropdownOpen: !prevState.isDropdownOpen
-      }));
-    };
-
-    this.onDropdownSelect = () => {
-      this.setState({
-        isDropdownOpen: false
-      });
-    };
-
-    this.onKebabDropdownToggle = () => {
-      this.setState((prevState) => ({
-        isKebabDropdownOpen: !prevState.isKebabDropdownOpen
-      }));
-    };
-
-    this.onKebabDropdownSelect = () => {
-      this.setState({
-        isKebabDropdownOpen: false
-      });
-    };
-
-    this.onFullKebabToggle = () => {
-      this.setState((prevState) => ({
-        isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen
-      }));
-    };
-
-    this.onFullKebabSelect = () => {
-      this.setState({
-        isFullKebabDropdownOpen: false
-      });
-    };
-  }
-
-  render() {
-    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen } = this.state;
-    const { notificationBadge } = this.props;
-
-    const kebabDropdownItems = (
-      <>
-        <DropdownItem>
-          <CogIcon /> Settings
-        </DropdownItem>
-        <DropdownItem>
-          <HelpIcon /> Help
-        </DropdownItem>
-      </>
-    );
-    const userDropdownItems = (
-      <>
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user">User management</DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </>
-    );
-
-    const headerToolbar = (
-      <Toolbar id="toolbar" isFullHeight isStatic>
-        <ToolbarContent>
-          <ToolbarGroup
-            variant="icon-button-group"
-            align={{ default: 'alignRight' }}
-            spacer={{ default: 'spacerNone', md: 'spacerMd' }}
-          >
-            {notificationBadge ? (
-              notificationBadge
-            ) : (
-              <ToolbarItem>
-                <Button
-                  aria-label="Notifications"
-                  variant={ButtonVariant.plain}
-                  icon={<BellIcon />}
-                  onClick={() => {}}
-                />
-              </ToolbarItem>
-            )}
-            <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
-              <ToolbarItem>
-                <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
-              </ToolbarItem>
-            </ToolbarGroup>
-            <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-              <Dropdown
-                isOpen={isKebabDropdownOpen}
-                onSelect={this.onKebabDropdownSelect}
-                onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
-                popperProps={{ position: 'right' }}
-                toggle={(toggleRef) => (
-                  <MenuToggle
-                    ref={toggleRef}
-                    isExpanded={isKebabDropdownOpen}
-                    onClick={this.onKebabDropdownToggle}
-                    variant="plain"
-                    aria-label="Settings and help"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
-                )}
-              >
-                <DropdownList>{kebabDropdownItems}</DropdownList>
-              </Dropdown>
-            </ToolbarItem>
-            <ToolbarItem visibility={{ md: 'hidden' }}>
-              <Dropdown
-                isOpen={isFullKebabDropdownOpen}
-                onSelect={this.onFullKebabSelect}
-                onOpenChange={(isOpen) => this.setState({ isFullKebabDropdownOpen: isOpen })}
-                popperProps={{ position: 'right' }}
-                toggle={(toggleRef) => (
-                  <MenuToggle
-                    ref={toggleRef}
-                    isExpanded={isFullKebabDropdownOpen}
-                    onClick={this.onFullKebabToggle}
-                    variant="plain"
-                    aria-label="Toolbar menu"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
-                )}
-              >
-                <DropdownGroup key="group 2" aria-label="User actions">
-                  <DropdownList>{userDropdownItems}</DropdownList>
-                </DropdownGroup>
-                <Divider />
-                <DropdownList>{kebabDropdownItems}</DropdownList>
-              </Dropdown>
-            </ToolbarItem>
-          </ToolbarGroup>
-          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-            <Dropdown
-              isOpen={isDropdownOpen}
-              onSelect={this.onDropdownSelect}
-              onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
-              popperProps={{ position: 'right' }}
-              toggle={(toggleRef) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  isExpanded={isDropdownOpen}
-                  onClick={this.onDropdownToggle}
-                  icon={<Avatar src={imgAvatar} alt="" />}
-                  isFullHeight
-                >
-                  Ned Username
-                </MenuToggle>
-              )}
-            >
-              <DropdownList>{userDropdownItems}</DropdownList>
-            </Dropdown>
-          </ToolbarItem>
-        </ToolbarContent>
-      </Toolbar>
-    );
-
-    const masthead = (
-      <Masthead>
-        <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
-        <MastheadMain>
-          <MastheadBrand>
-            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          </MastheadBrand>
-        </MastheadMain>
-        <MastheadContent>{headerToolbar}</MastheadContent>
-      </Masthead>
-    );
-
-    return masthead;
-  }
-}
diff --git a/packages/react-core/src/demos/examples/DashboardWrapper.js b/packages/react-core/src/demos/examples/DashboardWrapper.js
index 817d719ef3c..ae529b79de0 100644
--- a/packages/react-core/src/demos/examples/DashboardWrapper.js
+++ b/packages/react-core/src/demos/examples/DashboardWrapper.js
@@ -13,7 +13,7 @@ import {
   Text,
   TextContent
 } from '@patternfly/react-core';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+import DashboardHeader from '@patternfly/react-core/src/demos/examples/Page/DashboardHeader';
 
 export const DashboardBreadcrumb = (
   <Breadcrumb>
diff --git a/packages/react-core/src/demos/examples/Page/DashboardHeader.tsx b/packages/react-core/src/demos/examples/Page/DashboardHeader.tsx
new file mode 100644
index 00000000000..c2ba2f476a0
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Page/DashboardHeader.tsx
@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import {
+  Avatar,
+  Brand,
+  Button,
+  ButtonVariant,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  MenuToggle,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  PageToggleButton
+} from '@patternfly/react-core';
+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 | null;
+}
+
+const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBadge }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem>
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem>
+        <HelpIcon /> Help
+      </DropdownItem>
+    </>
+  );
+
+  const userDropdownItems = (
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  );
+
+  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 (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>
+        <Toolbar id="toolbar" isFullHeight isStatic>
+          <ToolbarContent>
+            <ToolbarGroup
+              variant="icon-button-group"
+              align={{ default: 'alignRight' }}
+              spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+            >
+              {notificationBadge ? (
+                notificationBadge
+              ) : (
+                <ToolbarItem>
+                  <Button
+                    aria-label="Notifications"
+                    variant={ButtonVariant.plain}
+                    icon={<BellIcon />}
+                    onClick={() => {}}
+                  />
+                </ToolbarItem>
+              )}
+              <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+                <ToolbarItem>
+                  <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+                </ToolbarItem>
+              </ToolbarGroup>
+              <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+                <Dropdown
+                  isOpen={isKebabDropdownOpen}
+                  onSelect={onKebabDropdownSelect}
+                  onOpenChange={setIsKebabDropdownOpen}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: React.RefObject<any>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isKebabDropdownOpen}
+                      onClick={onKebabDropdownToggle}
+                      variant="plain"
+                      aria-label="Settings and help"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownList>{kebabDropdownItems}</DropdownList>
+                </Dropdown>
+              </ToolbarItem>
+              <ToolbarItem visibility={{ md: 'hidden' }}>
+                <Dropdown
+                  isOpen={isFullKebabDropdownOpen}
+                  onSelect={onFullKebabSelect}
+                  onOpenChange={setIsFullKebabDropdownOpen}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: React.RefObject<any>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isFullKebabDropdownOpen}
+                      onClick={onFullKebabToggle}
+                      variant="plain"
+                      aria-label="Toolbar menu"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownGroup key="group 2" aria-label="User actions">
+                    <DropdownList>{userDropdownItems}</DropdownList>
+                  </DropdownGroup>
+                  <Divider />
+                  <DropdownList>{kebabDropdownItems}</DropdownList>
+                </Dropdown>
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={onDropdownSelect}
+                onOpenChange={setIsDropdownOpen}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef: React.RefObject<any>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isDropdownOpen}
+                    onClick={onDropdownToggle}
+                    icon={<Avatar src={imgAvatar} alt="" />}
+                    isFullHeight
+                  >
+                    Ned Username
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+};
+
+export default DashboardHeader;
diff --git a/yarn.lock b/yarn.lock
index e8813e3a618..5e531b7a6c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3778,10 +3778,10 @@
     node-addon-api "^3.2.1"
     node-gyp-build "^4.3.0"
 
-"@patternfly/ast-helpers@^1.1.15":
-  version "1.1.15"
-  resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.1.15.tgz#a70ce0e5cd3e6400d84ed8d8fa08371c48ab37fc"
-  integrity sha512-OZRZ1NOByk/p9UjhQOdNdX/WE75QJYmUjXwVvqI3cxuKWI/CnC35s+n/MfABTy1hAmVgY3dYjAuYarDY0P6qdA==
+"@patternfly/ast-helpers@^1.1.16":
+  version "1.1.16"
+  resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.1.16.tgz#4fd8e9cbc8e6bea3c65f9084ae12d8eaca0fcddf"
+  integrity sha512-9+CgK7V9Bh6EnHnj4+qvAP20PVDNFswuFHoCq4GegFbZ72v1TKlOokwODbXqm8iFa8YBO7qrfpIuUaBlmS0chA==
   dependencies:
     acorn "^8.4.1"
     acorn-class-fields "^1.0.0"
@@ -3789,10 +3789,10 @@
     acorn-static-class-features "^1.0.0"
     astring "^1.7.5"
 
-"@patternfly/documentation-framework@^5.0.14":
-  version "5.1.15"
-  resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-5.1.15.tgz#89a18c8562beefdc0173467eb85768aa0a1300eb"
-  integrity sha512-v7pdXL0ug2pLjPuBIwzxvUHhZ5mH7CnSKi4MvkFgwd7KoDLwyNPaWLm0DBBWS3JTTfcwUeDL3/hTEDuzjgKmSw==
+"@patternfly/documentation-framework@^5.0.15":
+  version "5.1.16"
+  resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-5.1.16.tgz#1a71c1877d081b0738a5f54e21a2882651a5f94e"
+  integrity sha512-jLI4jWHBuXlNtBFhSLwDvTSfE5z71eU3yqQ32Dh+//jX5zNk7Iw9nR1oOXfhjDi6bJnVl+jadAaEac5AcZVDAA==
   dependencies:
     "@babel/core" "7.18.2"
     "@babel/plugin-proposal-class-properties" "7.17.12"
@@ -3802,7 +3802,7 @@
     "@babel/plugin-transform-react-jsx" "7.17.12"
     "@babel/preset-env" "7.18.2"
     "@mdx-js/util" "1.6.16"
-    "@patternfly/ast-helpers" "^1.1.15"
+    "@patternfly/ast-helpers" "^1.1.16"
     "@reach/router" "npm:@gatsbyjs/reach-router@1.3.9"
     autoprefixer "9.8.6"
     babel-loader "9.1.2"