ISPN-15108 clean deprecated dropdown

infinispan · Oct 30, 2023 · d69dd1b · d69dd1b
1 parent 1b8c970
commit d69dd1b
Show file tree

Hide file tree

Showing 19 changed files with 215 additions and 210 deletions.
diff --git a/src/app/AccessManagement/AccessManager.tsx b/src/app/AccessManagement/AccessManager.tsx
@@ -99,10 +99,12 @@ const AccessManager = () => {
           shouldFocusToggleOnSelect
         >
           <DropdownList>
-            <DropdownItem value={0}
-                          key="flushCacheAction"
-                          data-cy="flushCacheAction"
-                          onClick={() => setIsFlushCache(true)}>
+            <DropdownItem
+              value={0}
+              key="flushCacheAction"
+              data-cy="flushCacheAction"
+              onClick={() => setIsFlushCache(true)}
+            >
               {t('access-management.flush-cache-action')}
             </DropdownItem>
           </DropdownList>
@@ -131,11 +133,13 @@ const AccessManager = () => {
       </PageSection>
       <PageSection variant={PageSectionVariants.default}>
         {buildSelectedContent}
-        <FlushRoleCacheModal isModalOpen={isFlushCache}
-                             closeModal={() => setIsFlushCache(false)}
-                             submitModal={() => {
-                               setIsFlushCache(false);
-                             }}/>
+        <FlushRoleCacheModal
+          isModalOpen={isFlushCache}
+          closeModal={() => setIsFlushCache(false)}
+          submitModal={() => {
+            setIsFlushCache(false);
+          }}
+        />
       </PageSection>
     </React.Fragment>
   );

diff --git a/src/app/AccessManagement/FlushRoleCacheModal.tsx b/src/app/AccessManagement/FlushRoleCacheModal.tsx
@@ -29,20 +29,13 @@ const FlushRoleCacheModal = (props: { isModalOpen: boolean; submitModal: () => v
         >
           {t('access-management.flush-cache-action')}
         </Button>,
-        <Button
-          key={'Cancel'}
-          aria-label={'Cancel'}
-          variant={ButtonVariant.link}
-          onClick={props.closeModal}
-        >
+        <Button key={'Cancel'} aria-label={'Cancel'} variant={ButtonVariant.link} onClick={props.closeModal}>
           {t('common.actions.cancel')}
         </Button>
       ]}
     >
       <TextContent>
-        <Text>
-          {t('access-management.modal-flush-cache-description')}
-        </Text>
+        <Text>{t('access-management.modal-flush-cache-description')}</Text>
       </TextContent>
     </Modal>
   );

diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
@@ -26,15 +26,11 @@ import {
   ToolbarItem,
   Tooltip,
   PageSidebarBody,
-  Switch
+  Switch,
+  MenuToggleElement,
+  MenuToggle
 } from '@patternfly/react-core';
-import {
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
-  DropdownPosition
-} from '@patternfly/react-core/deprecated';
+import { Dropdown, DropdownGroup, DropdownItem } from '@patternfly/react-core';
 import icon from '!!url-loader!@app/assets/images/brand.svg';
 import { Link, NavLink, Redirect } from 'react-router-dom';
 import { IAppRoute, routes } from '@app/routes';
@@ -61,7 +57,7 @@ interface IAppLayout {
 const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
-  const {theme,toggleTheme} = useContext(ThemeContext);
+  const { theme, toggleTheme } = useContext(ThemeContext);
 
   const history = useHistory();
   const { connectedUser } = useConnectedUser();
@@ -95,40 +91,46 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
     </Flex>
   );
 
-  const userDropdownItems = [
-    <DropdownGroup key="user-action-group">
-      <DropdownItem
-        key="user-action-group-1 logout"
-        onClick={() => {
-          if (KeycloakService.Instance.isInitialized() && KeycloakService.Instance.authenticated()) {
-            KeycloakService.Instance.logout(ConsoleServices.landing());
-          } else {
-            ConsoleServices.authentication().logOutLink();
-            history.push('/welcome');
-            window.location.reload();
-          }
-        }}
-      >
-        Logout
-      </DropdownItem>
-    </DropdownGroup>
-  ];
-
   const userActions = () => {
     const chromeAgent = navigator.userAgent.toString().indexOf('Chrome') > -1;
     if (chromeAgent || (KeycloakService.Instance.isInitialized() && KeycloakService.Instance.authenticated())) {
       return (
-        <ToolbarItem>
-          <Dropdown
-            isFullHeight
-            onSelect={() => setIsDropdownOpen(!isDropdownOpen)}
-            isOpen={isDropdownOpen}
-            toggle={
-              <DropdownToggle onToggle={() => setIsDropdownOpen(!isDropdownOpen)}>{connectedUser.name}</DropdownToggle>
-            }
-            dropdownItems={userDropdownItems}
-          />
-        </ToolbarItem>
+        <ToolbarGroup>
+          <ToolbarItem>
+            <Dropdown
+              onSelect={() => setIsDropdownOpen(!isDropdownOpen)}
+              isOpen={isDropdownOpen}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isFullHeight
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                  isExpanded={isDropdownOpen}
+                >
+                  {connectedUser.name}
+                </MenuToggle>
+              )}
+              shouldFocusToggleOnSelect
+            >
+              <DropdownGroup key="user-action-group">
+                <DropdownItem
+                  key="user-action-group-1 logout"
+                  onClick={() => {
+                    if (KeycloakService.Instance.isInitialized() && KeycloakService.Instance.authenticated()) {
+                      KeycloakService.Instance.logout(ConsoleServices.landing());
+                    } else {
+                      ConsoleServices.authentication().logOutLink();
+                      history.push('/welcome');
+                      window.location.reload();
+                    }
+                  }}
+                >
+                  {t('layout.logout')}
+                </DropdownItem>
+              </DropdownGroup>
+            </Dropdown>
+          </ToolbarItem>
+        </ToolbarGroup>
       );
     }
     return (
@@ -143,19 +145,6 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
     );
   };
 
-  const helpDropdownItems = [
-    <DropdownItem
-      onClick={() => window.open(t('brandname.documentation-link'), '_blank')}
-      key="documentation"
-      icon={<ExternalLinkAltIcon />}
-    >
-      {t('layout.documentation-name')}
-    </DropdownItem>,
-    <DropdownItem onClick={() => setIsAboutOpen(!isAboutOpen)} key="about" component="button">
-      {t('layout.about-name')}
-    </DropdownItem>
-  ];
-
   const headerToolbar = (
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
@@ -164,29 +153,46 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
           align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
-          <Switch
-            id="darkThemeSwitch"
-            isChecked={theme === 'dark'}
-            onChange={toggleTheme}
-            ouiaId="DarkThemeOuiaId"
-            label={t('layout.dark-theme')}
-            className="darkThemeSwitch"
-          />
+          <ToolbarItem>
+            <Switch
+              id="darkThemeSwitch"
+              isChecked={theme === 'dark'}
+              onChange={toggleTheme}
+              ouiaId="DarkThemeOuiaId"
+              label={t('layout.dark-theme')}
+              className="darkThemeSwitch"
+            />
+          </ToolbarItem>
           <ToolbarItem>
             <Dropdown
-              data-cy="aboutInfoQuestionMark"
               id="aboutInfoQuestionMark"
-              position={DropdownPosition.right}
-              isPlain
               onSelect={() => setIsHelpOpen(!isHelpOpen)}
               isOpen={isHelpOpen}
-              toggle={
-                <DropdownToggle toggleIndicator={null} onToggle={() => setIsHelpOpen(!isHelpOpen)}>
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  data-cy="aboutInfoQuestionMark"
+                  variant={'plain'}
+                  ref={toggleRef}
+                  isFullHeight
+                  onClick={() => setIsHelpOpen(!isHelpOpen)}
+                  isExpanded={isHelpOpen}
+                >
                   <QuestionCircleIcon />
-                </DropdownToggle>
-              }
-              dropdownItems={helpDropdownItems}
-            />
+                </MenuToggle>
+              )}
+            >
+              <DropdownItem
+                onClick={() => window.open(t('brandname.documentation-link'), '_blank')}
+                key="documentation"
+                icon={<ExternalLinkAltIcon />}
+              >
+                {t('layout.documentation-name')}
+              </DropdownItem>
+              ,
+              <DropdownItem onClick={() => setIsAboutOpen(!isAboutOpen)} key="about" component="button">
+                {t('layout.about-name')}
+              </DropdownItem>
+            </Dropdown>
           </ToolbarItem>
         </ToolbarGroup>
         {!ConsoleServices.authentication().isNotSecured() && userActions()}

diff --git a/src/app/Caches/Configuration/CacheConfiguration.tsx b/src/app/Caches/Configuration/CacheConfiguration.tsx
@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import {
   Alert,
   AlertActionLink,
@@ -23,9 +23,9 @@ import { global_BackgroundColor_100 } from '@patternfly/react-tokens';
 
 const CacheConfiguration = (props: { cacheName: string; editable: boolean; config: string }) => {
   const { t } = useTranslation();
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
   const encodingDocs = t('brandname.encoding-docs-link');
-  const {syntaxHighLighterTheme} = useContext(ThemeContext)
+  const { syntaxHighLighterTheme } = useContext(ThemeContext);
   const yamlConfig = useFetchConfigurationYAML(props.cacheName);
   const xmlConfig = useFetchConfigurationXML(props.cacheName);
 
@@ -70,7 +70,12 @@ const CacheConfiguration = (props: { cacheName: string; editable: boolean; confi
           <ClipboardCopy isReadOnly isCode variant={ClipboardCopyVariant.inline}>
             {config}
           </ClipboardCopy>
-          <SyntaxHighlighter wrapLines={false} style={syntaxHighLighterTheme} useInlineStyles={true} showLineNumbers={true}>
+          <SyntaxHighlighter
+            wrapLines={false}
+            style={syntaxHighLighterTheme}
+            useInlineStyles={true}
+            showLineNumbers={true}
+          >
             {config}
           </SyntaxHighlighter>
         </CardBody>
@@ -80,7 +85,7 @@ const CacheConfiguration = (props: { cacheName: string; editable: boolean; confi
 
   return (
     <React.Fragment>
-      <Tabs defaultActiveKey={0} style={theme === 'dark'? {} : { backgroundColor: global_BackgroundColor_100.value }}>
+      <Tabs defaultActiveKey={0} style={theme === 'dark' ? {} : { backgroundColor: global_BackgroundColor_100.value }}>
         <Tab eventKey={0} title={<TabTitleText>JSON</TabTitleText>} tabContentId="tab1" tabContentRef={contentRef1} />
         <Tab eventKey={1} title={<TabTitleText>XML</TabTitleText>} tabContentId="tab2" tabContentRef={contentRef2} />
         <Tab eventKey={2} title={<TabTitleText>YAML</TabTitleText>} tabContentId="tab3" tabContentRef={contentRef3} />

diff --git a/src/app/Caches/Configuration/DetailConfigurations.tsx b/src/app/Caches/Configuration/DetailConfigurations.tsx
@@ -49,7 +49,7 @@ const DetailConfigurations: React.FunctionComponent<any> = (props) => {
     perPage: 10
   });
 
-  const {syntaxHighLighterTheme} = useContext(ThemeContext)
+  const { syntaxHighLighterTheme } = useContext(ThemeContext);
 
   useEffect(() => {
     setFilteredTemplates(cacheTemplates);

diff --git a/src/app/Caches/Create/CacheConfigEditor.tsx b/src/app/Caches/Create/CacheConfigEditor.tsx
@@ -28,7 +28,7 @@ const CacheConfigEditor = (props: {
   cacheEditorModifier: (CacheEditorStep) => void;
   setReviewConfig: (string) => void;
 }) => {
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
   const sampleConfig =
     '{\n' +
     '  "distributed-cache": {\n' +

diff --git a/src/app/Caches/Create/Features/PersistentCacheConfigurator.tsx b/src/app/Caches/Create/Features/PersistentCacheConfigurator.tsx
@@ -28,7 +28,7 @@ import { global_spacer_md } from '@patternfly/react-tokens';
 import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const PersistentCacheConfigurator = () => {
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
   const { configuration, setConfiguration } = useCreateCache();
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');

diff --git a/src/app/Caches/Create/ReviewCacheConfig.tsx b/src/app/Caches/Create/ReviewCacheConfig.tsx
@@ -10,7 +10,7 @@ const ReviewCacheConfig = (props: { setReviewConfig: (string) => void }) => {
   const { configuration } = useCreateCache();
   const { t } = useTranslation();
   const [config, setConfig] = useState(CacheConfigUtils.createCacheConfigFromData(configuration));
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
 
   useEffect(() => {
     const jsonFormatConfig = CacheConfigUtils.createCacheConfigFromData(configuration);