From b2641bc7cf1e45cbb10621de67c686b0e6089731 Mon Sep 17 00:00:00 2001 From: Jeremy Chang Date: Mon, 1 Nov 2021 19:31:23 +0000 Subject: [PATCH 1/2] (fix) Add JOIN Yt videos to hackathon resources --- .../src/scenes/ResourceScene/resource_data.ts | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/packages/hackathon/src/scenes/ResourceScene/resource_data.ts b/packages/hackathon/src/scenes/ResourceScene/resource_data.ts index 450426f6a..b9f747a00 100644 --- a/packages/hackathon/src/scenes/ResourceScene/resource_data.ts +++ b/packages/hackathon/src/scenes/ResourceScene/resource_data.ts @@ -34,6 +34,40 @@ export interface Resource { } export const resources: Array = [ + { + content: + 'A JOIN 2021 intro and demo video of the new visualization components.', + type: 'resource', + tag: 'component', + link: 'https://www.youtube.com/watch?v=rSWX6oAOtMs', + shortenedLink: 'https://bit.ly/3nQxGkr', + title: 'Visualization Components Demo Video', + }, + { + content: + 'A JOIN 2021 tutorial video on developing with the Extension Framework.', + type: 'tutorial', + tag: 'extension', + link: 'https://www.youtube.com/watch?v=3lbq5w7kcLs', + shortenedLink: 'https://bit.ly/3jXck3Y', + title: 'Extension Framework Tutorial Video', + }, + { + content: 'A JOIN 2021 tutorial video on using API Explorer and Looker API.', + type: 'tutorial', + tag: 'api', + link: 'https://www.youtube.com/watch?v=f1Wb4dYZxhM', + shortenedLink: 'https://bit.ly/2ZT71eS', + title: 'API Explorer & API Tutorial Video', + }, + { + content: 'A JOIN 2021 tutorial video on Iframe and SSO Embedding.', + type: 'tutorial', + tag: 'embed', + link: 'https://www.youtube.com/watch?v=XTvJjCeAT74', + shortenedLink: 'https://bit.ly/3q1f0RR', + title: 'Embed Tutorial Video', + }, { content: 'The API Explorer lets you learn and interact with Looker API.', type: 'Resource', @@ -293,7 +327,7 @@ export const resources: Array = [ tag: 'viz', link: 'https://github.com/Headset/looker-environment', shortenedLink: 'https://bit.ly/30EsLLL', - title: 'Custom Vis Dev Envronment Example', + title: 'Custom Vis Dev Environment Example', }, { content: 'An older demo of Lookers custom viz capabilities', From 6be6503f3f7c497a36a29fd00061fbb620904dfd Mon Sep 17 00:00:00 2001 From: Jeremy Chang Date: Mon, 1 Nov 2021 21:56:40 +0000 Subject: [PATCH 2/2] (fix) Updated hackathon resources to use enums - Updated resource tags and type to use enums for better maintenance - Updated resource buttonitem rendering to be based off tags enum --- .../scenes/ResourceScene/ResourceScene.tsx | 17 +- .../src/scenes/ResourceScene/resource_data.ts | 221 ++++++++++-------- 2 files changed, 127 insertions(+), 111 deletions(-) diff --git a/packages/hackathon/src/scenes/ResourceScene/ResourceScene.tsx b/packages/hackathon/src/scenes/ResourceScene/ResourceScene.tsx index 42e53646d..9aebfa351 100644 --- a/packages/hackathon/src/scenes/ResourceScene/ResourceScene.tsx +++ b/packages/hackathon/src/scenes/ResourceScene/ResourceScene.tsx @@ -41,7 +41,7 @@ import { } from '@looker/components' import { getExtensionSDK } from '@looker/extension-sdk' import { Routes } from '../../routes/AppRouter' -import { resources } from './resource_data' +import { resources, ResourceTag } from './resource_data' interface ResourceSceneProps {} @@ -90,16 +90,11 @@ export const ResourceScene: FC = () => { description="Select 1 or more areas" > - Embed - Extensions - LookML - Actions - API - Custom Viz - Dev Tools - Components - Datasets - Other + {Object.keys(ResourceTag).map((k) => ( + + {ResourceTag[k]} + + ))} diff --git a/packages/hackathon/src/scenes/ResourceScene/resource_data.ts b/packages/hackathon/src/scenes/ResourceScene/resource_data.ts index b9f747a00..b2347e90a 100644 --- a/packages/hackathon/src/scenes/ResourceScene/resource_data.ts +++ b/packages/hackathon/src/scenes/ResourceScene/resource_data.ts @@ -24,10 +24,31 @@ */ +// Enum serves as display strings too +enum ResourceType { + Resource = 'Resource', + Tutorial = 'Tutorial', + Example = 'Example', +} + +// Enum serves as display strings too +export enum ResourceTag { + Embed = 'Embed', + Extensions = 'Extensions', + Lookml = 'LookML', + Actions = 'Actions', + API = 'API', + Devtool = 'Dev Tools', + Components = 'Components', + Datasets = 'Datasets', + CustomViz = 'Custom Viz', + Other = 'Other', +} + export interface Resource { content: string - type: string - tag: string + type: ResourceType + tag: ResourceTag link: string shortenedLink: string title: string @@ -37,8 +58,8 @@ export const resources: Array = [ { content: 'A JOIN 2021 intro and demo video of the new visualization components.', - type: 'resource', - tag: 'component', + type: ResourceType.Resource, + tag: ResourceTag.Components, link: 'https://www.youtube.com/watch?v=rSWX6oAOtMs', shortenedLink: 'https://bit.ly/3nQxGkr', title: 'Visualization Components Demo Video', @@ -46,40 +67,40 @@ export const resources: Array = [ { content: 'A JOIN 2021 tutorial video on developing with the Extension Framework.', - type: 'tutorial', - tag: 'extension', + type: ResourceType.Tutorial, + tag: ResourceTag.Extensions, link: 'https://www.youtube.com/watch?v=3lbq5w7kcLs', shortenedLink: 'https://bit.ly/3jXck3Y', title: 'Extension Framework Tutorial Video', }, { content: 'A JOIN 2021 tutorial video on using API Explorer and Looker API.', - type: 'tutorial', - tag: 'api', + type: ResourceType.Tutorial, + tag: ResourceTag.API, link: 'https://www.youtube.com/watch?v=f1Wb4dYZxhM', shortenedLink: 'https://bit.ly/2ZT71eS', title: 'API Explorer & API Tutorial Video', }, { content: 'A JOIN 2021 tutorial video on Iframe and SSO Embedding.', - type: 'tutorial', - tag: 'embed', + type: ResourceType.Tutorial, + tag: ResourceTag.Embed, link: 'https://www.youtube.com/watch?v=XTvJjCeAT74', shortenedLink: 'https://bit.ly/3q1f0RR', title: 'Embed Tutorial Video', }, { content: 'The API Explorer lets you learn and interact with Looker API.', - type: 'Resource', - tag: 'api', + type: ResourceType.Resource, + tag: ResourceTag.API, link: 'https://hack.looker.com/extensions/marketplace_git_github_com_looker_open_source_extension_api_explorer_git::api-explorer', shortenedLink: 'https://bit.ly/3j1sdWD', title: 'API Explorer', }, { content: 'Gzr is a Looker Content Utility developer tool', - type: 'Example', - tag: 'devtool', + type: ResourceType.Example, + tag: ResourceTag.Devtool, link: 'https://github.com/looker-open-source/gzr', shortenedLink: 'https://bit.ly/3mSyZiu', title: 'Gzr', @@ -87,8 +108,8 @@ export const resources: Array = [ { content: 'The SDK Codegen is the source of truth for all SDKs and lets you create them for any language', - type: 'Resource', - tag: 'api', + type: ResourceType.Resource, + tag: ResourceTag.API, link: 'https://github.com/looker-open-source/sdk-codegen', shortenedLink: 'https://bit.ly/3lIk23g', title: 'SDK Codegen', @@ -96,8 +117,8 @@ export const resources: Array = [ { content: 'Our collection of SDK examples currently in: C#, Java, Kotlin, Python, R, Ruby, Swift, and TypeScript.', - type: 'Resource', - tag: 'api', + type: ResourceType.Resource, + tag: ResourceTag.API, link: 'https://github.com/looker-open-source/sdk-codegen/tree/main/examples', shortenedLink: 'https://bit.ly/3AL4VdI', title: 'SDK Examples', @@ -105,8 +126,8 @@ export const resources: Array = [ { content: 'Look At Me Sideways (LAMS) is the official LookML style guide and linter to help you create maintainable LookML projects.', - type: 'Example', - tag: 'devtool', + type: ResourceType.Example, + tag: ResourceTag.Devtool, link: 'https://github.com/looker-open-source/look-at-me-sideways', shortenedLink: 'https://bit.ly/3DOrMGS', title: 'LookML Style Guide & Linter', @@ -114,16 +135,16 @@ export const resources: Array = [ { content: 'Looker Components are a collection of tools for building Looker data experiences.', - type: 'Resource', - tag: 'component', + type: ResourceType.Resource, + tag: ResourceTag.Components, link: 'https://components.looker.com/', shortenedLink: 'https://bit.ly/2Z2Q69C', title: 'Looker Components', }, { content: 'Looker Components Storybook contains component examples', - type: 'Resource', - tag: 'component', + type: ResourceType.Resource, + tag: ResourceTag.Components, link: 'https://components.looker.com/storybook', shortenedLink: 'https://bit.ly/3pbpygP', title: 'Components Examples Storybook', @@ -131,8 +152,8 @@ export const resources: Array = [ { content: 'The Looker JavaScript Embed SDK makes embedding Looker content in your web application easy!', - type: 'Resource', - tag: 'embed', + type: ResourceType.Resource, + tag: ResourceTag.Embed, link: 'https://github.com/looker-open-source/embed-sdk', shortenedLink: 'https://bit.ly/3n2mDEJ', title: 'Embed SDK', @@ -140,8 +161,8 @@ export const resources: Array = [ { content: 'Henry is a command line tool that finds model bloat in your Looker instance and identifies unused content in models and explores.', - type: 'example', - tag: 'devtool', + type: ResourceType.Example, + tag: ResourceTag.Devtool, link: 'https://github.com/looker-open-source/henry', shortenedLink: 'https://bit.ly/3j1NShp', title: 'Henry', @@ -149,16 +170,16 @@ export const resources: Array = [ { content: 'A repository with multiple Extension Framework examples using Typescript, Javascript, React, and Redux', - type: 'example', - tag: 'extension', + type: ResourceType.Example, + tag: ResourceTag.Extensions, link: 'https://github.com/looker-open-source/extension-examples', shortenedLink: 'https://bit.ly/2YYdlkM', title: 'Extension Framework Examples', }, { content: `This example demonstrates most of Extension SDK's functionality and is a great starting point.`, - type: 'example', - tag: 'extension', + type: ResourceType.Example, + tag: ResourceTag.Extensions, link: 'https://github.com/looker-open-source/extension-examples/tree/main/react/typescript/kitchensink', shortenedLink: 'https://bit.ly/3n1zbMk', title: 'Extension Example: Kitchensink', @@ -166,8 +187,8 @@ export const resources: Array = [ { content: 'The React Extension SDK npm package. This lets you build a Looker extension — See the Extension Framework Examples for examples.', - type: 'resource', - tag: 'extension', + type: ResourceType.Resource, + tag: ResourceTag.Extensions, link: 'https://www.npmjs.com/package/@looker/extension-sdk-react', shortenedLink: 'https://bit.ly/3pbzoPN', title: 'Extension SDK: React', @@ -175,8 +196,8 @@ export const resources: Array = [ { content: 'Chatty is a simple web browser iframe host/client channel message manager. We use it for iframe communication.', - type: 'resources', - tag: 'embed', + type: ResourceType.Resource, + tag: ResourceTag.Embed, link: 'https://github.com/looker-open-source/chatty', shortenedLink: 'https://bit.ly/2Z2NrfP', title: 'Chatty - Iframe Msg Manager', @@ -184,8 +205,8 @@ export const resources: Array = [ { content: 'A Snowflake based LookML that demonstrates Looker’s value in the digital marketing landscape.', - type: 'example', - tag: 'lookml', + type: ResourceType.Example, + tag: ResourceTag.Lookml, link: 'https://github.com/looker-open-source/marketing_demo', shortenedLink: 'https://bit.ly/2YR9rKN', title: 'Digital Marketing Demo', @@ -193,8 +214,8 @@ export const resources: Array = [ { content: 'A BigQuery based LookML that demonstrates Looker’s value in the healthcare landscape.', - type: 'example', - tag: 'lookml', + type: ResourceType.Example, + tag: ResourceTag.Lookml, link: 'https://github.com/looker-open-source/healthcare_demo', shortenedLink: 'https://bit.ly/3FUokfN', title: 'Healthcare Demo', @@ -202,8 +223,8 @@ export const resources: Array = [ { content: 'This is the official Looker Data Dictionary, fully open source and available as an example.', - type: 'example', - tag: 'extension', + type: ResourceType.Example, + tag: ResourceTag.Extensions, link: 'https://github.com/looker-open-source/app-data-dictionary', shortenedLink: 'https://bit.ly/3vhMlZh', title: 'Data Dictionary Extension', @@ -211,8 +232,8 @@ export const resources: Array = [ { content: 'Thinking of doing a data analysis project for your hack? Browse and explore BigQuery public datasets through the hackathon instance', - type: 'resources', - tag: 'dataset', + type: ResourceType.Resource, + tag: ResourceTag.Datasets, link: 'https://hack.looker.com/dashboards/16', shortenedLink: 'https://bit.ly/3FX72yF', title: 'Public Datasets', @@ -220,16 +241,16 @@ export const resources: Array = [ { content: 'This COVID-19 Block consists of LookML models, pre-built dashboards, and explores. The underlying data is only available in BigQuery.', - type: 'example', - tag: 'lookml', + type: ResourceType.Example, + tag: ResourceTag.Lookml, link: 'https://github.com/looker/covid19/blob/master/readme.md', shortenedLink: 'https://bit.ly/3DPVWd5', title: 'COVID-19 Data Block', }, { content: 'Prebuilt dashboards for immediate access to COVID-19 data.', - type: 'resource', - tag: 'lookml', + type: ResourceType.Resource, + tag: ResourceTag.Lookml, link: 'https://covid19response.cloud.looker.com/embed/dashboards-next/51', shortenedLink: 'https://bit.ly/3n87txG', title: 'COVID-19 Dashboards', @@ -237,16 +258,16 @@ export const resources: Array = [ { content: 'This example demonstrates how to write a Looker extension that needs an access key to run.', - type: 'example', - tag: 'extension', + type: ResourceType.Example, + tag: ResourceTag.Extensions, link: 'https://github.com/looker-open-source/extension-examples/tree/main/react/typescript/access-key-demo', shortenedLink: 'https://bit.ly/3C6UXo8', title: 'Extension Example: Access Key', }, { content: 'An early-stage mockup of a Twitter-style Looker Extension.', - type: 'example', - tag: 'extension', + type: ResourceType.Example, + tag: ResourceTag.Extensions, link: 'https://github.com/bryan-at-looker/looker-feed', shortenedLink: 'https://bit.ly/3jhbyyu', title: 'Looker Feed Extension Mockup', @@ -254,8 +275,8 @@ export const resources: Array = [ { content: 'The official Looker Action Hub repository for all your action requirements and examples.', - type: 'example', - tag: 'action', + type: ResourceType.Example, + tag: ResourceTag.Actions, link: 'https://github.com/looker/actions', shortenedLink: 'https://bit.ly/3pc2vTa', title: 'Action Hub', @@ -263,8 +284,8 @@ export const resources: Array = [ { content: 'Direct link to the directory of all complete Actions in the official action hub.', - type: 'example', - tag: 'action', + type: ResourceType.Example, + tag: ResourceTag.Actions, link: 'https://github.com/looker/actions/tree/master/src/actions', shortenedLink: 'https://bit.ly/3vrwzeM', title: 'Actions Examples', @@ -272,8 +293,8 @@ export const resources: Array = [ { content: 'Mock ActionHub for local or serverless (Google Cloud Functions) use.', - type: 'example', - tag: 'action', + type: ResourceType.Example, + tag: ResourceTag.Actions, link: 'https://github.com/fabio-looker/sample-cloud-function-action', shortenedLink: 'https://bit.ly/3lSdCOU', title: 'Mock ActionHub', @@ -281,8 +302,8 @@ export const resources: Array = [ { content: 'Learn how to write an action that exports the results of a Looker Query to BigQuery.', - type: 'tutorial', - tag: 'action', + type: ResourceType.Tutorial, + tag: ResourceTag.Actions, link: 'https://discourse.looker.com/t/export-the-results-of-a-looker-query-to-bigquery/9720', shortenedLink: 'https://bit.ly/3jeJICU', title: 'BigQuery Writeback Action', @@ -290,32 +311,32 @@ export const resources: Array = [ { content: 'The official repository of Looker Custom Visualizations API and examples', - type: 'example', - tag: 'viz', + type: ResourceType.Example, + tag: ResourceTag.CustomViz, link: 'https://github.com/looker/custom_visualizations_v2', shortenedLink: 'https://bit.ly/3FYL2ni', title: 'Custom Visualizations v2', }, { content: 'Direct link to Looker Custom Visualization examples', - type: 'example', - tag: 'viz', + type: ResourceType.Example, + tag: ResourceTag.CustomViz, link: 'https://github.com/looker/custom_visualizations_v2/tree/master/src/examples', shortenedLink: 'https://bit.ly/3n3LRCE', title: 'Custom Viz Examples', }, { content: 'A Web IDE to help develop Looker Custom Visualizations.', - type: 'resource', - tag: 'viz', + type: ResourceType.Resource, + tag: ResourceTag.CustomViz, link: 'https://lookervisbuilder.com/', shortenedLink: 'https://bit.ly/3G2iHfw', title: 'Custom Viz Builder', }, { content: 'A tutorial to build a custom viz development environment', - type: 'tutorial', - tag: 'viz', + type: ResourceType.Tutorial, + tag: ResourceTag.CustomViz, link: 'https://discourse.looker.com/t/creating-a-development-environment-for-custom-visualizations/8470', shortenedLink: 'https://bit.ly/3DRnZc2', title: 'Custom Viz Dev Environment Setup', @@ -323,16 +344,16 @@ export const resources: Array = [ { content: 'An old example custom viz development environment developed by Headset. (may be out of date)', - type: 'example', - tag: 'viz', + type: ResourceType.Example, + tag: ResourceTag.CustomViz, link: 'https://github.com/Headset/looker-environment', shortenedLink: 'https://bit.ly/30EsLLL', title: 'Custom Vis Dev Environment Example', }, { content: 'An older demo of Lookers custom viz capabilities', - type: 'resource', - tag: 'viz', + type: ResourceType.Resource, + tag: ResourceTag.CustomViz, link: 'https://youtu.be/ixwWGKyG3wA', shortenedLink: 'https://bit.ly/2Z0MtjU', title: 'Custom Viz Demo Video', @@ -340,8 +361,8 @@ export const resources: Array = [ { content: 'This Google Apps Script uses Looker API to load Looks, get data dictionaries, etc.', - type: 'example', - tag: 'api', + type: ResourceType.Example, + tag: ResourceTag.API, link: 'https://github.com/brechtv/looker_google_sheets', shortenedLink: 'https://bit.ly/3BUdkg1', title: 'Looker API for Google Sheets', @@ -349,8 +370,8 @@ export const resources: Array = [ { content: 'This tool helps you troubleshoot SSO embed URLs generated by your scripts.', - type: 'resource', - tag: 'embed', + type: ResourceType.Resource, + tag: ResourceTag.Embed, link: 'https://fabio-looker.github.io/looker_sso_tool/', shortenedLink: 'https://bit.ly/30IY8F7', title: 'SSO Embed Tool', @@ -358,32 +379,32 @@ export const resources: Array = [ { content: 'The source code for the SSO embed tool for you to extend or run locally.', - type: 'example', - tag: 'embed', + type: ResourceType.Example, + tag: ResourceTag.Embed, link: 'https://github.com/fabio-looker/looker_sso_tool', shortenedLink: 'https://bit.ly/3n3MDzj', title: 'SSO Embed Tool Source', }, { content: 'Vim syntax for LookML. (may be out of date)', - type: 'example', - tag: 'devtool', + type: ResourceType.Example, + tag: ResourceTag.Devtool, link: 'https://github.com/thalesmello/lkml.vim', shortenedLink: 'https://bit.ly/3G2qJFe', title: 'LookML Vim Syntax', }, { content: 'VSCode syntax for LookML. (may be out of date)', - type: 'example', - tag: 'devtool', + type: ResourceType.Example, + tag: ResourceTag.Devtool, link: 'https://github.com/Ladvien/vscode-looker', shortenedLink: 'https://bit.ly/3lShYFK', title: 'LookML VSCode Syntax', }, { content: 'An automated EAV builder for EAV schemas.', - type: 'example', - tag: 'devtool', + type: ResourceType.Example, + tag: ResourceTag.Devtool, link: 'https://github.com/fabio-looker/eav-builder', shortenedLink: 'https://bit.ly/2Xobcy8', title: 'EAV Builder', @@ -391,8 +412,8 @@ export const resources: Array = [ { content: 'Learn how to set up your Looker instance to poll and make changes to your LookML model with an AWS Lambda function.', - type: 'tutorial', - tag: 'devtool', + type: ResourceType.Tutorial, + tag: ResourceTag.Devtool, link: 'https://discourse.looker.com/t/automating-frequently-changing-schemas-with-aws-lambda/10196', shortenedLink: 'https://bit.ly/3lTyoOo', title: 'Automate Schema Changes', @@ -400,8 +421,8 @@ export const resources: Array = [ { content: 'Developed by WW, this repository contains tools to handle best practices with developing LookML files.', - type: 'example', - tag: 'devtool', + type: ResourceType.Example, + tag: ResourceTag.Devtool, link: 'https://github.com/ww-tech/lookml-tools', shortenedLink: 'https://bit.ly/3vo5r01', title: 'LookML Tools', @@ -409,8 +430,8 @@ export const resources: Array = [ { content: 'This script was designed for data tables with JSON objects. It creates a LookML view file with a dimension for each JSON object field. (may be out of date)', - type: 'example', - tag: 'devtool', + type: ResourceType.Example, + tag: ResourceTag.Devtool, link: 'https://github.com/leighajarett/JSON_to_LookML', shortenedLink: 'https://bit.ly/3lR2xhe', title: 'JSON To LookML', @@ -418,40 +439,40 @@ export const resources: Array = [ { content: 'A tool to persist descriptions from your dbt project to your lookml project.', - type: 'example', - tag: 'devtool', + type: ResourceType.Example, + tag: ResourceTag.Devtool, link: 'https://github.com/fishtown-analytics/dbtdocs-to-lookml', shortenedLink: 'https://bit.ly/2Z81Szd', title: 'DBTdocs To LookML', }, { content: 'A LookML parser and serializer implemented in Python.', - type: 'resource', - tag: 'devtool', + type: ResourceType.Resource, + tag: ResourceTag.Devtool, link: 'https://github.com/joshtemple/lkml', shortenedLink: 'https://bit.ly/3lTzc5S', title: 'LookML parser', }, { content: "A comprehensive demo of Looker's embedding capabilities", - type: 'example', - tag: 'embed', + type: ResourceType.Example, + tag: ResourceTag.Embed, link: 'https://atomfashion.io/', shortenedLink: 'https://bit.ly/3BUogKR', title: 'Embed Demo', }, { content: 'An awesome list of awesome Looker projects.', - type: 'resource', - tag: 'other', + type: ResourceType.Resource, + tag: ResourceTag.Other, link: 'https://gitlab.com/alison985/awesome-looker/-/tree/main', shortenedLink: 'https://bit.ly/3DSZzPw', title: 'Awesome Looker Projects', }, { content: 'Looker 3.0 SDK for R', - type: 'Example', - tag: 'api', + type: ResourceType.Example, + tag: ResourceTag.API, link: 'https://github.com/looker-open-source/lookr', shortenedLink: 'https://bit.ly/3vfJwIr', title: 'Looker R SDK 3.0',