hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-11-03 20:37:24 +03:00
Code Issues Projects Releases Wiki Activity

console: randomise options in use case onboarding

Browse Source 
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8820
GitOrigin-RevId: e4d622ac160b0e1e3a750d9a26a5caca5f68f5de
This commit is contained in:
Priya Sharma 2023-04-19 22:23:38 +05:30 committed by hasura-bot
parent 5e97a1e475
commit d798e18fa2
1 changed files with 49 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/UseCaseScreen/UseCaseScreen.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useMemo } from 'react';
import { Button } from '../../../../../new-components/Button';
import { LS_KEYS, removeLSItem } from '../../../../../utils/localStorage';
import { emitOnboardingEvent, persistSkippedOnboarding } from '../../utils';
@ -27,6 +27,50 @@ interface UseCaseAssets {
docsUrl: string;
}
const useCasesAssets: UseCaseAssets[] = [
{
id: 'data-api',
image:
'https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/hasura-usecase-data-api.svg',
title: 'Data API',
description:
'Build an instant, real-time API over your data sources for easy and performant access',
consoleUrl: '/',
docsUrl: 'https://hasura.io/docs/latest/resources/use-case/data-api/',
},
{
id: 'gql-backend',
image:
'https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/hasura-usecase-gql-backend.svg',
title: 'Graphql Backend',
description:
'Build a lightning-fast GraphQL backend and significantly accelerate your application development',
consoleUrl: '/',
docsUrl: 'https://hasura.io/docs/latest/resources/use-case/gql-backend/',
},
{
id: 'data-federation',
image:
'https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/hasura-usecase-data-federation.svg',
title: 'Data Federation',
description:
'Build an API that enables real-time data composition from different data sources',
consoleUrl: '/',
docsUrl:
'https://hasura.io/docs/latest/resources/use-case/data-federation/',
},
{
id: 'gateway',
image:
'https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/hasura-usecase-gateway.svg',
title: 'Gateway Service',
description:
'Build a single entry point from client applications into an ecosystem of microservices',
consoleUrl: '/',
docsUrl: 'https://hasura.io/docs/latest/resources/use-case/api-gateway/',
},
];
export const UseCaseScreen = (props: UseCaseScreenProps) => {
const [selectedUseCase, setSelectedUseCase] = useState<UseCases | null>(null);
@ -38,49 +82,9 @@ export const UseCaseScreen = (props: UseCaseScreenProps) => {
});
}, []);
const useCasesAssets: UseCaseAssets[] = [
{
id: 'data-api',
image:
'https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/hasura-usecase-data-api.svg',
title: 'Data API',
description:
'Build an instant, real-time API over your data sources for easy and performant access',
consoleUrl: '/',
docsUrl: 'https://hasura.io/docs/latest/resources/use-case/data-api/',
},
{
id: 'gql-backend',
image:
'https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/hasura-usecase-gql-backend.svg',
title: 'Graphql Backend',
description:
'Build a lightning-fast GraphQL backend and significantly accelerate your application development',
consoleUrl: '/',
docsUrl: 'https://hasura.io/docs/latest/resources/use-case/gql-backend/',
},
{
id: 'data-federation',
image:
'https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/hasura-usecase-data-federation.svg',
title: 'Data Federation',
description:
'Build an API that enables real-time data composition from different data sources',
consoleUrl: '/',
docsUrl:
'https://hasura.io/docs/latest/resources/use-case/data-federation/',
},
{
id: 'gateway',
image:
'https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/hasura-usecase-gateway.svg',
title: 'Gateway Service',
description:
'Build a single entry point from client applications into an ecosystem of microservices',
consoleUrl: '/',
docsUrl: 'https://hasura.io/docs/latest/resources/use-case/api-gateway/',
},
];
const randomUseCaseAssets = useMemo(() => {
return useCasesAssets.sort(() => Math.random() - 0.5);
}, [useCasesAssets]);
const onSubmit = () => {
const useCase = useCasesAssets.filter(
@ -120,7 +124,7 @@ export const UseCaseScreen = (props: UseCaseScreenProps) => {
What would you like to build with Hasura?
</div>
<div className="use-cases flex flex-wrap justify-between gap-y-15 gap-y-8">
{useCasesAssets.map((item, index) => (
{randomUseCaseAssets.map((item, index) => (
<div className="flex relative h-[250px]">
<label
key={index}