Refs #36576 - Remove unecessary react fragments, translate necessary …

…strings, fix host limit issue with edit button, make akId required, import useState in delete menu
Katello · Jul 7, 2023 · da24d9d · da24d9d
1 parent a34175d
commit da24d9d
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 65 deletions.
diff --git a/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.js b/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.js
@@ -6,6 +6,7 @@ import {
   useDispatch,
   useSelector,
 } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
@@ -53,7 +54,9 @@ const ActivationKeyDetails = ({ match }) => {
       <Panel className="ak-details-header">
         <div className="breadcrumb-bar-pf4">
           <Breadcrumb ouiaId="ak-breadcrumbs" className="breadcrumb-display">
-            <BreadcrumbItem className="breadcrumb-list" to="/activation_keys">Activation keys</BreadcrumbItem>
+            <BreadcrumbItem className="breadcrumb-list" to="/activation_keys">
+              {__('Activation keys')}
+            </BreadcrumbItem>
             <BreadcrumbItem to="#" isActive>
               {akDetails.name}
             </BreadcrumbItem>
@@ -71,7 +74,7 @@ const ActivationKeyDetails = ({ match }) => {
                 <Split hasGutter style={{ display: 'inline-flex' }}>
                   <SplitItem>
                     <Label>
-                      {akDetails.usageCount}/{akDetails.unlimitedHosts ? 'Unlimited' : akDetails.maxHosts}
+                      {akDetails.usageCount}/{akDetails.unlimitedHosts ? __('Unlimited') : akDetails.maxHosts}
                     </Label>
                   </SplitItem>
                 </Split>
@@ -94,7 +97,7 @@ const ActivationKeyDetails = ({ match }) => {
         <div className="ak-details-description">
           <TextContent>
             <Text ouiaId="ak-description" component={TextVariants.p}>
-              {akDetails.description ? akDetails.description : 'Description empty'}
+              {akDetails.description ? akDetails.description : <span style={{ color: '#c1c1c1' }}>{__('No description provided')}</span>}
             </Text>
           </TextContent>
         </div>

diff --git a/webpack/scenes/ActivationKeys/Details/components/DeleteMenu.js b/webpack/scenes/ActivationKeys/Details/components/DeleteMenu.js
@@ -1,10 +1,13 @@
-import React from 'react';
+import React, {
+  useState,
+} from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownItem, KebabToggle, DropdownPosition } from '@patternfly/react-core';
 import { noop } from 'foremanReact/common/helpers';
+import { translate as __ } from 'foremanReact/common/I18n';
 
 const DeleteMenu = ({ handleModalToggle, akId }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const onToggle = (isOpenValue) => {
     setIsOpen(isOpenValue);
   };
@@ -23,38 +26,35 @@ const DeleteMenu = ({ handleModalToggle, akId }) => {
       component="button"
       onClick={handleModalToggle}
     >
-      Delete
+      {__('Delete')}
     </DropdownItem>,
     <DropdownItem
       ouiaId="linkbacktooldpage"
       key="link"
       href={`../../../activation_keys/${akId}`}
     >
-      Old Activation key Details Page
+      {__('Old Activation key Details Page')}
     </DropdownItem>];
   return (
-    <React.Fragment>
-      <Dropdown
-        ouiaId="dekete-action"
-        onSelect={onSelect}
-        position={DropdownPosition.right}
-        toggle={<KebabToggle id="toggle-kebab" onToggle={onToggle} />}
-        isOpen={isOpen}
-        isPlain
-        dropdownItems={dropdownItems}
-      />
-    </React.Fragment>
+    <Dropdown
+      ouiaId="dekete-action"
+      onSelect={onSelect}
+      position={DropdownPosition.right}
+      toggle={<KebabToggle id="toggle-kebab" onToggle={onToggle} />}
+      isOpen={isOpen}
+      isPlain
+      dropdownItems={dropdownItems}
+    />
   );
 };
 
 DeleteMenu.propTypes = {
   handleModalToggle: PropTypes.func,
-  akId: PropTypes.string,
+  akId: PropTypes.string.isRequired,
 };
 
 DeleteMenu.defaultProps = {
   handleModalToggle: noop,
-  akId: '',
 };
 
 export default DeleteMenu;

diff --git a/webpack/scenes/ActivationKeys/Details/components/DeleteModal.js b/webpack/scenes/ActivationKeys/Details/components/DeleteModal.js
@@ -4,6 +4,7 @@ import {
 } from 'react-redux';
 import PropTypes from 'prop-types';
 import { noop } from 'foremanReact/common/helpers';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { Modal, ModalVariant, Button, Icon, Title, Flex } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { deleteActivationKey } from '../ActivationKeyActions';
@@ -18,48 +19,45 @@ const DeleteModal = ({ isModalOpen, handleModalToggle, akId }) => {
   };
 
   return (
-    <React.Fragment>
-      <Modal
-        ouiaId="ak-delete-modal"
-        variant={ModalVariant.small}
-        title={[
-          <Flex>
-            <Icon status="warning">
-              <ExclamationTriangleIcon />
-            </Icon>
-            <Title ouiaId="ak-delete-header" headingLevel="h5" size="2xl">
-              Delete activation key?
-            </Title>
-          </Flex>,
-        ]}
-        isOpen={isModalOpen}
-        onClose={handleModalToggle}
-        actions={[
-          <Button ouiaId="delete-button" key="delete" variant="danger" onClick={handleDelete}>
-            Delete
-          </Button>,
-          <Button ouiaId="cancel-button" key="cancel" variant="link" onClick={handleModalToggle}>
-            Cancel
-          </Button>,
-        ]}
-      >
-        Activation Key will no longer be available for use. This operation cannot be undone.
-      </Modal>
-    </React.Fragment>
+    <Modal
+      ouiaId="ak-delete-modal"
+      variant={ModalVariant.small}
+      title={[
+        <Flex>
+          <Icon status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>
+          <Title ouiaId="ak-delete-header" headingLevel="h5" size="2xl">
+            {__('Delete activation key?')}
+          </Title>
+        </Flex>,
+      ]}
+      isOpen={isModalOpen}
+      onClose={handleModalToggle}
+      actions={[
+        <Button ouiaId="delete-button" key="delete" variant="danger" onClick={handleDelete}>
+          {__('Delete')}
+        </Button>,
+        <Button ouiaId="cancel-button" key="cancel" variant="link" onClick={handleModalToggle}>
+          {__('Cancel')}
+        </Button>,
+      ]}
+    >
+      {__('Activation Key will no longer be available for use. This operation cannot be undone.')}
+    </Modal>
   );
 };
 
 
 DeleteModal.propTypes = {
   isModalOpen: PropTypes.bool,
   handleModalToggle: PropTypes.func,
-  akId: PropTypes.string,
+  akId: PropTypes.string.isRequired,
 };
 
 DeleteModal.defaultProps = {
   isModalOpen: false,
   handleModalToggle: noop,
-  akId: '',
 };
 
 export default DeleteModal;
diff --git a/webpack/scenes/ActivationKeys/Details/components/EditModal.js b/webpack/scenes/ActivationKeys/Details/components/EditModal.js
@@ -6,6 +6,7 @@ import {
   useDispatch,
 } from 'react-redux';
 import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
 import {
   Modal,
   ModalVariant,
@@ -25,7 +26,7 @@ const EditModal = ({ akDetails, akId }) => {
   const dispatch = useDispatch();
 
   const {
-    name, description, maxHosts, unlimitedHosts,
+    name, description, maxHosts, unlimitedHosts, usageCount,
   } = akDetails;
 
   const [nameValue, setNameValue] = useState(name);
@@ -83,8 +84,8 @@ const EditModal = ({ akDetails, akId }) => {
   };
   const onChange = (event) => {
     let newValue = (event.target.value === '' ? event.target.value : Math.round(+event.target.value));
-    if (newValue < 0) {
-      newValue = 0;
+    if (newValue < 1) {
+      newValue = 1;
     }
     setMaxHostsValue(newValue);
   };
@@ -94,32 +95,33 @@ const EditModal = ({ akDetails, akId }) => {
 
   const handleCheckBox = () => {
     setUnlimited(prevUnlimited => !prevUnlimited);
+    setMaxHostsValue(usageCount);
   };
 
   return (
     <>
       <Button ouiaId="ak-edit-button" variant="secondary" onClick={handleModalToggle}>
-        Edit
+        {__('Edit')}
       </Button>
       <Modal
         ouiaId="ak-edit-modal"
         variant={ModalVariant.small}
-        title="Edit activation key"
-        description={`Select attributes for ${akDetails.name}`}
+        title={__('Edit activation key')}
+        description={__(`Select attributes for ${akDetails.name}`)}
         isOpen={isModalOpen}
         onClose={handleClose}
         actions={[
           <Button ouiaId="edit-modal-save-button" key="create" variant="primary" form="modal-with-form-form" onClick={handleSave}>
-            Save
+            {__('Save')}
           </Button>,
           <Button ouiaId="cancel-button" key="cancel" variant="link" onClick={handleClose}>
-            Cancel
+            {__('Cancel')}
           </Button>,
         ]}
       >
         <Form isHorizontal>
           <FormGroup
-            label="Name"
+            label={__('Name')}
           >
             <TextInput
               ouiaId="ak-name-input"
@@ -130,7 +132,7 @@ const EditModal = ({ akDetails, akId }) => {
             />
           </FormGroup>
           <FormGroup
-            label="Host limit"
+            label={__('Host Limit')}
           >
             <Stack hasGutter>
               <StackItem>
@@ -152,20 +154,21 @@ const EditModal = ({ akDetails, akId }) => {
                 <Checkbox
                   ouiaId="unlimited-checkbox"
                   id="unlimited-checkbox"
-                  label="Unlimited"
+                  label={__('Unlimited')}
                   isChecked={isUnlimited}
                   onChange={handleCheckBox}
                 />
               </StackItem>
             </Stack>
           </FormGroup>
           <FormGroup
-            label="Description"
+            label={__('Description')}
           >
             <TextArea
               id="ak-description"
               type="text"
-              defaultValue={descriptionValue || 'Description empty'}
+              placeholder={__('Description')}
+              defaultValue={descriptionValue}
               value={descriptionValue}
               onChange={handleDescriptionInputChange}
             />
@@ -184,11 +187,11 @@ EditModal.propTypes = {
     maxHosts: PropTypes.number,
     description: PropTypes.string,
     unlimitedHosts: PropTypes.bool,
+    usageCount: PropTypes.number,
   }),
-  akId: PropTypes.string,
+  akId: PropTypes.string.isRequired,
 };
 
 EditModal.defaultProps = {
   akDetails: {},
-  akId: '',
 };