mirror of
https://github.com/PostHog/posthog.git
synced 2024-11-22 08:15:44 +01:00
01873b1780
* refactor(taxonomic-filter): add api mock functions
* chore: remove makeApi from storybook preview.js
* feat(correlation): add multiselect for property names
Previously we had a simple text input box that was splitting the input
to get a list of property names. This doesn't give the greatest user
experience.
Now we have a simple select box that includes:
1. search filtering for options
2. multiselecting options
3. a select $all, although this is pretty poorly implemented at the
moment, for instance you can select $all, at the same time as
selecting a subset of properties.
* add a little commentary around PropertyNamesSelect
* add deps to useEffect
* ignore return type eslint issues
* just use console.log instead of actions
* remove unused import
* chore: add error condition
* chore(correlation): update styling of property select
This puts it more in line with
https://www.figma.com/file/gQBj9YnNgD8YW4nBwCVLZf/PostHog-App?node-id=4200%3A30715
* Add no search results message
* input focus border
* fix type
* use onBlur
* make checkbox checked colour change
* make query bold in no results message
* add clear
* Implement search highlighting
* fix typing
* add regex split comment
* if no property names selected, default to $all
* typo
* Add test for selection component
* Add test highlighting onChange lag and clicking outside
* click out side should depend on hide
* make sure onChange triggered on clear or select all
57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import { getContext } from 'kea'
|
|
import '~/styles'
|
|
import { worker } from '../frontend/src/mocks/browser'
|
|
import { loadPostHogJS } from '~/loadPostHogJS'
|
|
|
|
const setupMsw = () => {
|
|
// Make sure the msw worker is started, if we're running in browser
|
|
// NOTE: we could be running in node for instance
|
|
if (typeof window.process === 'undefined') {
|
|
worker.start()
|
|
}
|
|
}
|
|
|
|
setupMsw()
|
|
|
|
const setupPosthogJs = () => {
|
|
// Make sure we don't hit production posthog. We want to control requests to,
|
|
// e.g. `/decide/` for feature flags
|
|
window.JS_POSTHOG_HOST = window.location.origin
|
|
|
|
// We don't be doing any authn so we can just use a fake key
|
|
window.JS_POSTHOG_API_KEY = 'dummy-key'
|
|
|
|
loadPostHogJS()
|
|
}
|
|
|
|
setupPosthogJs()
|
|
|
|
window.getReduxState = () => getContext().store.getState()
|
|
|
|
// Setup storybook global parameters. See https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
|
|
export const parameters = {
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/,
|
|
},
|
|
},
|
|
|
|
options: {
|
|
// opt in to panels in your story by overridding `export const parameters`
|
|
showPanel: false,
|
|
},
|
|
}
|
|
|
|
// Setup storybook global decorators. See https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators
|
|
export const decorators = [
|
|
// Make sure the msw service worker is started, and reset the handlers to
|
|
// defaults.
|
|
(Story) => {
|
|
worker.resetHandlers()
|
|
return <Story />
|
|
},
|
|
]
|