feat: Add Google DataStudio embed (#2293)
Co-authored-by: Tom Moor <tom.moor@gmail.com>
This commit is contained in:
parent
8e5a2b85c2
commit
06e16eef12
|
@ -0,0 +1,39 @@
|
||||||
|
// @flow
|
||||||
|
import * as React from "react";
|
||||||
|
import Image from "components/Image";
|
||||||
|
import Frame from "./components/Frame";
|
||||||
|
|
||||||
|
const URL_REGEX = new RegExp(
|
||||||
|
"^https?://datastudio.google.com/(embed|u/0)/reporting/(.*)/page/(.*)(/edit)?$"
|
||||||
|
);
|
||||||
|
|
||||||
|
type Props = {|
|
||||||
|
attrs: {|
|
||||||
|
href: string,
|
||||||
|
matches: string[],
|
||||||
|
|},
|
||||||
|
|};
|
||||||
|
|
||||||
|
export default class GoogleDataStudio extends React.Component<Props> {
|
||||||
|
static ENABLED = [URL_REGEX];
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Frame
|
||||||
|
{...this.props}
|
||||||
|
src={this.props.attrs.href.replace("u/0", "embed").replace("/edit", "")}
|
||||||
|
icon={
|
||||||
|
<Image
|
||||||
|
src="/images/google-datastudio.png"
|
||||||
|
alt="Google Data Studio Icon"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
canonicalUrl={this.props.attrs.href}
|
||||||
|
title="Google Data Studio"
|
||||||
|
border
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,19 @@
|
||||||
|
/* eslint-disable flowtype/require-valid-file-annotation */
|
||||||
|
import GoogleDataStudio from "./GoogleDataStudio";
|
||||||
|
|
||||||
|
describe("GoogleDataStudio", () => {
|
||||||
|
const match = GoogleDataStudio.ENABLED[0];
|
||||||
|
test("to be enabled on share link", () => {
|
||||||
|
expect(
|
||||||
|
"https://datastudio.google.com/embed/reporting/aab01789-f3a2-4ff3-9cba-c4c94c4a92e8/page/7zFD".match(
|
||||||
|
match
|
||||||
|
)
|
||||||
|
).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("to not be enabled elsewhere", () => {
|
||||||
|
expect("https://datastudio.google.com/u/0/".match(match)).toBe(null);
|
||||||
|
expect("https://datastudio.google.com".match(match)).toBe(null);
|
||||||
|
expect("https://www.google.com".match(match)).toBe(null);
|
||||||
|
});
|
||||||
|
});
|
|
@ -11,6 +11,7 @@ import Descript from "./Descript";
|
||||||
import Figma from "./Figma";
|
import Figma from "./Figma";
|
||||||
import Framer from "./Framer";
|
import Framer from "./Framer";
|
||||||
import Gist from "./Gist";
|
import Gist from "./Gist";
|
||||||
|
import GoogleDataStudio from "./GoogleDataStudio";
|
||||||
import GoogleDocs from "./GoogleDocs";
|
import GoogleDocs from "./GoogleDocs";
|
||||||
import GoogleDrawings from "./GoogleDrawings";
|
import GoogleDrawings from "./GoogleDrawings";
|
||||||
import GoogleDrive from "./GoogleDrive";
|
import GoogleDrive from "./GoogleDrive";
|
||||||
|
@ -148,6 +149,13 @@ export default [
|
||||||
component: GoogleSlides,
|
component: GoogleSlides,
|
||||||
matcher: matcher(GoogleSlides),
|
matcher: matcher(GoogleSlides),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Google Data Studio",
|
||||||
|
keywords: "business intelligence",
|
||||||
|
icon: () => <Img src="/images/google-datastudio.png" />,
|
||||||
|
component: GoogleDataStudio,
|
||||||
|
matcher: matcher(GoogleDataStudio),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "InVision",
|
title: "InVision",
|
||||||
keywords: "design prototype",
|
keywords: "design prototype",
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 3.6 KiB |
Reference in New Issue