Add TestCaseFormV1 component and related styles for Data Quality tests

- Introduced TestCaseFormV1 component for selecting test levels (Table/Column). - Added SelectionCardGroup component for displaying selection options. - Created associated LESS styles for both components. - Updated DataQualityPage to include the new TestCaseFormV1 in a drawer format. - Modified ic-format-table.svg to adjust icon dimensions.
2025-09-06 23:52:29 +00:00 · 2025-06-30 21:51:44 +05:30 · 2025-06-30 21:51:44 +05:30 · 2608e1e877
commit 2608e1e877
parent d451df3aef
7 changed files with 398 additions and 1 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-format-table.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-format-table.svg
@ -1 +1 @@
-<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M0 4.5a3 3 0 0 1 3 -3h18A3.002 3.002 0 0 1 24 4.5v15a3.003 3.003 0 0 1 -3 3H3A3.002 3.002 0 0 1 0 19.5V4.5zm1.5 0v3h21v-3A1.499 1.499 0 0 0 21 3H3a1.5 1.5 0 0 0 -1.5 1.5zm0 4.5v5.25h9.75V9H1.5zm11.25 0v5.25h9.75V9H12.75zm-1.5 6.75H1.5v3.75a1.499 1.499 0 0 0 1.5 1.5h8.25V15.75zm9.75 5.25a1.498 1.498 0 0 0 1.5 -1.5v-3.75H12.75v5.25h8.25z"/></svg>
+<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 4.5a3 3 0 0 1 3 -3h18A3.002 3.002 0 0 1 24 4.5v15a3.003 3.003 0 0 1 -3 3H3A3.002 3.002 0 0 1 0 19.5V4.5zm1.5 0v3h21v-3A1.499 1.499 0 0 0 21 3H3a1.5 1.5 0 0 0 -1.5 1.5zm0 4.5v5.25h9.75V9H1.5zm11.25 0v5.25h9.75V9H12.75zm-1.5 6.75H1.5v3.75a1.499 1.499 0 0 0 1.5 1.5h8.25V15.75zm9.75 5.25a1.498 1.498 0 0 0 1.5 -1.5v-3.75H12.75v5.25h8.25z"/></svg>
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseFormV1.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseFormV1.less
@ -0,0 +1,33 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@import (reference) '../../../../styles/variables.less';
+
+.test-case-form-v1 {
+  .test-level-section {
+    margin-bottom: @size-lg;
+
+    .form-section-title {
+      color: @grey-800;
+      font-size: @size-md;
+      font-weight: @font-medium;
+      margin-bottom: @size-mlg;
+      line-height: 1.4;
+    }
+
+    .ant-form-item-explain-error {
+      margin-top: @size-xs;
+      color: @error-color;
+      font-size: @font-size-base;
+    }
+  }
+}
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseFormV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseFormV1.tsx
@ -0,0 +1,113 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { Drawer, DrawerProps, Form } from 'antd';
+import { useForm } from 'antd/lib/form/Form';
+import classNames from 'classnames';
+import { FC, useEffect } from 'react';
+import { ReactComponent as ColumnIcon } from '../../../../assets/svg/ic-column.svg';
+import { ReactComponent as TableIcon } from '../../../../assets/svg/ic-format-table.svg';
+import SelectionCardGroup from '../../../common/SelectionCardGroup/SelectionCardGroup';
+import { SelectionOption } from '../../../common/SelectionCardGroup/SelectionCardGroup.interface';
+import './TestCaseFormV1.less';
+
+export interface TestCaseFormV1Props {
+  isDrawer?: boolean;
+  drawerProps?: DrawerProps;
+  className?: string;
+  onFormSubmit?: (values: FormValues) => void;
+  initialValues?: Partial<FormValues>;
+}
+
+interface FormValues {
+  testLevel: TestLevel;
+}
+
+export enum TestLevel {
+  TABLE = 'table',
+  COLUMN = 'column',
+}
+
+const TEST_LEVEL_OPTIONS: SelectionOption[] = [
+  {
+    value: 'table',
+    label: 'Table Level',
+    description: 'Test applied on table',
+    icon: <TableIcon />,
+  },
+  {
+    value: 'column',
+    label: 'Column Level',
+    description: 'Test applied on column',
+    icon: <ColumnIcon />,
+  },
+];
+
+const TestCaseFormV1: FC<TestCaseFormV1Props> = ({
+  className,
+  drawerProps,
+  initialValues,
+  isDrawer = false,
+  onFormSubmit,
+}) => {
+  const [form] = useForm<FormValues>();
+
+  const handleSubmit = (values: FormValues) => {
+    onFormSubmit?.(values);
+  };
+
+  useEffect(() => {
+    form.setFieldsValue({ testLevel: TestLevel.TABLE });
+  }, [form]);
+
+  const formContent = (
+    <div
+      className={classNames(
+        'test-case-form-v1',
+        {
+          'drawer-mode': isDrawer,
+          'standalone-mode': !isDrawer,
+        },
+        className
+      )}>
+      <Form
+        form={form}
+        initialValues={initialValues}
+        layout="vertical"
+        onFinish={handleSubmit}>
+        <Form.Item
+          label="Select on which element your test should be performed"
+          name="testLevel"
+          rules={[{ required: true, message: 'Please select test level' }]}>
+          <SelectionCardGroup options={TEST_LEVEL_OPTIONS} />
+        </Form.Item>
+      </Form>
+    </div>
+  );
+
+  if (isDrawer) {
+    return (
+      <Drawer
+        destroyOnClose
+        open
+        placement="right"
+        size="large"
+        {...drawerProps}>
+        {formContent}
+      </Drawer>
+    );
+  }
+
+  return formContent;
+};
+
+export default TestCaseFormV1;
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/SelectionCardGroup/SelectionCardGroup.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SelectionCardGroup/SelectionCardGroup.interface.ts
@ -0,0 +1,33 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { ReactNode } from 'react';
+
+export interface SelectionOption {
+  value: string;
+  label: string;
+  description: string;
+  icon: ReactNode;
+}
+
+export interface SelectionCardGroupProps {
+  options: SelectionOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+}
+
+export interface SelectionCardProps {
+  option: SelectionOption;
+  isSelected: boolean;
+  onClick: () => void;
+}
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/SelectionCardGroup/SelectionCardGroup.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SelectionCardGroup/SelectionCardGroup.tsx
@ -0,0 +1,76 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { CheckOutlined } from '@ant-design/icons';
+import { Card } from 'antd';
+import classNames from 'classnames';
+import { FC } from 'react';
+import './selection-card-group.less';
+import {
+  SelectionCardGroupProps,
+  SelectionCardProps,
+} from './SelectionCardGroup.interface';
+
+const SelectionCard: FC<SelectionCardProps> = ({
+  option,
+  isSelected,
+  onClick,
+}: SelectionCardProps) => (
+  <Card
+    className={classNames('selection-card', {
+      selected: isSelected,
+    })}
+    onClick={onClick}>
+    <div className="selection-content">
+      <div className="d-flex gap-4">
+        <span className="selection-icon">{option.icon}</span>
+        <div className="selection-header">
+          <div className="selection-title">{option.label}</div>
+          <div className="selection-description">{option.description}</div>
+        </div>
+      </div>
+      {isSelected ? (
+        <div className="custom-radio checked">
+          <CheckOutlined />
+        </div>
+      ) : (
+        <div className="custom-radio unchecked" />
+      )}
+    </div>
+  </Card>
+);
+
+const SelectionCardGroup: FC<SelectionCardGroupProps> = ({
+  options,
+  value,
+  onChange,
+  className,
+}: SelectionCardGroupProps) => {
+  const handleOptionSelect = (selectedValue: string) => {
+    onChange?.(selectedValue);
+  };
+
+  return (
+    <div className={classNames('selection-card-group', className)}>
+      {options.map((option) => (
+        <SelectionCard
+          isSelected={value === option.value}
+          key={option.value}
+          option={option}
+          onClick={() => handleOptionSelect(option.value)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default SelectionCardGroup;
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/SelectionCardGroup/selection-card-group.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SelectionCardGroup/selection-card-group.less
@ -0,0 +1,132 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@import (reference) '../../../styles/variables.less';
+
+.selection-card-group {
+  display: flex;
+  gap: @size-mlg;
+  width: 100%;
+
+  .selection-card {
+    flex: 1;
+    border: 1px solid @grey-200;
+    border-radius: @border-radius-xs;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: @grey-50;
+
+    .ant-card-body {
+      padding: @size-mlg @size-lg;
+      min-height: 90px;
+
+      .selection-content {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+
+        .selection-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background-color: @grey-100;
+          transition: all 0.3s ease;
+          flex-shrink: 0;
+
+          svg {
+            width: @size-mlg;
+            height: @size-mlg;
+            color: @grey-500;
+          }
+        }
+
+        .selection-header {
+          flex: 1;
+        }
+
+        .selection-title {
+          color: @grey-800;
+          font-size: @size-md;
+          font-weight: @font-medium;
+          line-height: 1.4;
+          margin-bottom: @size-xxs;
+        }
+
+        .selection-description {
+          color: @grey-400;
+          font-size: @font-size-base;
+          line-height: 1.4;
+        }
+
+        .custom-radio {
+          margin-left: @size-md;
+          flex-shrink: 0;
+          width: 22px;
+          height: 22px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.3s ease;
+
+          &.unchecked {
+            border: 2px solid @grey-300;
+            background-color: transparent;
+          }
+
+          &.checked {
+            background-color: @primary-color;
+            border: none;
+            color: @white;
+
+            .anticon {
+              font-size: 14px;
+              font-weight: @font-bold;
+            }
+          }
+        }
+      }
+    }
+
+    // Selected state styles
+    &.selected,
+    &:hover {
+      border-color: @primary-color;
+      background-color: @blue-22;
+
+      .selection-content {
+        .selection-icon {
+          background-color: @primary-1;
+
+          svg {
+            color: @primary-color;
+          }
+        }
+
+        .selection-title {
+          color: @primary-color;
+        }
+
+        .selection-description {
+          color: @blue-9;
+        }
+
+        .custom-radio.unchecked {
+          border-color: @primary-color;
+        }
+      }
+    }
+  }
+}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx
@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 import ManageButton from '../../components/common/EntityPageInfos/ManageButton/ManageButton';
 import TabsLabel from '../../components/common/TabsLabel/TabsLabel.component';
+import TestCaseFormV1 from '../../components/DataQuality/AddDataQualityTest/components/TestCaseFormV1';
 import PageHeader from '../../components/PageHeader/PageHeader.component';
 import { ROUTES } from '../../constants/constants';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
@ -119,6 +120,15 @@ const DataQualityPage = () => {
          />
        </Col>
      </Row>
+      <TestCaseFormV1
+        isDrawer
+        drawerProps={{
+          title: t('label.add-entity', {
+            entity: t('label.test-case'),
+          }),
+          open: false,
+        }}
+      />
    </DataQualityProvider>
  );
 };