Revert "chore: remove telemetry option" (#19067)

Revert "chore: remove telemetry option (#19052)"

This reverts commit 059fcd5c58.

app/client/src/pages/setup/DataCollectionForm.tsx

@@ -0,0 +1,75 @@
+import React, { memo, useState } from "react";
+import styled from "styled-components";
+import { Toggle } from "design-system";
+import { ControlWrapper } from "components/propertyControls/StyledControls";
+import {
+  AllowToggle,
+  AllowToggleLabel,
+  AllowToggleWrapper,
+  FormBodyWrapper,
+  FormHeaderIndex,
+  FormHeaderLabel,
+  FormHeaderSubtext,
+  FormHeaderWrapper,
+  StyledLink as Link,
+} from "./common";
+import { TELEMETRY_URL } from "constants/ThirdPartyConstants";
+import {
+  createMessage,
+  WELCOME_FORM_DATA_COLLECTION_BODY,
+  WELCOME_FORM_DATA_COLLECTION_HEADER,
+  WELCOME_FORM_DATA_COLLECTION_LABEL_DISABLE,
+  WELCOME_FORM_DATA_COLLECTION_LABEL_ENABLE,
+  WELCOME_FORM_DATA_COLLECTION_LINK,
+} from "@appsmith/constants/messages";
+
+const DataCollectionFormWrapper = styled.div`
+  width: 100%;
+  position: relative;
+  padding-left: ${(props) => props.theme.spaces[17] * 2}px;
+`;
+
+const StyledLink = styled(Link)`
+  display: inline-block;
+  margin-top: 8px;
+`;
+
+export default memo(function DataCollectionForm() {
+  const [allowCollection, setAllowCollection] = useState(true);
+  return (
+    <DataCollectionFormWrapper>
+      <FormHeaderWrapper className="relative flex flex-col items-start">
+        <FormHeaderIndex className="absolute -left-6">2.</FormHeaderIndex>
+        <FormHeaderLabel>
+          {createMessage(WELCOME_FORM_DATA_COLLECTION_HEADER)}
+        </FormHeaderLabel>
+        <FormHeaderSubtext>
+          {createMessage(WELCOME_FORM_DATA_COLLECTION_BODY)}
+          <br />
+          <StyledLink href={TELEMETRY_URL} target="_blank">
+            {createMessage(WELCOME_FORM_DATA_COLLECTION_LINK)}
+          </StyledLink>
+        </FormHeaderSubtext>
+      </FormHeaderWrapper>
+      <FormBodyWrapper>
+        <ControlWrapper>
+          <AllowToggleWrapper>
+            <AllowToggle>
+              <Toggle
+                className="t--welcome-form-datacollection"
+                name="allowCollectingAnonymousData"
+                onToggle={(value: boolean) => setAllowCollection(value)}
+                value={allowCollection}
+              />
+            </AllowToggle>
+            <AllowToggleLabel>
+              {allowCollection
+                ? createMessage(WELCOME_FORM_DATA_COLLECTION_LABEL_ENABLE)
+                : createMessage(WELCOME_FORM_DATA_COLLECTION_LABEL_DISABLE)}
+            </AllowToggleLabel>
+          </AllowToggleWrapper>
+        </ControlWrapper>
+      </FormBodyWrapper>
+    </DataCollectionFormWrapper>
+  );
+});

app/client/src/pages/setup/SetupForm.tsx

@@ -1,19 +1,20 @@
-import React, { useRef, useState } from "react";
+import React, { useRef } from "react";
 import styled from "styled-components";
 import { connect } from "react-redux";
+import DataCollectionForm from "./DataCollectionForm";
 import DetailsForm from "./DetailsForm";
 import NewsletterForm from "./NewsletterForm";
 import AppsmithLogo from "assets/images/appsmith_logo.png";
 import {
-  WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME,
+  WELCOME_FORM_USECASE_FIELD_NAME,
   WELCOME_FORM_EMAIL_FIELD_NAME,
   WELCOME_FORM_NAME,
   WELCOME_FORM_NAME_FIELD_NAME,
   WELCOME_FORM_PASSWORD_FIELD_NAME,
   WELCOME_FORM_ROLE_FIELD_NAME,
   WELCOME_FORM_ROLE_NAME_FIELD_NAME,
-  WELCOME_FORM_USECASE_FIELD_NAME,
   WELCOME_FORM_VERIFY_PASSWORD_FIELD_NAME,
+  WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME,
 } from "@appsmith/constants/forms";
 import {
   FormErrors,
@@ -25,6 +26,7 @@ import {
 import { isEmail, isStrongPassword } from "utils/formhelpers";
 import { AppState } from "@appsmith/reducers";
 import { SUPER_USER_SUBMIT_PATH } from "@appsmith/constants/ApiConstants";
+import { useState } from "react";
 
 const PageWrapper = styled.div`
   width: 100%;
@@ -207,6 +209,7 @@ function SetupForm(props: SetupFormProps) {
             <DetailsForm {...props} onNext={onNext} />
           </SetupStep>
           <SetupStep active={!showDetailsForm}>
+            <DataCollectionForm />
             <NewsletterForm />
           </SetupStep>
         </form>