Add carousel for quick start (#1271)
* Add carousel for quick start * Put carousel behind feature flag * Install type definition for react-youtube * Install type definition for react-youtube * Remove @types/youtube-player * Move feature flag outside of quickstarttutorial component
This commit is contained in:
victor-meng
GitHub
parent
60525f654b
commit
c2f3471afe
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="480" height="181" viewBox="0 0 480 181" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="480" height="180" fill="#EFF6FC"/>
|
||||
<path d="M225.592 95H224.607V86.5977H225.592V95ZM236.197 95H235.236V91.5547C235.236 90.8906 235.133 90.4102 234.926 90.1133C234.723 89.8164 234.379 89.668 233.895 89.668C233.484 89.668 233.135 89.8555 232.846 90.2305C232.561 90.6055 232.418 91.0547 232.418 91.5781V95H231.457V91.4375C231.457 90.2578 231.002 89.668 230.092 89.668C229.67 89.668 229.322 89.8457 229.049 90.2012C228.775 90.5527 228.639 91.0117 228.639 91.5781V95H227.678V89H228.639V89.9492H228.662C229.088 89.2227 229.709 88.8594 230.525 88.8594C230.936 88.8594 231.293 88.9746 231.598 89.2051C231.902 89.4316 232.111 89.7305 232.225 90.1016C232.67 89.2734 233.334 88.8594 234.217 88.8594C235.537 88.8594 236.197 89.6738 236.197 91.3027V95ZM242.309 95H241.348V94.0625H241.324C240.906 94.7812 240.291 95.1406 239.479 95.1406C238.881 95.1406 238.412 94.9824 238.072 94.666C237.736 94.3496 237.568 93.9297 237.568 93.4062C237.568 92.2852 238.229 91.6328 239.549 91.4492L241.348 91.1973C241.348 90.1777 240.936 89.668 240.111 89.668C239.389 89.668 238.736 89.9141 238.154 90.4062V89.4219C238.744 89.0469 239.424 88.8594 240.193 88.8594C241.604 88.8594 242.309 89.6055 242.309 91.0977V95ZM241.348 91.9648L239.9 92.1641C239.455 92.2266 239.119 92.3379 238.893 92.498C238.666 92.6543 238.553 92.9336 238.553 93.3359C238.553 93.6289 238.656 93.8691 238.863 94.0566C239.074 94.2402 239.354 94.332 239.701 94.332C240.178 94.332 240.57 94.166 240.879 93.834C241.191 93.498 241.348 93.0742 241.348 92.5625V91.9648ZM249.24 94.5195C249.24 96.7227 248.186 97.8242 246.076 97.8242C245.334 97.8242 244.686 97.6836 244.131 97.4023V96.4414C244.807 96.8164 245.451 97.0039 246.064 97.0039C247.541 97.0039 248.279 96.2188 248.279 94.6484V93.9922H248.256C247.799 94.7578 247.111 95.1406 246.193 95.1406C245.447 95.1406 244.846 94.875 244.389 94.3438C243.936 93.8086 243.709 93.0918 243.709 92.1934C243.709 91.1738 243.953 90.3633 244.441 89.7617C244.934 89.1602 245.605 88.8594 246.457 88.8594C247.266 88.8594 247.865 89.1836 248.256 89.832H248.279V89H249.24V94.5195ZM248.279 92.2871V91.4023C248.279 90.9258 248.117 90.5176 247.793 90.1777C247.473 89.8379 247.072 89.668 246.592 89.668C245.998 89.668 245.533 89.8848 245.197 90.3184C244.861 90.748 244.693 91.3516 244.693 92.1289C244.693 92.7969 244.854 93.332 245.174 93.7344C245.498 94.1328 245.926 94.332 246.457 94.332C246.996 94.332 247.434 94.1406 247.77 93.7578C248.109 93.375 248.279 92.8848 248.279 92.2871ZM256.008 92.2402H251.771C251.787 92.9082 251.967 93.4238 252.311 93.7871C252.654 94.1504 253.127 94.332 253.729 94.332C254.404 94.332 255.025 94.1094 255.592 93.6641V94.5664C255.064 94.9492 254.367 95.1406 253.5 95.1406C252.652 95.1406 251.986 94.8691 251.502 94.3262C251.018 93.7793 250.775 93.0117 250.775 92.0234C250.775 91.0898 251.039 90.3301 251.566 89.7441C252.098 89.1543 252.756 88.8594 253.541 88.8594C254.326 88.8594 254.934 89.1133 255.363 89.6211C255.793 90.1289 256.008 90.834 256.008 91.7363V92.2402ZM255.023 91.4258C255.02 90.8711 254.885 90.4395 254.619 90.1309C254.357 89.8223 253.992 89.668 253.523 89.668C253.07 89.668 252.686 89.8301 252.369 90.1543C252.053 90.4785 251.857 90.9023 251.783 91.4258H255.023Z" fill="#0078D4"/>
|
||||
<circle cx="187" cy="163" r="4" fill="#B8B9BA"/>
|
||||
<circle cx="223" cy="163" r="4" fill="#0078D4"/>
|
||||
<circle cx="259" cy="163" r="4" fill="#B8B9BA"/>
|
||||
<circle cx="295" cy="163" r="4" fill="#B8B9BA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -95,6 +95,7 @@
|
|||
"react-notification-system": "0.2.17",
|
||||
"react-redux": "7.1.3",
|
||||
"react-splitter-layout": "4.0.0",
|
||||
"react-youtube": "9.0.1",
|
||||
"redux": "4.0.4",
|
||||
"reflect-metadata": "0.1.13",
|
||||
"rx-jupyter": "5.5.12",
|
||||
|
|
@ -134,6 +135,7 @@
|
|||
"@types/sinon": "2.3.3",
|
||||
"@types/styled-components": "5.1.1",
|
||||
"@types/underscore": "1.7.36",
|
||||
"@types/youtube-player": "5.5.6",
|
||||
"@typescript-eslint/eslint-plugin": "4.22.0",
|
||||
"@typescript-eslint/parser": "4.22.0",
|
||||
"@webpack-cli/serve": "1.5.2",
|
||||
|
|
@ -6825,6 +6827,12 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/youtube-player": {
|
||||
"version": "5.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/youtube-player/-/youtube-player-5.5.6.tgz",
|
||||
"integrity": "sha512-RcWWUEuAZZX24dG55Xk558/HHCZxYf798/xPnV6wTwDlUF8HZNAmqyXyi+4QgN2l9juP9GRjCwILxXLSPKQBBw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "4.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.22.0.tgz",
|
||||
|
|
@ -25033,13 +25041,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.7.2",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
|
||||
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.8.1"
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types-exact": {
|
||||
|
|
@ -25958,6 +25966,22 @@
|
|||
"react-dom": ">=15.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-youtube": {
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-9.0.1.tgz",
|
||||
"integrity": "sha512-w2yt3o1H0fjlMjoqn8zEmtCqgiV+bYS1JfMSUfh70zky2rwWVORQzpt2DWoDio1+nZ1X9kSTzakdif6gaJdFuQ==",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "3.1.3",
|
||||
"prop-types": "15.8.1",
|
||||
"youtube-player": "5.5.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14.x"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=0.14.1"
|
||||
}
|
||||
},
|
||||
"node_modules/reactcss": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
|
||||
|
|
@ -27391,6 +27415,11 @@
|
|||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/sister": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
|
||||
"integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA=="
|
||||
},
|
||||
"node_modules/sisteransi": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
|
||||
|
|
@ -31155,6 +31184,29 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/youtube-player": {
|
||||
"version": "5.5.2",
|
||||
"resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.2.tgz",
|
||||
"integrity": "sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==",
|
||||
"dependencies": {
|
||||
"debug": "^2.6.6",
|
||||
"load-script": "^1.0.0",
|
||||
"sister": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/youtube-player/node_modules/debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"dependencies": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/youtube-player/node_modules/ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
},
|
||||
"node_modules/zalgo-promise": {
|
||||
"version": "1.0.46",
|
||||
"resolved": "https://registry.npmjs.org/zalgo-promise/-/zalgo-promise-1.0.46.tgz",
|
||||
|
|
@ -37098,6 +37150,12 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/youtube-player": {
|
||||
"version": "5.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/youtube-player/-/youtube-player-5.5.6.tgz",
|
||||
"integrity": "sha512-RcWWUEuAZZX24dG55Xk558/HHCZxYf798/xPnV6wTwDlUF8HZNAmqyXyi+4QgN2l9juP9GRjCwILxXLSPKQBBw==",
|
||||
"dev": true
|
||||
},
|
||||
"@typescript-eslint/eslint-plugin": {
|
||||
"version": "4.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.22.0.tgz",
|
||||
|
|
@ -51360,13 +51418,13 @@
|
|||
}
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.7.2",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
|
||||
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.8.1"
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"prop-types-exact": {
|
||||
|
|
@ -52072,6 +52130,16 @@
|
|||
"react-lifecycles-compat": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"react-youtube": {
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-9.0.1.tgz",
|
||||
"integrity": "sha512-w2yt3o1H0fjlMjoqn8zEmtCqgiV+bYS1JfMSUfh70zky2rwWVORQzpt2DWoDio1+nZ1X9kSTzakdif6gaJdFuQ==",
|
||||
"requires": {
|
||||
"fast-deep-equal": "3.1.3",
|
||||
"prop-types": "15.8.1",
|
||||
"youtube-player": "5.5.2"
|
||||
}
|
||||
},
|
||||
"reactcss": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
|
||||
|
|
@ -53221,6 +53289,11 @@
|
|||
"totalist": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"sister": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
|
||||
"integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA=="
|
||||
},
|
||||
"sisteransi": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
|
||||
|
|
@ -56130,6 +56203,31 @@
|
|||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
|
||||
},
|
||||
"youtube-player": {
|
||||
"version": "5.5.2",
|
||||
"resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.2.tgz",
|
||||
"integrity": "sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==",
|
||||
"requires": {
|
||||
"debug": "^2.6.6",
|
||||
"load-script": "^1.0.0",
|
||||
"sister": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
}
|
||||
}
|
||||
},
|
||||
"zalgo-promise": {
|
||||
"version": "1.0.46",
|
||||
"resolved": "https://registry.npmjs.org/zalgo-promise/-/zalgo-promise-1.0.46.tgz",
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@
|
|||
"react-notification-system": "0.2.17",
|
||||
"react-redux": "7.1.3",
|
||||
"react-splitter-layout": "4.0.0",
|
||||
"react-youtube": "9.0.1",
|
||||
"redux": "4.0.4",
|
||||
"reflect-metadata": "0.1.13",
|
||||
"rx-jupyter": "5.5.12",
|
||||
|
|
@ -130,6 +131,7 @@
|
|||
"@types/sinon": "2.3.3",
|
||||
"@types/styled-components": "5.1.1",
|
||||
"@types/underscore": "1.7.36",
|
||||
"@types/youtube-player": "5.5.6",
|
||||
"@typescript-eslint/eslint-plugin": "4.22.0",
|
||||
"@typescript-eslint/parser": "4.22.0",
|
||||
"@webpack-cli/serve": "1.5.2",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
|
||||
import React, { useState } from "react";
|
||||
import Youtube from "react-youtube";
|
||||
import Placeholder from "../../../images/Placeholder.svg";
|
||||
|
||||
interface QuickstartCarouselProps {
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
export const QuickstartCarousel: React.FC<QuickstartCarouselProps> = ({
|
||||
isOpen,
|
||||
}: QuickstartCarouselProps): JSX.Element => {
|
||||
const [page, setPage] = useState<number>(1);
|
||||
return (
|
||||
<Modal styles={{ main: { width: 640 } }} isOpen={isOpen && page < 4}>
|
||||
<Stack>
|
||||
<Stack horizontal horizontalAlign="space-between" style={{ padding: 16 }}>
|
||||
<Text variant="xLarge">{getHeaderText(page)}</Text>
|
||||
<IconButton iconProps={{ iconName: "Cancel" }} onClick={() => setPage(4)} />
|
||||
</Stack>
|
||||
{getContent(page)}
|
||||
<Text variant="medium" style={{ padding: "0 16px" }}>
|
||||
{getDescriptionText(page)}
|
||||
</Text>
|
||||
<Stack horizontal horizontalAlign="end">
|
||||
{page !== 1 && (
|
||||
<DefaultButton text="Previous" style={{ margin: "16px 8px 16px 0" }} onClick={() => setPage(page - 1)} />
|
||||
)}
|
||||
<PrimaryButton
|
||||
style={{ margin: "16px 16px 16px 0" }}
|
||||
text={page === 3 ? "Finish" : "Next"}
|
||||
onClick={() => setPage(page + 1)}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const getHeaderText = (page: number): string => {
|
||||
switch (page) {
|
||||
case 1:
|
||||
return "Welcome! What is Cosmos DB?";
|
||||
case 2:
|
||||
return "Get Started with Sample Data";
|
||||
case 3:
|
||||
return "Connect to your database";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
const getContent = (page: number): JSX.Element => {
|
||||
switch (page) {
|
||||
case 1:
|
||||
return <Youtube videoId="Jvgh64rvdXU" />;
|
||||
case 2:
|
||||
return <Image style={{ width: 640 }} src={Placeholder} />;
|
||||
case 3:
|
||||
return <Image style={{ width: 640 }} src={Placeholder} />;
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
};
|
||||
|
||||
const getDescriptionText = (page: number): string => {
|
||||
switch (page) {
|
||||
case 1:
|
||||
return "Azure Cosmos DB is a fully managed NoSQL database service for modern app development. ";
|
||||
case 2:
|
||||
return "Launch the quickstart for a tutotrial to learn how to create a database, add sample data, connect to a sample app and more.";
|
||||
case 3:
|
||||
return "Already have an existing app? Connect your database to an app, or tooling of your choice from Data Explorer.";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
|
@ -2,15 +2,10 @@ import { TeachingBubble } from "@fluentui/react";
|
|||
import { useDatabases } from "Explorer/useDatabases";
|
||||
import { useTeachingBubble } from "hooks/useTeachingBubble";
|
||||
import React from "react";
|
||||
import { userContext } from "UserContext";
|
||||
|
||||
export const QuickstartTutorial: React.FC = (): JSX.Element => {
|
||||
const { step, isSampleDBExpanded, isDocumentsTabOpened, setStep } = useTeachingBubble();
|
||||
|
||||
if (!userContext.features.enableNewQuickstart) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
switch (step) {
|
||||
case 1:
|
||||
return isSampleDBExpanded ? (
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
// CSS Dependencies
|
||||
import { initializeIcons } from "@fluentui/react";
|
||||
import "bootstrap/dist/css/bootstrap.css";
|
||||
import { QuickstartCarousel } from "Explorer/Tutorials/QuickstartCarousel";
|
||||
import { QuickstartTutorial } from "Explorer/Tutorials/QuickstartTutorial";
|
||||
import React, { useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { userContext } from "UserContext";
|
||||
import "../externals/jquery-ui.min.css";
|
||||
import "../externals/jquery-ui.min.js";
|
||||
import "../externals/jquery-ui.structure.min.css";
|
||||
|
|
@ -116,7 +118,8 @@ const App: React.FunctionComponent = () => {
|
|||
</div>
|
||||
<SidePanel />
|
||||
<Dialog />
|
||||
<QuickstartTutorial />
|
||||
{userContext.features.enableNewQuickstart && <QuickstartCarousel isOpen={true} />}
|
||||
{userContext.features.enableNewQuickstart && <QuickstartTutorial />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue