Fix [UI] Warning icon overlay on input text 1.7.x (#2837)

mlrun · Oct 21, 2024 · f4b6fdc · f4b6fdc
1 parent 3a01002
commit f4b6fdc
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 12 deletions.
diff --git a/src/common/Input/Input.js b/src/common/Input/Input.js
@@ -17,7 +17,7 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { isEmpty } from 'lodash'
@@ -87,6 +87,13 @@ const Input = React.forwardRef(
     const inputLabelRef = useRef(null)
     useDetectOutsideClick(ref, () => setShowValidationRules(false))
 
+    const inputStyles = useMemo(() => {
+      return {
+        paddingLeft: `${labelWidth + 16}px`,
+        paddingRight: (tip ? 25 : 0) + (isInvalid ? 20 : 0) + 'px'
+      }
+    }, [isInvalid, labelWidth, tip])
+
     const inputClassNames = classnames(
       'input',
       className,
@@ -240,7 +247,7 @@ const Input = React.forwardRef(
             type,
             value: typedValue
           }}
-          style={floatingLabel ? {} : { paddingLeft: `${labelWidth + 16}px`, paddingRight: tip ? '25px' : '0px' }}
+          style={floatingLabel ? {} : inputStyles }
         />
         {label && (
           <div className={labelClassNames}>

diff --git a/src/components/Details/DetailsHeader/DetailsHeader.js b/src/components/Details/DetailsHeader/DetailsHeader.js
@@ -31,7 +31,7 @@ import ActionsMenu from '../../../common/ActionsMenu/ActionsMenu'
 
 import { DETAILS_ARTIFACTS_TAB, FULL_VIEW_MODE, JOBS_PAGE } from '../../../constants'
 import { formatDatetime } from '../../../utils'
-import { LABEL_BUTTON } from 'igz-controls/constants'
+import { TERTIARY_BUTTON } from 'igz-controls/constants'
 import { ACTIONS_MENU } from '../../../types'
 import { getViewMode } from '../../../utils/helper'
 import { generateUrlFromRouterPath } from '../../../utils/link-helper.util'
@@ -220,7 +220,7 @@ const DetailsHeader = ({
         {detailsStore.changes.counter > 0 && (
           <>
             <Button
-              variant={LABEL_BUTTON}
+              variant={TERTIARY_BUTTON}
               label="Cancel"
               onClick={cancelChanges}
               disabled={detailsStore.changes.counter === 0 || detailsStore.editMode}

diff --git a/src/elements/ChangeOwnerPopUp/ChangeOwnerPopUp.js b/src/elements/ChangeOwnerPopUp/ChangeOwnerPopUp.js
@@ -27,7 +27,7 @@ import Input from '../../common/Input/Input'
 import { Button, PopUpDialog } from 'igz-controls/components'
 
 import projectsIguazioApi from '../../api/projects-iguazio-api'
-import { FORBIDDEN_ERROR_STATUS_CODE, SECONDARY_BUTTON, LABEL_BUTTON } from 'igz-controls/constants'
+import { FORBIDDEN_ERROR_STATUS_CODE, SECONDARY_BUTTON, TERTIARY_BUTTON } from 'igz-controls/constants'
 import { deleteUnsafeHtml } from '../../utils'
 import { getErrorMsg } from 'igz-controls/utils/common.util'
 import { isIgzVersionCompatible } from '../../utils/isIgzVersionCompatible'
@@ -238,7 +238,7 @@ const ChangeOwnerPopUp = ({ changeOwnerCallback, projectId }) => {
               className="pop-up-dialog__btn_cancel"
               label="Discard"
               onClick={handleOnClose}
-              variant={LABEL_BUTTON}
+              variant={TERTIARY_BUTTON}
             />
             <Button
               disabled={!newOwnerId}

diff --git a/src/elements/FeaturesTablePanel/FeaturesTablePanelView.js b/src/elements/FeaturesTablePanel/FeaturesTablePanelView.js
@@ -26,7 +26,7 @@ import CreateFeatureVectorPopUp from '../CreateFeatureVectorPopUp/CreateFeatureV
 import FeaturesTablePanelRow from './FeatureTablePanleRow/FeaturesTablePanelRow'
 import { Button, Tip, Tooltip, TextTooltipTemplate } from 'igz-controls/components'
 
-import { LABEL_BUTTON, PRIMARY_BUTTON } from 'igz-controls/constants'
+import { TERTIARY_BUTTON, PRIMARY_BUTTON } from 'igz-controls/constants'
 
 import { ReactComponent as Edit } from 'igz-controls/images/edit.svg'
 import { ReactComponent as Arrow } from 'igz-controls/images/arrow.svg'
@@ -164,7 +164,7 @@ function FeaturesTablePanelView({
         })}
       </div>
       <div className="features-panel__buttons">
-        <Button label="Cancel" variant={LABEL_BUTTON} onClick={handleCancel} />
+        <Button label="Cancel" variant={TERTIARY_BUTTON} onClick={handleCancel} />
         <Button variant={PRIMARY_BUTTON} label="Add" onClick={addFeatures} />
       </div>
     </div>

diff --git a/src/elements/FeaturesTablePanel/featuresTablePanel.scss b/src/elements/FeaturesTablePanel/featuresTablePanel.scss
@@ -63,12 +63,16 @@
   .features-panel__buttons {
     position: sticky;
     bottom: 0;
+    z-index: 3;
     display: flex;
     justify-content: flex-end;
     width: 100%;
     padding: 10px 15px;
     background-color: $white;
-    z-index: 3;
+
+    .btn {
+      margin-right: 10px;
+    }
   }
 
   .features-panel__divider {

diff --git a/src/elements/MembersPopUp/MembersPopUp.js b/src/elements/MembersPopUp/MembersPopUp.js
@@ -31,7 +31,7 @@ import { Button, ConfirmDialog, RoundedIcon, Tip } from 'igz-controls/components
 
 import {
   DANGER_BUTTON,
-  LABEL_BUTTON,
+  TERTIARY_BUTTON,
   PRIMARY_BUTTON,
   SECONDARY_BUTTON
 } from 'igz-controls/constants'
@@ -526,7 +526,7 @@ const MembersPopUp = ({ changeMembersCallback, membersDispatch, membersState })
         <div className="apply-discard-buttons">
           <Button
             disabled={!areChangesMade()}
-            variant={LABEL_BUTTON}
+            variant={TERTIARY_BUTTON}
             label="Discard"
             className="pop-up-dialog__btn_cancel"
             onClick={closeMemberPopUp}
@@ -547,7 +547,7 @@ const MembersPopUp = ({ changeMembersCallback, membersDispatch, membersState })
               setConfirmDiscard(false)
             },
             label: 'No',
-            variant: LABEL_BUTTON
+            variant: TERTIARY_BUTTON
           }}
           closePopUp={() => setConfirmDiscard(false)}
           confirmButton={{