katello 4.3.0.rc1 → 4.3.0.rc4

data/webpack/scenes/ContentViews/Publish/CVPublishForm.js

@@ -1,80 +1,93 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Alert, Switch, Flex, FlexItem, TextContent, Text, TextVariants, Form, FormGroup, TextArea } from '@patternfly/react-core';
+import {
+  Alert, Switch, TextContent, Text,
+  TextVariants, Form, FormGroup, TextArea, AlertActionCloseButton,
+} from '@patternfly/react-core';
 import { EnterpriseIcon, RegistryIcon } from '@patternfly/react-icons';
 import EnvironmentPaths from '../components/EnvironmentPaths/EnvironmentPaths';
 import ComponentEnvironments from '../Details/ComponentContentViews/ComponentEnvironments';
 import './cvPublishForm.scss';
+import WizardHeader from '../components/WizardHeader';
 
 const CVPublishForm = ({
   description,
   setDescription,
-  details,
+  details: {
+    name, composite, next_version: nextVersion,
+  },
   userCheckedItems,
   setUserCheckedItems,
   promote,
   setPromote,
   forcePromote,
 }) => {
-  const {
-    name, composite, next_version: nextVersion,
-  } = details;
+  const [alertDismissed, setAlertDismissed] = useState(false);
 
+  const checkPromote = (checked) => {
+    if (!checked) {
+      setUserCheckedItems([]);
+    }
+    setPromote(checked);
+  };
   return (
     <>
-      <>
-        <TextContent>
-          <Text style={{ marginBottom: '1em' }} component={TextVariants.h1}>{__('Publish')}</Text>
-        </TextContent>
-        <Flex flex={{ default: 'inlineFlex' }}>
-          <FlexItem>{__('A new version of ')}<b>{composite ? <RegistryIcon /> : <EnterpriseIcon />} {name}</b>
+      <WizardHeader
+        title={__('Publish')}
+        description={
+          <>{__('A new version of ')}<b>{composite ? <RegistryIcon /> : <EnterpriseIcon />} {name}</b>
             {__(' will be created and automatically promoted to the ' +
-          'Library environment. You can promote to other environments as well. ')}
-          </FlexItem>
-        </Flex>
-        <TextContent>
-          <Text style={{ marginTop: '1em', marginBottom: '1em' }} component={TextVariants.h3}>{__('Publish new version - ')}{nextVersion || '1.0'}</Text>
-        </TextContent>
-        <Form>
-          <FormGroup label="Description" fieldId="description">
-            <TextArea
-              isRequired
-              type="text"
-              id="description"
-              aria-label="input_description"
-              name="description"
-              value={description}
-              onChange={value => setDescription(value)}
-            />
-          </FormGroup>
-          <FormGroup label="Promote" fieldId="promote" style={{ marginBottom: '2em', outlineStyle: 'none' }}>
-            <Switch
-              id="promote-switch"
-              aria-label="promote-switch"
-              isChecked={promote}
-              onChange={checked => setPromote(checked)}
-            />
-          </FormGroup>
-        </Form>
-      </>
-      <>
-        {forcePromote.length > 0 && (
-        <Alert variant="info" isInline title="Force Promotion">
-          <p>{__('Selected environments are out of the environment order. ' +
-            'The recommended practice is to promote to the next environment in the path.')}
-          </p>
-          <ComponentEnvironments environments={forcePromote} />
-        </Alert>
-        )
-        }
-        {promote &&
+              'Library environment. You can promote to other environments as well. ')
+            }
+          </>}
+      />
+      <TextContent>
+        <Text component={TextVariants.h3}>{__('Publish new version - ')}{nextVersion || '1.0'}</Text>
+      </TextContent>
+      <Form>
+        <FormGroup label={__('Description')} fieldId="description">
+          <TextArea
+            isRequired
+            type="text"
+            id="description"
+            aria-label="input_description"
+            name="description"
+            value={description}
+            onChange={setDescription}
+          />
+        </FormGroup>
+        <FormGroup label={__('Promote')} fieldId="promote">
+          <Switch
+            id="promote-switch"
+            aria-label="promote-switch"
+            isChecked={promote}
+            onChange={checkPromote}
+          />
+        </FormGroup>
+      </Form>
+      {!alertDismissed && promote && forcePromote.length > 0 && (
+        <Alert
+          variant="info"
+          isInline
+          title={__('Force promotion')}
+          actionClose={<AlertActionCloseButton onClose={() => setAlertDismissed(true)} />}
+        >
+          <TextContent>
+            {forcePromote.length > 1 ? __('Selected environments ') : __('Selected environment ')}
+            <ComponentEnvironments environments={forcePromote} />
+            {forcePromote.length > 1 ?
+              __(' are out of the environment path order. The recommended practice is to promote to the next environment in the path.') :
+              __(' is out of the environment path order. The recommended practice is to promote to the next environment in the path.')
+            }
+          </TextContent>
+        </Alert>)}
+      {promote &&
         <EnvironmentPaths
           userCheckedItems={userCheckedItems}
           setUserCheckedItems={setUserCheckedItems}
         />
-        }
-      </>
+      }
     </>
   );
 };

data/webpack/scenes/ContentViews/Publish/CVPublishReview.js

@@ -1,16 +1,23 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import {
+  TableComposable, Thead, Tbody, Tr, Th,
+  Td,
+} from '@patternfly/react-table';
+import { EnterpriseIcon, RegistryIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import ContentViewIcon from '../components/ContentViewIcon';
 import InactiveText from '../components/InactiveText';
 import ComponentEnvironments from '../Details/ComponentContentViews/ComponentEnvironments';
 import { selectEnvironmentPaths, selectEnvironmentPathsStatus } from '../components/EnvironmentPaths/EnvironmentPathSelectors';
+import WizardHeader from '../components/WizardHeader';
 
 const CVPublishReview = ({
-  details,
+  details: {
+    name, composite, next_version: nextVersion,
+  },
   userCheckedItems,
 }) => {
   const environmentPathResponse = useSelector(selectEnvironmentPaths);
@@ -26,33 +33,38 @@ const CVPublishReview = ({
     return [];
   }, [environmentPathResponse, environmentPathLoading, userCheckedItems]);
 
-  const {
-    name, composite, next_version: nextVersion,
-  } = details;
-
   return (
-    <TableComposable aria-label="Review Table">
-      <Thead>
-        <Tr>
-          <Th>{__('Content view')}</Th>
-          <Th>{__('Version')}</Th>
-          <Th>{__('Environments')}</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        <Tr>
-          <Td>
-            <><ContentViewIcon composite={composite} description={name} /><InactiveText text={__('Newly published')} /></>
-          </Td>
-          <Td>
-            {__('Version')} {nextVersion}
-          </Td>
-          <Td>
-            <ComponentEnvironments environments={promotedToEnvironments} />
-          </Td>
-        </Tr>
-      </Tbody>
-    </TableComposable>
+    <>
+      <WizardHeader
+        title={__('Review details')}
+        description={
+          <>
+            {__('Review your currently selected changes for ')}<b>{composite ? <RegistryIcon /> : <EnterpriseIcon />} {name}.</b>
+          </>}
+      />
+      <TableComposable aria-label="Review Table">
+        <Thead>
+          <Tr>
+            <Th>{__('Content view name')}</Th>
+            <Th>{__('Version')}</Th>
+            <Th>{__('Environments')}</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td>
+              <><ContentViewIcon composite={composite} description={name} /><InactiveText text={__('Newly published')} /></>
+            </Td>
+            <Td>
+              {__('Version')} {nextVersion}
+            </Td>
+            <Td>
+              <ComponentEnvironments environments={promotedToEnvironments} />
+            </Td>
+          </Tr>
+        </Tbody>
+      </TableComposable>
+    </>
   );
 };
 

data/webpack/scenes/ContentViews/Publish/PublishContentViewWizard.js

@@ -33,7 +33,7 @@ const PublishContentViewWizard = ({
   const steps = [
     {
       id: 1,
-      name: 'Publish',
+      name: __('Publish'),
       component: <CVPublishForm
         description={description}
         setDescription={setDescription}
@@ -47,11 +47,11 @@ const PublishContentViewWizard = ({
       />,
     },
     {
-      id: 2, name: 'Review', component: <CVPublishReview details={details} userCheckedItems={userCheckedItems} show={show} />, nextButtonText: 'Finish',
+      id: 2, name: __('Review details'), component: <CVPublishReview details={details} userCheckedItems={userCheckedItems} show={show} />, nextButtonText: 'Finish',
     },
     {
       id: 3,
-      name: 'Finish',
+      name: __('Finish'),
       component: <CVPublishFinish
         description={description}
         setDescription={setDescription}

data/webpack/scenes/ContentViews/Publish/__tests__/publishContentView.test.js

@@ -23,9 +23,9 @@ test('Can call API and show Wizard', async (done) => {
   const { getByText } = renderWithRedux(<PublishContentViewWizard
     details={cvDetailData}
     show
-    setIsOpen={() => {}}
+    setIsOpen={() => { }}
     currentStep={1}
-    setCurrentStep={() => {}}
+    setCurrentStep={() => { }}
   />);
 
   await patientlyWaitFor(() => expect(getByText('Publish new version - 6.0')).toBeInTheDocument());
@@ -44,9 +44,9 @@ test('Can show Wizard and show environment paths', async (done) => {
   const { getByText, getByLabelText } = renderWithRedux(<PublishContentViewWizard
     details={cvDetailData}
     show
-    setIsOpen={() => {}}
+    setIsOpen={() => { }}
     currentStep={1}
-    setCurrentStep={() => {}}
+    setCurrentStep={() => { }}
   />);
 
   await patientlyWaitFor(() => expect(getByText('Publish new version - 6.0')).toBeInTheDocument());
@@ -75,9 +75,9 @@ test('Can show and hide force promotion alert', async (done) => {
   } = renderWithRedux(<PublishContentViewWizard
     details={cvDetailData}
     show
-    setIsOpen={() => {}}
+    setIsOpen={() => { }}
     currentStep={1}
-    setCurrentStep={() => {}}
+    setCurrentStep={() => { }}
   />);
 
   await patientlyWaitFor(() => expect(getByText('Publish new version - 6.0')).toBeInTheDocument());
@@ -95,24 +95,24 @@ test('Can show and hide force promotion alert', async (done) => {
 
   // check outOfOrderEnv
   fireEvent.click(getByLabelText(outOfOrderEnv));
-  expect(getByText('Force Promotion')).toBeInTheDocument();
+  expect(getByText('Force promotion')).toBeInTheDocument();
   expect(getAllByText(outOfOrderEnv)[0].closest('a'))
     .toHaveAttribute('href', '/lifecycle_environments/5');
 
   // check outOfOrder env in 2nd path
   fireEvent.click(getByLabelText(outOfOrderEnv2));
-  expect(getByText('Force Promotion')).toBeInTheDocument();
+  expect(getByText('Force promotion')).toBeInTheDocument();
   expect(getAllByText(outOfOrderEnv2)[0].closest('a'))
     .toHaveAttribute('href', '/lifecycle_environments/7');
 
   // uncheck outOfOrderEnv
   fireEvent.click(getByLabelText(outOfOrderEnv));
   fireEvent.click(getByLabelText(outOfOrderEnv2));
-  expect(queryByText('Force Promotion')).not.toBeInTheDocument();
+  expect(queryByText('Force promotion')).not.toBeInTheDocument();
 
   // Check inOrderEnv
   fireEvent.click(getByLabelText(inOrderEnv));
-  expect(queryByText('Force Promotion')).not.toBeInTheDocument();
+  expect(queryByText('Force promotion')).not.toBeInTheDocument();
 
   useSelectorMock.mockClear();
   assertNockRequest(scope, done);
@@ -128,9 +128,9 @@ test('Can show Wizard form and move to review', async (done) => {
   const { getByText } = renderWithRedux(<PublishContentViewWizard
     details={cvDetailData}
     show
-    setIsOpen={() => {}}
+    setIsOpen={() => { }}
     currentStep={1}
-    setCurrentStep={() => {}}
+    setCurrentStep={() => { }}
   />);
   const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');
   useSelectorMock.mockReturnValue(environmentPathsData);
@@ -164,9 +164,9 @@ test('Can move to Finish step and publish CV', async (done) => {
   const { getByText } = renderWithRedux(<PublishContentViewWizard
     details={cvDetailData}
     show
-    setIsOpen={() => {}}
+    setIsOpen={() => { }}
     currentStep={1}
-    setCurrentStep={() => {}}
+    setCurrentStep={() => { }}
   />);
   const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');
   useSelectorMock.mockReturnValue(environmentPathsData);

data/webpack/scenes/ContentViews/Publish/cvPublishForm.scss

@@ -1,3 +1,9 @@
 .pf-c-switch {
   --pf-c-switch__input--focus__toggle--OutlineWidth: 0;
+}
+
+.pf-c-wizard__main-body {
+  display: flex;
+  grid-gap: 16px;
+  flex-direction: column;
 }

data/webpack/scenes/ContentViews/Table/ContentViewsTable.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useSelector, useDispatch } from 'react-redux';
-import { omit } from 'lodash';
+import { omit, upperCase } from 'lodash';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import { Button } from '@patternfly/react-core';
@@ -24,6 +24,7 @@ const ContentViewTable = () => {
   const status = useSelector(selectContentViewStatus);
   const error = useSelector(selectContentViewError);
   const [table, setTable] = useState({ rows: [], columns: [] });
+  const [sortBy, setSortBy] = useState({});
   const [rowMappingIds, setRowMappingIds] = useState([]);
   const [searchQuery, updateSearchQuery] = useState('');
   const loadingResponse = status === STATUS.PENDING;
@@ -104,12 +105,16 @@ const ContentViewTable = () => {
         setRowMappingIds(newRowMappingIds);
         setCvTableStatus(tableStatus());
       }
+      return () => {
+        // This sets the loading state so that the table doesn't flicker on return
+        setCvTableStatus(STATUS.PENDING);
+      };
     },
     [response, status, loadingResponse, setTable, setRowMappingIds,
       setCvResults, setCvTableStatus, setCurrentStep, cvResults, rowMappingIds],
   );
 
-  const onCollapse = (event, rowId, isOpen) => {
+  const onCollapse = (_event, rowId, isOpen) => {
     let rows;
     if (rowId === -1) {
       rows = table.rows.map(row => ({ ...row, isOpen }));
@@ -159,11 +164,45 @@ const ContentViewTable = () => {
     ];
   };
 
-  const additionalListeners = new Array(isPublishModalOpen);
+  const indexToSortVariable = (key) => {
+    switch (key) {
+      case 2:
+        return 'name';
+      default:
+        return undefined;
+    }
+  };
+
+  const onSort = (_event, index, direction) => {
+    setCvTableStatus(STATUS.PENDING);
+    setSortBy({ index, direction });
+  };
+
+  const { index: sortByIndex, direction } = sortBy;
+  const fetchItems = useCallback(
+    params =>
+      getContentViews({
+        ...params,
+        ...sortByIndex ? {
+          sort_by: indexToSortVariable(sortByIndex),
+          sort_order: upperCase(direction),
+        } : {},
+      }),
+    [sortByIndex, direction],
+  );
+
   const emptyContentTitle = __("You currently don't have any Content Views.");
   const emptyContentBody = __('A content view can be added by using the "Create content view" button above.');
   const emptySearchTitle = __('No matching content views found');
   const emptySearchBody = __('Try changing your search settings.');
+  const {
+    id,
+    latestVersionId,
+    latestVersionName,
+    latestVersionEnvironments,
+    environments,
+    versions,
+  } = actionableCvDetails;
 
   const { rows, columns } = table;
   return (
@@ -179,12 +218,14 @@ const ContentViewTable = () => {
         actionResolver,
         searchQuery,
         updateSearchQuery,
-        additionalListeners,
+        fetchItems,
       }}
+      additionalListeners={[isPublishModalOpen, sortByIndex, direction]}
+      sortBy={sortBy}
+      onSort={onSort}
       bookmarkController="katello_content_views"
       variant={TableVariant.compact}
       status={cvTableStatus}
-      fetchItems={useCallback(getContentViews, [])}
       onCollapse={onCollapse}
       canSelectAll={false}
       cells={columns}
@@ -210,17 +251,17 @@ const ContentViewTable = () => {
           }
           {isPromoteModalOpen &&
             <ContentViewVersionPromote
-              cvId={actionableCvDetails.id}
-              versionIdToPromote={actionableCvDetails.latestVersionId}
-              versionNameToPromote={actionableCvDetails.latestVersionName}
-              versionEnvironments={actionableCvDetails.latestVersionEnvironments}
+              cvId={id && Number(id)}
+              versionIdToPromote={latestVersionId}
+              versionNameToPromote={latestVersionName}
+              versionEnvironments={latestVersionEnvironments}
               setIsOpen={setIsPromoteModalOpen}
             />
           }
           {isDeleteModalOpen && <ContentViewDeleteWizard
-            cvId={actionableCvDetails.id}
-            cvEnvironments={actionableCvDetails.environments}
-            cvVersions={actionableCvDetails.versions}
+            cvId={id && Number(id)}
+            cvEnvironments={environments}
+            cvVersions={versions}
             show={isDeleteModalOpen}
             setIsOpen={setIsDeleteModalOpen}
             currentStep={currentStep}

data/webpack/scenes/ContentViews/Table/tableDataGenerator.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fitContent, expandable } from '@patternfly/react-table';
+import { fitContent, expandable, sortable } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -12,7 +12,13 @@ import LastSync from '../Details/Repositories/LastSync';
 
 export const buildColumns = () => [
   { title: __('Type'), cellFormatters: [expandable], transforms: [fitContent] },
-  __('Name'), __('Last published'), __('Last task'), __('Latest version'),
+  {
+    title: __('Name'),
+    transforms: [sortable],
+  },
+  __('Last published'),
+  __('Last task'),
+  __('Latest version'),
 ];
 
 const buildRow = (contentView) => {
@@ -22,12 +28,12 @@ const buildRow = (contentView) => {
     latest_version_environments: latestVersionEnvironments, last_task: lastTask,
   } = contentView;
   /* eslint-enable max-len */
-  const { last_sync_words: lastSyncWords } = lastTask || {};
+  const { last_sync_words: lastSyncWords, started_at: startedAt } = lastTask || {};
   const row = [
     { title: <ContentViewIcon composite={composite ? true : undefined} /> },
     { title: <Link to={`${urlBuilder('content_views', '')}${id}`}>{name}</Link> },
     { title: lastPublished ? <LongDateTime date={lastPublished} showRelativeTimeTooltip /> : <InactiveText text={__('Not yet published')} /> },
-    { title: <LastSync lastSync={lastTask} lastSyncWords={lastSyncWords} emptyMessage="N/A" /> },
+    { title: <LastSync startedAt={startedAt} lastSync={lastTask} lastSyncWords={lastSyncWords} emptyMessage="N/A" /> },
     {
       title: latestVersion ? <ContentViewVersionCell {...{
         id, latestVersion, latestVersionId, latestVersionEnvironments,
@@ -87,8 +93,8 @@ const buildExpandableRows = (contentViews) => {
             cvName={name}
             cvComposite={composite}
             {...{
- activationKeys, hosts, relatedCVCount, relatedCompositeCVs,
-}}
+              activationKeys, hosts, relatedCVCount, relatedCompositeCVs,
+            }}
           />,
           props: {
             colSpan: 2,

data/webpack/scenes/ContentViews/__tests__/contentViewPage.test.js

@@ -355,9 +355,9 @@ test('Displays Create Content View and opens modal with Form', async () => {
   expect(queryByText('Label')).not.toBeInTheDocument();
   expect(queryByText('Composite content view')).not.toBeInTheDocument();
   expect(queryByText('Component content view')).not.toBeInTheDocument();
-  expect(queryByText('Solve Dependencies')).not.toBeInTheDocument();
-  expect(queryByText('Auto Publish')).not.toBeInTheDocument();
-  expect(queryByText('Import Only')).not.toBeInTheDocument();
+  expect(queryByText('Solve dependencies')).not.toBeInTheDocument();
+  expect(queryByText('Auto publish')).not.toBeInTheDocument();
+  expect(queryByText('Import only')).not.toBeInTheDocument();
 
   getByLabelText('create_content_view').click();
 
@@ -366,9 +366,9 @@ test('Displays Create Content View and opens modal with Form', async () => {
   expect(getByText('Label')).toBeInTheDocument();
   expect(getByText('Composite content view')).toBeInTheDocument();
   expect(getByText('Component content view')).toBeInTheDocument();
-  expect(getByText('Solve Dependencies')).toBeInTheDocument();
-  expect(queryByText('Auto Publish')).not.toBeInTheDocument();
-  expect(getByText('Import Only')).toBeInTheDocument();
+  expect(getByText('Solve dependencies')).toBeInTheDocument();
+  expect(queryByText('Auto publish')).not.toBeInTheDocument();
+  expect(getByText('Import only')).toBeInTheDocument();
 });
 
 /* eslint-enable no-useless-escape */

data/webpack/scenes/ContentViews/components/ContentViewIcon.js

@@ -1,18 +1,21 @@
 import React from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 import { EnterpriseIcon, RegistryIcon } from '@patternfly/react-icons';
 import './contentViewIcon.scss';
 
-const ContentViewIcon = ({ composite, count, description }) => {
+const ContentViewIcon = ({
+  composite, count, description, style,
+}) => {
   const props = {
-    title: composite ? 'composite' : 'component',
-    className: 'svg-icon-centered',
+    title: composite ? __('Composite') : __('Component'),
+    className: composite ? 'svg-icon-composite' : 'svg-icon-component',
   };
   return (
-    <div aria-label="content_view_icon" className="svg-centered-container">
-      {count}
-      {composite ? <RegistryIcon {...props} /> : <EnterpriseIcon {...props} />}
-      {description}
+    <div aria-label="content_view_icon" className="svg-centered-container" style={style}>
+      {count && <span className="composite-component-count">{count}</span>}
+      {composite ? <RegistryIcon size="md" {...props} /> : <EnterpriseIcon size="sm" {...props} />}
+      <span>{description}</span>
     </div>
   );
 };
@@ -21,12 +24,14 @@ ContentViewIcon.propTypes = {
   composite: PropTypes.bool,
   count: PropTypes.node,
   description: PropTypes.node,
+  style: PropTypes.shape({}),
 };
 
 ContentViewIcon.defaultProps = {
   composite: false,
   count: null,
   description: null,
+  style: {},
 };
 
 export default ContentViewIcon;

data/webpack/scenes/ContentViews/components/ContentViewsCounter.js

@@ -18,7 +18,7 @@ const ContentViewsCounter = () => {
         <b>
           <Flex>
             <FlexItem spacer={{ default: 'spacerXs' }}>
-              <ContentViewIcon composite={false} description={__('Component content views')} count={component || <InProgressIcon />} />
+              <ContentViewIcon composite={false} description={__('Component content views')} count={(component || component === 0) ? component : <InProgressIcon />} />
             </FlexItem>
             <FlexItem>
               <Tooltip
@@ -37,7 +37,7 @@ const ContentViewsCounter = () => {
         <b>
           <Flex>
             <FlexItem spacer={{ default: 'spacerXs' }}>
-              <ContentViewIcon composite description={__('Composite content views')} count={composite || <InProgressIcon />} />
+              <ContentViewIcon composite description={__('Composite content views')} count={(composite || composite === 0) ? composite : <InProgressIcon />} />
             </FlexItem>
             <FlexItem>
               <Tooltip