From be14f1c32c5fc01ad94f0ea36170a4b3ae5ed036 Mon Sep 17 00:00:00 2001
From: Amol Umbark <amolumbarkar@gmail.com>
Date: Fri, 10 Feb 2023 12:29:41 +0530
Subject: [PATCH] fix: removed direct ref to form item (#2221)

Co-authored-by: mindhash <mindhash@mindhashs-MacBook-Pro.local>
---
 frontend/src/container/FormAlertRules/RuleOptions.tsx | 4 ++--
 frontend/src/container/FormAlertRules/styles.ts       | 2 ++
 frontend/src/container/Licenses/ApplyLicenseForm.tsx  | 5 +++--
 frontend/src/container/Licenses/styles.ts             | 3 +--
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/container/FormAlertRules/RuleOptions.tsx b/frontend/src/container/FormAlertRules/RuleOptions.tsx
index 8bdf0382fc..d0ce0b2746 100644
--- a/frontend/src/container/FormAlertRules/RuleOptions.tsx
+++ b/frontend/src/container/FormAlertRules/RuleOptions.tsx
@@ -1,5 +1,4 @@
-import { Select, Typography } from 'antd';
-import FormItem from 'antd/lib/form/FormItem';
+import { Form, Select, Typography } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -18,6 +17,7 @@ import {
 } from './styles';
 
 const { Option } = Select;
+const FormItem = Form.Item;
 
 function RuleOptions({
 	alertDef,
diff --git a/frontend/src/container/FormAlertRules/styles.ts b/frontend/src/container/FormAlertRules/styles.ts
index 96915d4cdf..23cf11c8ac 100644
--- a/frontend/src/container/FormAlertRules/styles.ts
+++ b/frontend/src/container/FormAlertRules/styles.ts
@@ -95,6 +95,8 @@ export const ThresholdInput = styled(InputNumber)`
 		align-items: center;
 		& > .ant-input-number-group-addon {
 			width: 130px;
+			border: 0;
+			background: transparent;
 		}
 		& > .ant-input-number {
 			width: 50%;
diff --git a/frontend/src/container/Licenses/ApplyLicenseForm.tsx b/frontend/src/container/Licenses/ApplyLicenseForm.tsx
index 95035f2a51..065622e77c 100644
--- a/frontend/src/container/Licenses/ApplyLicenseForm.tsx
+++ b/frontend/src/container/Licenses/ApplyLicenseForm.tsx
@@ -1,5 +1,4 @@
-import { Button, Input, notification } from 'antd';
-import FormItem from 'antd/lib/form/FormItem';
+import { Button, Form, Input, notification } from 'antd';
 import getFeaturesFlags from 'api/features/getFeatureFlags';
 import apply from 'api/licenses/apply';
 import React, { useState } from 'react';
@@ -13,6 +12,8 @@ import { PayloadProps } from 'types/api/licenses/getAll';
 
 import { ApplyForm, ApplyFormContainer, LicenseInput } from './styles';
 
+const FormItem = Form.Item;
+
 function ApplyLicenseForm({
 	licenseRefetch,
 }: ApplyLicenseFormProps): JSX.Element {
diff --git a/frontend/src/container/Licenses/styles.ts b/frontend/src/container/Licenses/styles.ts
index 634aa582e4..e1be5a1803 100644
--- a/frontend/src/container/Licenses/styles.ts
+++ b/frontend/src/container/Licenses/styles.ts
@@ -1,5 +1,4 @@
 import { Form } from 'antd';
-import FormItem from 'antd/lib/form/FormItem';
 import styled from 'styled-components';
 
 export const ApplyFormContainer = styled.div`
@@ -15,7 +14,7 @@ export const ApplyForm = styled(Form)`
 	}
 `;
 
-export const LicenseInput = styled(FormItem)`
+export const LicenseInput = styled(Form.Item)`
 	width: 200px;
 	&:focus {
 		width: 350px;