[Canvas] Storybook for testing and development #29072

clintandrewhall · 2019-01-21T22:33:24Z

Summary

This PR adds Storybook to our testing and development suite.

This will allow us to:

create a site outlining all components within Canvas, including their TS type information;
demonstrate usage of all components by example;
allow for individual component testing, both manually and by Jest;
iterate and fix bugs on individual components without having to start up Kibana, in a HMR environment;
automatically generate snapshots based on any examples written;

This PR also converts a few components to Typescript and adds examples.

How this can help us, (with examples)

I was inspired to add this when I was fixing #25342. In order to fix my changes, I had to run elasticsearch and kibana, as well as refresh my page whenever I needed to test a change. Had I had a Storybook instance, I would have been done much faster.

In this PR, you'll see I converted AdvancedFilter from renderers and FontPicker and ImageUpload from public/components. Would you believe I discovered and fixed bugs just by converting to Typescript and writing examples?

`AdvancedFilter`

onChange and commit are not marked as required in propTypes, but the component will error out if they're not supplied.
commit was actually being called twice when 'Apply' was clicked. This was shown in the 'Actions' panel when I was testing it.

`FontPicker`

The fonts collection was not strongly-typed, therefore any string could be passed to the value parameter without error.
While the code allows for any font string to be given to the component, there is no way to currently select that value, nor type it in within the control. This is likely a bug in design.
The aria-labeledby attribute in the drop down includes undefined. This is likely a bug in EUI:

How to use

cd x-pack/plugins/canvas/
Run node scripts/storybook to start up a local development version, with HMR.
Run node scripts/storybook_build to build a complete static version of the book.
Run node scripts/jest which will run the Storyshots test; run node scripts/jest --updateSnapshot if source code has changed as expected.

Future Work

Adding Jest coverage and output to the info panels, (this is sick functionality).
Adding automatic a11y testing, (currently blocked).
Adding generic knobs for stories
Adding more example info, (e.g. who edited last, descriptions, etc).

elasticmachine · 2019-01-21T22:33:25Z

Pinging @elastic/kibana-canvas

elasticmachine · 2019-01-21T23:17:45Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

monfera · 2019-01-22T09:07:21Z

retest

elasticmachine · 2019-01-22T09:47:46Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

snide · 2019-01-22T15:31:05Z

@clintandrewhall Abstracting a bit out here. Peeping your code I can see you set this up for canvas, but is there any reason this couldn't be set up for general Kibana development? Just thinking ahead and wondering where this will eventually lead. Do you see each team with their own storybook setup? If so would there be a way to navigate between them or would you spin each one up separately?

I know this is a PoC so not pushing hard on those questions, just curious what you think. Getting react dev out of Kibana's build system is obviously a win, I just have a hangup with reusability and always try to push people to share tooling between teams :)

Any documentation and dev tooling is always time for applause in my book.

clintandrewhall · 2019-01-23T02:30:38Z

@snide I was only keeping it sandboxed. There's no reason we couldn't migrate the dependencies and scripts up to Kibana. Several devs have indicated an interest in this kind of setup/testing environment, but I figured keeping it contained and then contributing upward would be the right order of operations.

I think if the Canvas team leverages this the way I intend, this will certainly be a model moving forward... particularly since it has the potential to automate our a11y/Jest/snapshot tests. Considering the YMMV nature, I just kept it in Canvas.

elasticmachine · 2019-01-23T20:47:20Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

markov00

Hey Clint, I've just added few suggestions on dependencies. I didn't check the code or tested it.
I'm also using storybook with TS on my charts library and I've more or less the same setup

x-pack/package.json

x-pack/plugins/canvas/.storybook/config.js

elasticmachine · 2019-01-24T11:36:28Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-24T12:04:48Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

monfera

Fantastic PR, storybook and the component improvements are great!

Testing HMR: when changing the button label "Apply" to "asdkhjhkj" it took 14 seconds from code to page, which is a welcome 2x improvement compared to a full Kibana server restart + page reload with the Dev Console on, and fully automatic. Plus storybook brings in a ton of other benefits. I'm wondering if the latency can somehow be tweaked, or if it's some issue with my environment. Maybe because ours is an exceptionally large codebase? storybook now covers Canvas only, not sure if it is going to be slower when it's for the entire Kibana as @snide suggested. Canvas is a small slice of all components, three of which are covered in this PR. Maybe there's speed headroom in a follow-up PR.

Mentioning it on the off-chance it relates to replacement latency, I get a bunch of unrelated warnings in the terminal, eg.

WARNING in /Users/robert/repos/elastic/kibana/node_modules/@elastic/eui/es/components/icon/index.js 1:0-129
"export 'IconColor' was not found in './icon'

x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/advanced_filter.tsx

monfera · 2019-01-24T14:30:33Z

x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/advanced_filter.tsx

 AdvancedFilter.propTypes = {
-  onChange: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
  value: PropTypes.string,


Completely unrelated to this PR, just trying to learn, and saw you've added component/type improvements: in this context, wouldn't it be useful to expect a value, even if it's the empty string? No specific reason, other than just simplifying types, value is likely coming from somewhere or could (should?) be initialized.

x-pack/plugins/canvas/common/lib/fonts.ts

stacey-gammon

Cool stuff! Few questions but no issues stand out to me, lookin good.

stacey-gammon · 2019-01-24T15:37:52Z

x-pack/plugins/canvas/.storybook/config.js

+addDecorator(storyWrapper);
+
+function loadStories() {
+  //require('./welcome');


looks like this can be deleted.

stacey-gammon · 2019-01-24T15:39:24Z

x-pack/package.json

    "apollo-link-state": "^0.4.1",
    "apollo-server-errors": "^2.0.2",
    "apollo-server-hapi": "^1.3.6",
+    "awesome-typescript-loader": "^5.2.1",


I looked up this package and looks like it's similar to ts-loader? Could we get away with only one, or does this come with benefits? Just thinking in the mindset of trying to minimize our dependencies.

Let me test it with just ts-loader... I seem to recall documentation having a problem, but I may have resolved that.

stacey-gammon · 2019-01-24T15:40:03Z

x-pack/package.json

    "sass-loader": "^7.1.0",
    "simple-git": "1.37.0",
    "sinon": "^5.0.7",
+    "storybook-addon-jsx": "^5.4.0",


I have pretty much nil experience with storybook. What's the JSX part supposed to do? In the UI looks like it's always blank.

I can remove this, sure.

stacey-gammon · 2019-01-24T15:42:39Z

x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/advanced_filter.tsx

+
 AdvancedFilter.propTypes = {
-  onChange: PropTypes.func,
+  onChange: PropTypes.func.isRequired,


What are your thoughts on having both propTypes and typescript prop interfaces? When I was typescripting react files I was replacing the former with the latter. I suppose you lose the runtime warnings, but if you have the compile time warnings, that seems better, and then no risk of them getting out of sync - single source of truth. But maybe there are good reason to keep both I'm unaware of.

I'm curious about that too. I had planned to remove propTypes completely when converting to tsx, but I'm super new to all this type stuff and maybe there's some benefit to using both that I don't know about.

We have to remember that TypeScript types are for build time warnings, which are transpiled away in final source, and prop types are evaluated at run time.

So prop types are incredibly important when some code is not typed with TypeScript... it's your last line of defense.

Once Canvas is fully converted, prop types become redundant. But for now, they're the bridge between TS code and React.

OK, so we're leaving them there so that non-ts components consuming ts components can still provide runtime warnings, but once all the components are converted, we'll be removing all the propType stuff?

@w33ble yes indeed. We'll have to add rules to not add .js files, as well... at least that would be my preference.

stacey-gammon · 2019-01-24T15:43:39Z

x-pack/plugins/canvas/.storybook/config.js

+
+// Wrap each story with a div -- we may make this smarter later.
+// const storyWrapper = story => <div style={{ margin: 24 }}>{story()}</div>;
+// addDecorator(storyWrapper);


should this be deleted too?

stacey-gammon · 2019-01-24T15:44:45Z

x-pack/plugins/canvas/.storybook/webpack.config.js

+    ],
+  });
+
+  config.plugins.push(new TSDocgenPlugin()); // optional


TSDocgenPlugin is optional? This comment doesn't help me much as a reader of the code, can you elaborate (or maybe just remove).

Copy/paste from the "getting started" docs. :-/

stacey-gammon · 2019-01-24T15:54:54Z

x-pack/plugins/canvas/canvas_plugin_src/renderers/advanced_filter/component/index.ts

+  commit: (value: string) => void;
+}
+
+export const AdvancedFilter = compose<ComponentProps, Props>(


I haven't used compose before, but I was using connect over in dashboard code. If you have experience in both I'd be interested to hear the differences. Also wondering about your thoughts on naming. Over in dashboard I was doing something like dashboard_panel_container.ts is the wrapper and dashboard_panel.ts is the inner component. It's not the best set up, and there was some back and forth on it (don't like leaking implementation details to users - what do they care if it's a wrapper or the actual thing, the "container" suffix means nothing to them). Actually at some point we did something similar to this, so externally the component name looks the same as the internal name:

export DashboardPanelContainer as DashboardPanel; in the index file.

But, we migrated back to the first version when it became clear this was caused confusion when devs not familiar with the code were searching for the component being used - it's not obvious which is which.

Not something that needs to be solved in this PR but I'd be interested to hear your opinions on the matter and maybe we can come up with a "best practice" across the board for this. Not too many users of redux at this point so probably wouldn't be too tough to align. (assuming this is even a redux thing and similar to the connect stuff being done in dashboard code).

I haven't used compose before, but I was using connect over in dashboard code. If you have experience in both I'd be interested to hear the differences.

compose and connect are not the same thing. connect is an HoC used with redux to inject state values as props. compose is a functional concept where each function is executed and the output is passed to the next one. It's an easy way to tack on multiple HoC's.

// instead of writing this (warning, i might have the function order backwards here... i mix that up a lot) connect(...)(withState(...)(withRouter(...)(Component))) // you can write this (functions are called from left to right, no need to think about the order) compose( connect(...), withState(...), withRouter(...) )(Component)

In this specific instance, there's only one HoC, so compose isn't needed.

For reference:

nearly every math-centric library has a compose function, like R.compose and _.flow

redux also comes with a compose function which is commonly used to stack multiple middlewares

we use recompose's compose function since it's all part of the same dependency

it's not too complicated, just a weird concept. the implementation in just-compose is pretty easy to follow, and the one in recompose is even easier with all the es6 goodness

As for the file naming/organization question, we got that idea from the Cloud team, and it's worked quite well for us. The pattern is that you always import the component from the directory, which resolves to the index file by default, and that's our container. That's now the "public API" for the component, the state is just wrapped up transparently.

If you need to test the component in isolation, you can do so by importing the file instead of the directory (ie components/my_component/my_component).

Early on we decided that all components should be functional, and all state, lifecycles, etc. should live in the container. We used recompose extensively to do that. We've soured on the idea a bit, opting for class components when we need local state and lifecycle stuff, but there's still a bunch of old components kicking around. With hooks coming to React, I suspect we'll remove recompose entirely (the API is very similar in most cases).

x-pack/plugins/canvas/.storybook/webpack.config.js

elasticmachine · 2019-02-11T18:02:31Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-02-11T19:26:20Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-02-14T18:47:55Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-02-14T22:28:40Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-02-14T22:56:04Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

spalger · 2019-02-15T02:46:34Z

[00:00:00]         └-: apis
[00:00:00]           └-> "before all" hook
[00:03:34]           └-: uptime
[00:03:34]             └-> "before all" hook
[00:03:35]             └-: graphql
[00:03:35]               └-> "before all" hook
[00:03:35]               └-> "before all" hook: load heartbeat data
[00:03:35]                 │ info [uptime/full_heartbeat] Loading "mappings.json"
[00:03:35]                 │ info [uptime/full_heartbeat] Loading "data.json.gz"
[00:03:35]                 │ info [o.e.c.m.MetaDataDeleteIndexService] [kibana-ci-immutable-debian-1550181393347087854] [heartbeat-8.0.0/i_1eskTPQDmAcL3XTMuZCQ] deleting index
[00:03:35]                 │ info [uptime/full_heartbeat] Deleted existing index "heartbeat-8.0.0"
[00:03:35]                 │ info [o.e.c.m.MetaDataCreateIndexService] [kibana-ci-immutable-debian-1550181393347087854] [heartbeat-8.0.0] creating index, cause [api], templates [], shards [1]/[0], mappings [_doc]
[00:03:35]                 │ info [uptime/full_heartbeat] Created index "heartbeat-8.0.0"
[00:03:35]                 │ debg [uptime/full_heartbeat] "heartbeat-8.0.0" settings {"index":{"analysis":{"analyzer":{"url":{"max_token_length":"1000","tokenizer":"uax_url_email","type":"standard"}}},"number_of_replicas":"0","number_of_shards":"1"}}
[00:04:06]                 └- ✖ fail: "apis uptime graphql "before all" hook: load heartbeat data"
[00:04:06]                 │      Error: Request Timeout after 30000ms
[00:04:06]                 │       at /var/lib/jenkins/workspace/elastic+kibana+pull-request/JOB/x-pack-ciGroup5/node/immutable/kibana/node_modules/elasticsearch/src/lib/transport.js:355:15
[00:04:06]                 │       at Timeout.<anonymous> (/var/lib/jenkins/workspace/elastic+kibana+pull-request/JOB/x-pack-ciGroup5/node/immutable/kibana/node_modules/elasticsearch/src/lib/transport.js:384:7)
[00:04:06]                 │

I've seen this failure a couple times now, investigating how to prevent it in the esarchiver, jenkins, test this please

elasticmachine · 2019-02-15T03:39:42Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

This PR adds [Storybook](https://storybook.js.org/) to our testing and development suite. ![screen shot 2019-01-21 at 4 35 32 pm](https://user-images.githubusercontent.com/297604/51502196-9f856780-1d9a-11e9-97bf-07c99c3f279b.png) This will allow us to: 1. create a site outlining all components within Canvas, including their TS type information; 2. demonstrate usage of all components by example; 3. allow for individual component testing, both manually and by Jest; 4. iterate and fix bugs on individual components *without* having to start up Kibana, in a [HMR](https://webpack.js.org/concepts/hot-module-replacement/) environment; 5. automatically generate [snapshots](https://jestjs.io/docs/en/snapshot-testing) based on any examples written; This PR also converts a few components to Typescript and adds examples. I was inspired to add this when I was fixing elastic#25342. In order to fix my changes, I had to run elasticsearch and kibana, as well as refresh my page whenever I needed to test a change. Had I had a Storybook instance, I would have been done much faster. In this PR, you'll see I converted `AdvancedFilter` from `renderers` and `FontPicker` and `ImageUpload` from `public/components`. Would you believe I discovered and fixed bugs just by converting to Typescript and writing examples? - `onChange` and `commit` are not marked as required in `propTypes`, but the component will error out if they're not supplied. - `commit` was actually being called twice when 'Apply' was clicked. This was shown in the 'Actions' panel when I was testing it. - The `fonts` collection was not strongly-typed, therefore any string could be passed to the `value` parameter without error. - While the code allows for any font string to be given to the component, there is no way to currently select that value, nor type it in within the control. This is likely a bug in design. - The `aria-labeledby` attribute in the drop down includes `undefined`. This is likely a bug in EUI: ![screen shot 2019-01-21 at 4 25 58 pm](https://user-images.githubusercontent.com/297604/51501908-5ed91e80-1d99-11e9-913a-ce1bb5f4e352.png) - `cd x-pack/plugins/canvas/` - Run `node scripts/storybook` to start up a local development version, with HMR. - Run `node scripts/storybook_build` to build a complete static version of the book. - Run `node scripts/jest` which will run the Storyshots test; run `node scripts/jest --updateSnapshot` if source code has changed as expected. - Adding Jest coverage and output to the info panels, ([this](https://www.npmjs.com/package/@storybook/addon-jest) is *sick* functionality). - Adding automatic [a11y testing](https://www.npmjs.com/package/@storybook/addon-a11y), (currently [blocked](storybookjs/storybook#4889)). - Adding generic knobs for stories - Adding more example info, (e.g. who edited last, descriptions, etc).

* [Canvas] Storybook for testing and development (#29072) This PR adds [Storybook](https://storybook.js.org/) to our testing and development suite. ![screen shot 2019-01-21 at 4 35 32 pm](https://user-images.githubusercontent.com/297604/51502196-9f856780-1d9a-11e9-97bf-07c99c3f279b.png) This will allow us to: 1. create a site outlining all components within Canvas, including their TS type information; 2. demonstrate usage of all components by example; 3. allow for individual component testing, both manually and by Jest; 4. iterate and fix bugs on individual components *without* having to start up Kibana, in a [HMR](https://webpack.js.org/concepts/hot-module-replacement/) environment; 5. automatically generate [snapshots](https://jestjs.io/docs/en/snapshot-testing) based on any examples written; This PR also converts a few components to Typescript and adds examples. I was inspired to add this when I was fixing #25342. In order to fix my changes, I had to run elasticsearch and kibana, as well as refresh my page whenever I needed to test a change. Had I had a Storybook instance, I would have been done much faster. In this PR, you'll see I converted `AdvancedFilter` from `renderers` and `FontPicker` and `ImageUpload` from `public/components`. Would you believe I discovered and fixed bugs just by converting to Typescript and writing examples? - `onChange` and `commit` are not marked as required in `propTypes`, but the component will error out if they're not supplied. - `commit` was actually being called twice when 'Apply' was clicked. This was shown in the 'Actions' panel when I was testing it. - The `fonts` collection was not strongly-typed, therefore any string could be passed to the `value` parameter without error. - While the code allows for any font string to be given to the component, there is no way to currently select that value, nor type it in within the control. This is likely a bug in design. - The `aria-labeledby` attribute in the drop down includes `undefined`. This is likely a bug in EUI: ![screen shot 2019-01-21 at 4 25 58 pm](https://user-images.githubusercontent.com/297604/51501908-5ed91e80-1d99-11e9-913a-ce1bb5f4e352.png) - `cd x-pack/plugins/canvas/` - Run `node scripts/storybook` to start up a local development version, with HMR. - Run `node scripts/storybook_build` to build a complete static version of the book. - Run `node scripts/jest` which will run the Storyshots test; run `node scripts/jest --updateSnapshot` if source code has changed as expected. - Adding Jest coverage and output to the info panels, ([this](https://www.npmjs.com/package/@storybook/addon-jest) is *sick* functionality). - Adding automatic [a11y testing](https://www.npmjs.com/package/@storybook/addon-a11y), (currently [blocked](storybookjs/storybook#4889)). - Adding generic knobs for stories - Adding more example info, (e.g. who edited last, descriptions, etc). * Update based on errors in CI * Fix mismerge of dependencies * Fix yarn.lock as well

clintandrewhall added 8 commits January 18, 2019 17:00

Example framework

94fbb30

Fixing missing doctypes

bf4ef56

Moving dependencies around

44796a4

Adding Font and FontPicker TS + Examples

82fc98e

Adding Advanced Filter - fixing AF bugs - add shots

bb3c225

Cleaning up

1870756

Fix minor bug with storybook config

844c535

Updating shots

4480bb0

clintandrewhall added review Feature:Dev Tools Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// labels Jan 21, 2019

clintandrewhall requested review from cqliu1, snide, stacey-gammon and w33ble January 21, 2019 22:33

clintandrewhall requested a review from a team as a code owner January 21, 2019 22:33

clintandrewhall added 2 commits January 23, 2019 14:56

Quick tweak to FontPicker

28d2c5f

Merge branch 'master' into examples-experiment

9dea618

markov00 reviewed Jan 23, 2019

View reviewed changes

x-pack/package.json Outdated Show resolved Hide resolved

x-pack/package.json Outdated Show resolved Hide resolved

x-pack/plugins/canvas/.storybook/config.js Outdated Show resolved Hide resolved

Addressing feedback

12a1383

clintandrewhall mentioned this pull request Jan 24, 2019

[Canvas] Type renderers; Add DropdownFilter types + stories #29253

Closed

Addressing feedback

93fc83d

monfera approved these changes Jan 24, 2019

View reviewed changes

stacey-gammon reviewed Jan 24, 2019

View reviewed changes

markov00 reviewed Feb 11, 2019

View reviewed changes

x-pack/plugins/canvas/.storybook/webpack.config.js Outdated Show resolved Hide resolved

Merge branch 'master' into examples-experiment

8eeb4a7

Addressing feedback; updating based on recent changes to master

c584272

clintandrewhall added 2 commits February 14, 2019 10:15

Remove webpack config; fix newlines; remove jsx dependency

7f82d4d

Merge branch 'master' into examples-experiment

a29a07f

clintandrewhall added 2 commits February 14, 2019 15:35

Major overhaul now that Canvas uses Kibana build/optimizer

ffc5e55

Updating snapshot due to updates in EUI

0d2f15d

clintandrewhall merged commit 3727b53 into elastic:master Feb 15, 2019

chandlerprall mentioned this pull request Feb 22, 2019

Kibana doesn't load in IE #31693

Closed

clintandrewhall mentioned this pull request Apr 2, 2019

[7.x] [Canvas] Storybook for testing and development (#29072) #34326

Closed

clintandrewhall mentioned this pull request Apr 2, 2019

[7.x] [Canvas] Storybook for testing and development (#29072) #34329

Merged

clintandrewhall deleted the examples-experiment branch June 6, 2019 04:23

[Canvas] Storybook for testing and development #29072

[Canvas] Storybook for testing and development #29072

Uh oh!

Conversation

clintandrewhall commented Jan 21, 2019 • edited by monfera Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How this can help us, (with examples)

AdvancedFilter

FontPicker

How to use

Future Work

Uh oh!

elasticmachine commented Jan 21, 2019

Uh oh!

elasticmachine commented Jan 21, 2019

💔 Build Failed

Uh oh!

monfera commented Jan 22, 2019

Uh oh!

elasticmachine commented Jan 22, 2019

💚 Build Succeeded

Uh oh!

snide commented Jan 22, 2019

Uh oh!

clintandrewhall commented Jan 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

elasticmachine commented Jan 23, 2019

💚 Build Succeeded

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jan 24, 2019

💚 Build Succeeded

Uh oh!

elasticmachine commented Jan 24, 2019

💚 Build Succeeded

Uh oh!

monfera left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

stacey-gammon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clintandrewhall commented Jan 21, 2019 •

edited by monfera

Loading

`AdvancedFilter`

`FontPicker`

clintandrewhall commented Jan 23, 2019 •

edited

Loading

w33ble Jan 24, 2019 •

edited

Loading

w33ble Jan 24, 2019 •

edited

Loading