Merge branch 'develop' of https://dev.azure.com/imagetemplates/documa…

…ti.io/_git/dqoado into develop
dqops · Jul 24, 2024 · 85843da · 85843da
2 parents b86f8c7 + 3cb09ab
commit 85843da
Show file tree

Hide file tree

Showing 16 changed files with 286 additions and 115 deletions.
diff --git a/dqops/src/main/frontend/src/components/Checkbox/CheckBoxColumn.tsx b/dqops/src/main/frontend/src/components/Checkbox/CheckBoxColumn.tsx
@@ -0,0 +1,79 @@
+import { Tooltip } from '@material-tailwind/react';
+import clsx from 'clsx';
+import React from 'react';
+import SvgIcon from '../SvgIcon';
+
+export interface CheckboxProps {
+  type?: string;
+  label?: any;
+  className?: string;
+  checked?: boolean;
+  onChange: (value: boolean) => void;
+  tooltipText?: string;
+  disabled?: boolean;
+  error?: boolean;
+  labelPosition?: 'left' | 'right';
+  checkClassName?: string;
+  isDisabled?: boolean;
+}
+
+const CheckboxColumn = ({
+  label,
+  className,
+  checked = false,
+  onChange,
+  tooltipText,
+  disabled,
+  error,
+  checkClassName,
+  isDisabled
+}: CheckboxProps) => {
+  return (
+    <label
+      className={clsx(
+        'block relative cursor-pointer rounded-sm inline-flex flex-col items-start select-none',
+        className
+      )}
+    >
+      {label && (
+        <div className="mb-2 inline-flex space-x-1 items-center">
+          <span className="text-sm">{label}</span>
+          {!!tooltipText && (
+            <Tooltip
+              content={tooltipText}
+              className="max-w-80 py-2 px-2 bg-gray-800"
+            >
+              <div>
+                <SvgIcon
+                  name="info"
+                  className="w-4 h-4 text-gray-700 cursor-pointer"
+                />
+              </div>
+            </Tooltip>
+          )}
+        </div>
+      )}
+      <div className="inline-flex items-center space-x-2">
+        <input
+          disabled={disabled}
+          className="h-4 w-4 cursor-pointer opacity-0"
+          type="checkbox"
+          checked={checked}
+          onChange={(e) => onChange(e.target.checked)}
+        />
+        <span
+          className={clsx(
+            'h-4 w-4 flex items-center justify-center text-sm rounded-sm',
+            checked ? checkClassName + ' bg-teal-500 border-0' : 'border',
+            error ? 'border-red-500' : 'border-gray-150',
+            isDisabled ? 'bg-gray-200' : ''
+          )}
+        >
+          {checked && <SvgIcon name="check" className="w-3 text-white" />}
+        </span>
+      </div>
+    </label>
+  );
+};
+
+export default CheckboxColumn;
diff --git a/dqops/src/main/frontend/src/components/DataQualityChecks/CheckListItem.tsx b/dqops/src/main/frontend/src/components/DataQualityChecks/CheckListItem.tsx
@@ -389,7 +389,7 @@ const CheckListItem = ({
           'h-18'
         )}
       >
-        <td className="pl-4 pr-4 min-w-130 max-w-130 h-full ">
+        <td className="pl-4 pr-8 min-w-130 max-w-130 h-full ">
           <div className="flex space-x-1 items-center">
             {isAlreadyDeleted !== true &&
               (mode ? (
@@ -625,7 +625,7 @@ const CheckListItem = ({
             </div>
           </div>
         </td>
-        <div className="flex w-full items-center gap-x-6">
+        <div className="flex items-center gap-x-6 !w-45">
           {check.comments ? (
             <SvgIcon
               name="comment"
@@ -639,8 +639,10 @@ const CheckListItem = ({
               content={check.configuration_requirements_errors?.map((x) => x)}
               className="max-w-80 py-2 px-2 bg-gray-800 delay-700"
             >
-              <div className="flex items-center h-full">
-                <SvgIcon name="warning" className="w-5 h-5 mt-7" />
+              <div className="relative">
+                <div className="absolute" style={{ left: '-30px' }}>
+                  <SvgIcon name="warning" className="w-5 h-5 mt-7" />
+                </div>
               </div>
             </Tooltip>
           ) : null}

diff --git a/dqops/src/main/frontend/src/components/DataQualityChecks/FieldControl.tsx b/dqops/src/main/frontend/src/components/DataQualityChecks/FieldControl.tsx
@@ -5,7 +5,7 @@ import {
   ParameterDefinitionSpecDataTypeEnum,
   ParameterDefinitionSpecDisplayHintEnum
 } from '../../api';
-import Checkbox from '../Checkbox';
+import CheckboxColumn from '../Checkbox/CheckBoxColumn';
 import ExtendedTextAre from '../ExtendedTextArea';
 import FieldDatePicker from '../FieldDatePicker';
 import FloatingPointInput from '../FloatingPointInput';
@@ -83,14 +83,16 @@ const FieldControl = ({
   return (
     <div>
       {type === 'boolean' && (
-        <Checkbox
-          onChange={(value) => handleChange({ boolean_value: value })}
-          checked={value}
-          label={label}
-          tooltipText={tooltip}
-          disabled={disabled}
-          error={checkBoxNotRed ? false : isInvalid}
-        />
+        <div className=" mb-4">
+          <CheckboxColumn
+            onChange={(value) => handleChange({ boolean_value: value })}
+            checked={value}
+            label={label}
+            tooltipText={tooltip}
+            disabled={disabled}
+            error={checkBoxNotRed ? false : isInvalid}
+          />
+        </div>
       )}
       {type === ParameterDefinitionSpecDataTypeEnum.string && (
         <>
@@ -153,6 +155,7 @@ const FieldControl = ({
               long_value: String(value).length === 0 ? undefined : Number(value)
             })
           }
+          onChangeUndefined={() => handleChange({ long_value: undefined })}
           tooltipText={tooltip}
           className={clsx(
             '!h-8 !text-xs !min-w-30 !max-w-30',
@@ -208,28 +211,32 @@ const FieldControl = ({
       )}
       {field?.definition?.data_type ===
         ParameterDefinitionSpecDataTypeEnum.string_list && (
-        <StringListField
-          value={value}
-          label={label}
-          tooltipText={tooltip}
-          onChange={(value: string[]) =>
-            handleChange({ string_list_value: value })
-          }
-          onSave={onSave}
-          disabled={disabled}
-        />
+        <div className="mt-4">
+          <StringListField
+            value={value}
+            label={label}
+            tooltipText={tooltip}
+            onChange={(value: string[]) =>
+              handleChange({ string_list_value: value })
+            }
+            onSave={onSave}
+            disabled={disabled}
+          />
+        </div>
       )}
       {field?.definition?.data_type ===
         ParameterDefinitionSpecDataTypeEnum.integer_list && (
-        <IntegerListField
-          value={value}
-          label={label}
-          tooltipText={tooltip}
-          onChange={(value: number[]) =>
-            handleChange({ integer_list_value: value })
-          }
-          disabled={disabled}
-        />
+        <div className="mt-4">
+          <IntegerListField
+            value={value}
+            label={label}
+            tooltipText={tooltip}
+            onChange={(value: number[]) =>
+              handleChange({ integer_list_value: value })
+            }
+            disabled={disabled}
+          />
+        </div>
       )}
       {field?.definition?.data_type ===
         ParameterDefinitionSpecDataTypeEnum.object && (

diff --git a/dqops/src/main/frontend/src/components/Header/index.tsx b/dqops/src/main/frontend/src/components/Header/index.tsx
@@ -285,7 +285,7 @@ const Header = () => {
                 location.pathname.startsWith(`/${CheckTypes.PARTITIONED}`)
                   ? 'font-bold'
                   : '',
-                isTextWrapped && !isWindowSmall && 'w-27'
+                isTextWrapped && !isWindowSmall && 'w-28'
               )}
               onClick={onClick(CheckTypes.PARTITIONED)}
             >
@@ -294,13 +294,13 @@ const Header = () => {
                   name="partitioned_checks"
                   className={clsx(
                     '!w-4.5 !h-4.5',
-                    isTextWrapped && !isWindowSmall && 'ml-1'
+                    isTextWrapped && !isWindowSmall && 'ml-2'
                   )}
                 />
               </div>
               {!isWindowSmall && (
                 <div
-                  className={clsx(isTextWrapped && !isWindowSmall && 'ml-1')}
+                  className={clsx(isTextWrapped && !isWindowSmall && 'ml-2')}
                 >
                   Partition Checks
                 </div>

diff --git a/dqops/src/main/frontend/src/components/IntegerListField/index.tsx b/dqops/src/main/frontend/src/components/IntegerListField/index.tsx
@@ -43,7 +43,7 @@ const IntegerListField = ({
     <div>
       <div className="flex space-x-1">
         {label && (
-          <label className="block font-regular text-gray-700 mb-1 text-sm flex space-x-1 pb-2">
+          <label className="block font-regular text-gray-700 mb-1 text-sm flex space-x-1">
             <span>{label}</span>
             {!!tooltipText && (
               <Tooltip

diff --git a/dqops/src/main/frontend/src/components/NumberInput/index.tsx b/dqops/src/main/frontend/src/components/NumberInput/index.tsx
@@ -12,6 +12,7 @@ interface INumberInputProps {
   name?: string;
   value?: string | number;
   onChange: (value: number) => void;
+  onChangeUndefined?: () => void;
   onBlur?: (e: FocusEvent) => void;
   dataTestId?: string;
   min?: number;
@@ -36,12 +37,18 @@ const NumberInput = ({
   tooltipText,
   disabled,
   error,
-  step
+  step,
+  onChangeUndefined
 }: INumberInputProps) => {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.value === '') {
-      onChange(+e.target.value);
-      return;
+      if (onChangeUndefined) {
+        onChangeUndefined();
+        return;
+      } else {
+        onChange(+e.target.value);
+        return;
+      }
     }
     if (onChange) {
       onChange(Number(e.target.value));

diff --git a/dqops/src/main/frontend/src/components/StringListField/index.tsx b/dqops/src/main/frontend/src/components/StringListField/index.tsx
@@ -72,7 +72,12 @@ const StringListField = ({
       </div>
       <Dialog open={open} handler={() => setOpen(false)}>
         <div className="p-4">
-          <LabelsView labels={labels} onChange={handleChange} hasAdd />
+          <LabelsView
+            labels={labels}
+            onChange={handleChange}
+            hasAdd
+            title="Text values"
+          />
           <div className="flex space-x-4 p-4 justify-end">
             <Button
               color="primary"

diff --git a/dqops/src/main/frontend/src/pages/ColumnView/ColumnMonitoringChecksView.tsx b/dqops/src/main/frontend/src/pages/ColumnView/ColumnMonitoringChecksView.tsx
@@ -222,7 +222,7 @@ const ColumnMonitoringChecksView = () => {
   };
 
   return (
-    <div>
+    <div className="flex flex-col overflow-x-auto overflow-y-hidden">
       <ColumnActionGroup
         shouldDelete={false}
         onUpdate={onUpdate}
@@ -234,31 +234,34 @@ const ColumnMonitoringChecksView = () => {
         userProfile.license_type?.toLowerCase() !== 'free' &&
         !userProfile.trial_period_expires_at && (
           <div className="border-b border-gray-300">
-            <Tabs tabs={tabs} activeTab={tab} onChange={onChangeTab} />
+            <Tabs
+              tabs={tabs}
+              activeTab={tab}
+              onChange={onChangeTab}
+              className="w-full overflow-hidden max-w-full"
+            />
           </div>
         )}
-      <div>
-        {tab === 'daily' && (
-          <DataQualityChecks
-            onUpdate={onUpdate}
-            checksUI={dailyMonitoring}
-            onChange={onDailyMonitoringChange}
-            checkResultsOverview={checkResultsOverview}
-            getCheckOverview={getCheckOverview}
-            loading={loading}
-          />
-        )}
-        {tab === 'monthly' && (
-          <DataQualityChecks
-            onUpdate={onUpdate}
-            checksUI={monthlyMonitoring}
-            onChange={onMonthlyMonitoringChange}
-            checkResultsOverview={checkResultsOverview}
-            getCheckOverview={getCheckOverview}
-            loading={loading}
-          />
-        )}
-      </div>
+      {tab === 'daily' && (
+        <DataQualityChecks
+          onUpdate={onUpdate}
+          checksUI={dailyMonitoring}
+          onChange={onDailyMonitoringChange}
+          checkResultsOverview={checkResultsOverview}
+          getCheckOverview={getCheckOverview}
+          loading={loading}
+        />
+      )}
+      {tab === 'monthly' && (
+        <DataQualityChecks
+          onUpdate={onUpdate}
+          checksUI={monthlyMonitoring}
+          onChange={onMonthlyMonitoringChange}
+          checkResultsOverview={checkResultsOverview}
+          getCheckOverview={getCheckOverview}
+          loading={loading}
+        />
+      )}
     </div>
   );
 };