From f26344e17696b90214e3ee5c2d89d89718281eb0 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Thu, 14 Mar 2024 15:26:15 +0100
Subject: [PATCH] Share modal: Remove deprecated Form components (#84173)

* EmailSharingConfiguration: Remove deprecated component

* CreatePublicDashboard: Remove deprecated component

* Update imports

* Update imports[2]

* Fix import
---
 .../EmailSharingConfiguration.tsx             | 20 ++------
 .../CreatePublicDashboard.tsx                 | 49 +++++++++----------
 2 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx
index 684d95d722c..e58ffdffc7f 100644
--- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx
+++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx
@@ -1,21 +1,11 @@
 import { css } from '@emotion/css';
 import React from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { useWindowSize } from 'react-use';
 
-import { GrafanaTheme2, SelectableValue } from '@grafana/data/src';
-import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { FieldSet } from '@grafana/ui';
-import {
-  Button,
-  ButtonGroup,
-  Field,
-  Input,
-  InputControl,
-  RadioButtonGroup,
-  Spinner,
-  useStyles2,
-} from '@grafana/ui/src';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
+import { FieldSet, Button, ButtonGroup, Field, Input, RadioButtonGroup, Spinner, useStyles2 } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 import { contextSrv } from 'app/core/services/context_srv';
 import {
@@ -156,7 +146,7 @@ export const EmailSharingConfiguration = () => {
           label={t('public-dashboard.config.can-view-dashboard-radio-button-label', 'Can view dashboard')}
           className={styles.field}
         >
-          <InputControl
+          <Controller
             name="shareType"
             control={control}
             render={({ field }) => {
diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx
index 15a57d183e1..241949ae6ea 100644
--- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx
+++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx
@@ -1,18 +1,18 @@
 import { css } from '@emotion/css';
 import React from 'react';
-import { FormState, UseFormRegister } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 
-import { GrafanaTheme2 } from '@grafana/data/src';
-import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { Button, Form, Spinner, useStyles2 } from '@grafana/ui/src';
+import { GrafanaTheme2 } from '@grafana/data';
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
+import { Button, Spinner, useStyles2 } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';
+import { contextSrv } from 'app/core/services/context_srv';
 import { useCreatePublicDashboardMutation } from 'app/features/dashboard/api/publicDashboardApi';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { DashboardScene } from 'app/features/dashboard-scene/scene/DashboardScene';
 import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
+import { AccessControlAction, useSelector } from 'app/types';
 
-import { contextSrv } from '../../../../../../core/services/context_srv';
-import { AccessControlAction, useSelector } from '../../../../../../types';
 import { NoUpsertPermissionsAlert } from '../ModalAlerts/NoUpsertPermissionsAlert';
 import { UnsupportedDataSourcesAlert } from '../ModalAlerts/UnsupportedDataSourcesAlert';
 import { UnsupportedTemplateVariablesAlert } from '../ModalAlerts/UnsupportedTemplateVariablesAlert';
@@ -49,6 +49,11 @@ export const CreatePublicDashboardBase = ({
     createPublicDashboard({ dashboard, payload: { isEnabled: true } });
     DashboardInteractions.generatePublicDashboardUrlClicked({});
   };
+  const {
+    handleSubmit,
+    register,
+    formState: { isValid },
+  } = useForm<SharePublicDashboardAcknowledgmentInputs>({ mode: 'onChange' });
 
   const disableInputs = !hasWritePermissions || isLoading || isError || hasError;
 
@@ -73,27 +78,17 @@ export const CreatePublicDashboardBase = ({
         <UnsupportedDataSourcesAlert unsupportedDataSources={unsupportedDatasources.join(', ')} />
       )}
 
-      <Form onSubmit={onCreate} validateOn="onChange" maxWidth="none">
-        {({
-          register,
-          formState: { isValid },
-        }: {
-          register: UseFormRegister<SharePublicDashboardAcknowledgmentInputs>;
-          formState: FormState<SharePublicDashboardAcknowledgmentInputs>;
-        }) => (
-          <>
-            <div className={styles.checkboxes}>
-              <AcknowledgeCheckboxes disabled={disableInputs} register={register} />
-            </div>
-            <div className={styles.buttonContainer}>
-              <Button type="submit" disabled={disableInputs || !isValid} data-testid={selectors.CreateButton}>
-                <Trans i18nKey="public-dashboard.create-page.generate-public-url-button">Generate public URL</Trans>
-                {isLoading && <Spinner className={styles.loadingSpinner} />}
-              </Button>
-            </div>
-          </>
-        )}
-      </Form>
+      <form onSubmit={handleSubmit(onCreate)}>
+        <div className={styles.checkboxes}>
+          <AcknowledgeCheckboxes disabled={disableInputs} register={register} />
+        </div>
+        <div className={styles.buttonContainer}>
+          <Button type="submit" disabled={disableInputs || !isValid} data-testid={selectors.CreateButton}>
+            <Trans i18nKey="public-dashboard.create-page.generate-public-url-button">Generate public URL</Trans>
+            {isLoading && <Spinner className={styles.loadingSpinner} />}
+          </Button>
+        </div>
+      </form>
     </div>
   );
 };