- Fully managed Postgres with separate storage and compute, that scales
- to zero on inactivity and provides seamless scaling and branching.
+ Modern, developer-friendly Postgres built for the cloud. Neon
+ separates storage and compute to offer scale to zero and support
+ database branching.
-
+ {/* Remove skipping survey button, this change is experimental according to analytics data, so only commenting the code */}
+ {/*
Skip
-
+
*/}
);
}
diff --git a/console/src/features/Surveys/HasuraFamiliaritySurvey/hooks/useFamiliaritySurveyData.ts b/console/src/features/Surveys/HasuraFamiliaritySurvey/hooks/useFamiliaritySurveyData.ts
index 325693464ee..967aab7d322 100644
--- a/console/src/features/Surveys/HasuraFamiliaritySurvey/hooks/useFamiliaritySurveyData.ts
+++ b/console/src/features/Surveys/HasuraFamiliaritySurvey/hooks/useFamiliaritySurveyData.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
import { useMutation, useQuery, useQueryClient } from 'react-query';
import { APIError } from '@/hooks/error';
import { IconCardGroupItem } from '@/new-components/IconCardGroup';
@@ -40,14 +40,19 @@ export function useFamiliaritySurveyData(): {
},
});
- if (isLoading || isError) {
- return emptySurveyResponseData;
- }
-
const surveyQuestionData = data?.data?.survey?.find(
surveyInfo => surveyInfo.survey_name === surveyName
)?.survey_questions?.[0];
+ const surveyOptions = useMemo(
+ () => mapOptionLabelToDetails(surveyQuestionData),
+ [surveyQuestionData]
+ );
+
+ if (isLoading || isError) {
+ return emptySurveyResponseData;
+ }
+
// skip showing the survey form if survey has no questions
if (!surveyQuestionData) {
return emptySurveyResponseData;
@@ -92,7 +97,7 @@ export function useFamiliaritySurveyData(): {
showFamiliaritySurvey,
data: {
question: surveyQuestionData.question,
- options: mapOptionLabelToDetails(surveyQuestionData),
+ options: surveyOptions,
},
onSkip,
onOptionClick,
diff --git a/console/src/features/Surveys/HasuraFamiliaritySurvey/hooks/utils.ts b/console/src/features/Surveys/HasuraFamiliaritySurvey/hooks/utils.ts
index 9479abf1023..f25bd60c8de 100644
--- a/console/src/features/Surveys/HasuraFamiliaritySurvey/hooks/utils.ts
+++ b/console/src/features/Surveys/HasuraFamiliaritySurvey/hooks/utils.ts
@@ -6,14 +6,61 @@ import {
getFamiliaritySurveyOptionDetails,
} from './familiaritySurveyOptionDetails';
+type UnroderedOptionArray = {
+ option: FamiliaritySurveyOptionCode;
+ id: string;
+}[];
+
+/**
+ * Manually enforces the order of options as present in `familiaritySurveyOptionCode`
+ * array.
+ */
+// Not removing this function. Although it is not being used currenty due to dynamic product requirements,
+// but can again be used in future.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const manuallyOrderOptions = (unroderedOptionArray: UnroderedOptionArray) => {
+ const surveyOptionDetails: IconCardGroupItem[] = [];
+ familiaritySurveyOptionCode.forEach(optionCode => {
+ const optionData = unroderedOptionArray.find(
+ optionObj => optionObj.option === optionCode
+ );
+ if (optionData) {
+ const optionValues = getFamiliaritySurveyOptionDetails(
+ optionData.id,
+ optionCode
+ );
+ surveyOptionDetails.push(optionValues);
+ }
+ });
+ return surveyOptionDetails;
+};
+
+/**
+ * Randomly shuffles order of options of survey.
+ * The method comes from this algorithm: https://stackoverflow.com/a/46545530/7088648
+ */
+const randomlyOrderOptions = (unroderedOptionArray: UnroderedOptionArray) => {
+ const shuffledOptionArray = unroderedOptionArray
+ .map(value => ({ value, sort: Math.random() }))
+ .sort((a, b) => a.sort - b.sort)
+ .map(({ value }) => value);
+
+ const surveyOptionDetails: IconCardGroupItem[] =
+ shuffledOptionArray.map(option =>
+ getFamiliaritySurveyOptionDetails(option.id, option.option)
+ );
+
+ return surveyOptionDetails;
+};
+
export const mapOptionLabelToDetails = (
- data: SurveysResponseData['data']['survey'][0]['survey_questions'][0]
+ data?: SurveysResponseData['data']['survey'][0]['survey_questions'][0]
): IconCardGroupItem[] => {
- const unroderedOptionArray: {
- option: FamiliaritySurveyOptionCode;
- id: string;
- }[] = [];
- data.survey_question_options.forEach(optionData => {
+ if (!data) return [];
+
+ // Array containing order of options as it comes from backend
+ const unroderedOptionArray: UnroderedOptionArray = [];
+ data?.survey_question_options?.forEach(optionData => {
const optionLabel = optionData.option.toLowerCase();
if (
@@ -34,20 +81,6 @@ export const mapOptionLabelToDetails = (
});
});
- // enforce order of options to show in the UI
- const surveyOptionDetails: IconCardGroupItem[] = [];
- familiaritySurveyOptionCode.forEach(optionCode => {
- const optionData = unroderedOptionArray.find(
- optionObj => optionObj.option === optionCode
- );
- if (optionData) {
- const optionValues = getFamiliaritySurveyOptionDetails(
- optionData.id,
- optionCode
- );
- surveyOptionDetails.push(optionValues);
- }
- });
-
- return surveyOptionDetails;
+ // return manuallyOrderOptions(unroderedOptionArray);
+ return randomlyOrderOptions(unroderedOptionArray);
};
