ui: extract Statements Page components into standalone module #47527
Assignees
Labels
C-enhancement
Solution expected to add code/behavior + preserve backward-compat (pg compat issues are exception)
Comments
This was referenced Apr 22, 2020
This was referenced Apr 30, 2020
craig bot
pushed a commit
that referenced
this issue
May 27, 2020
47484: ui: CSS modules for BarCharts components r=koorosh a=koorosh Depends on: #47417 Depends on: cockroachdb/yarn-vendored#20 Related to: #47527 Current draft is just example for possible styles isolation with CSS modules. It is required to make components self-contained and easy for extraction. Before all css files were loaded into global scope even if file was imported in some particular module. Now it is possible to define styles as before and use old styles without changes, and as a module, to do this - files has to be named as someName.module.styl In webpack config, `style-loader` is defined two times with different file name matchers to be able define style loaders with and without modules. `barCharts` component is a first candidate to try out css modules. - all styles related to `barCharts` are copied(!) to `barCharts.module.styl` file, so in case another component somehow relies on styles defined for barCharts - it won't be affected. Storybook is extended with stories related to `barCharts` Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com>
knz
added
the
C-enhancement
craig bot
pushed a commit
that referenced
this issue
Jun 4, 2020
47513: ui: CSS modules for PlanView component r=koorosh a=koorosh Depends on: #47484 Related to: #47527 - Refactored font imports to correctly resolve paths when module is required from different locations; Fonts are imported directly from `app.styl` file which allows import `typography.styl` without dependencies. This change was required because importing `typography.styl` file from CSS modules failed with unresolved paths inside of `fonts.styl` file (which was required in `typography.styl` file). Before, ``` app.styl |-- typography.styl |-- fonts.styl ``` Now: ``` app.styl |-- typography.styl |-- fonts.styl ``` - Move all files related to PlanView component under `planView` directory - Added storybook for `PlanView` component - `planView.module.styl` file contains copy of styles (from `statements.styl`) which is used by component only. Release note: None 49779: opt: incorporate cast volatility r=RaduBerinde a=RaduBerinde This change incorporates the new cast volatility information into the VolatilitySet property. Release note: None 49783: geo/geotransform: implement ST_Transform r=sumeerbhola a=otan This PR implements ST_Transform, allowing the transformation from one SRID to another. The `geoprojbase` package defines a barebones set of types as well as a hardcoded list of SRIDs to keep in memory. I've only filled in a few for now, and will save updating this for a later PR. `geoproj` is strictly a C library interface library which performs the necessary transformations. `geotransform` is where the function is actually handled and to be used by `geo_builtins.go`. Resolves #49055 Resolves #49056 Resolves #49057 Resolves #49058 Release note (sql change): Implemented the ST_Transform function for geometries. 49804: opt: ON UPDATE cascades for Upsert r=RaduBerinde a=RaduBerinde This change implements ON UPDATE actions for Upsert operations. The existing machinery for Update can be used without modification. Release note: None Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com> Co-authored-by: Radu Berinde <radu@cockroachlabs.com> Co-authored-by: Oliver Tan <otan@cockroachlabs.com>
craig bot
pushed a commit
that referenced
this issue
Jun 4, 2020
47606: ui: CSS modules for Table components r=koorosh a=koorosh Depends on #47513 Related to #47527 This change refactors components to use CSS modules and incorporate all required styles without any external dependencies and prevent styles altering from outside. It affects several components which tightly coupled with StatementsTable and couldn't be changed separately. Following component are changed: - HighlightedText - Drawer - StatementsTable - SortableTable Note, that `StatementsTable#makeCommonColumns` function is refactored to provide custom styles from parent to child components via props instead of overriding styles. Storybook is extended to show some components as independent units or in context of `StatementTable` component (if it is only the way components work). Release note: None 49770: changefeedccl: change default flush interval to 5s r=dt a=dt We observed a customer cluster's changefeeds to cloud storage 'getting stuck' which on further investigation was determined to be happening because they were spending too much time in flushing. This was because they were writing to a cloud sink and the default flush interval of 200ms (poller interval of 1s / 5) meant it spent all of its time flushing. This default was picked testing with lower-latency sinks and was noted in a comment as somewhat arbitrary. This change does two things: it increases the default to the poller interval if unspecified, instead of poller interval / 5, meaning 1s instead of 200ms at the default setting, and if the sink being used is cloud storage, it changes it to the greater of that or 5s. Users who truely desire lower latency can of course specify their own 'resolved' interval, so this change in the default is for those that are indifferent, and increasing the latency to 1s or 5s reduces the chance of hiitting this unfortunate edge case when the sink is too slow. Release note (enterprise change): The default flush interval for changefeeds that do not specify a 'resolved' option is now 1s instead of 200ms, or 5s if the changefeed sink is cloud-storage. 49819: Use faster set for column IDs in schemaexpr r=mgartner a=mgartner #### sqlbase: add ColSet wrapper for util.FastIntSet of ColumnID There are numerous places where a `map[sqlbase.ColumnID]struct{}` or a `util.FastIntSet` is used to represent a set of `sqlbase.ColumnID`. This commit adds a typed wrapper around `util.FastIntSet` which is an efficient and ergonimic replacement for maps and `util.FastIntSet`. Release note: None #### schemaexpr: use sqlbase.ColSet instead of maps This commit replaces maps used as sets of integers with sqlbase.ColSet because it is a more efficient set implementation. Release note: None Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com> Co-authored-by: David Taylor <tinystatemachine@gmail.com> Co-authored-by: Marcus Gartner <marcus@cockroachlabs.com>
craig bot
pushed a commit
that referenced
this issue
Jun 9, 2020
48012: ui: CSS modules for Statements filter section r=koorosh a=koorosh Depends on #47606 Related to #47527 This change refactors following components to use CSS modules instead of styles defined as global: - Dropdown - Search - PageConfig Release note: None Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com>
craig bot
pushed a commit
that referenced
this issue
Jun 9, 2020
48090: ui: CSS modules for Statements Details page r=koorosh a=koorosh Depends on #48012 Related to #47527 Following components are refactored to use CSS modules instead of global styles: - Statement Details page - Statements Diagnostics components - Anchor - Text - Empty Before, `Empty` component had styles which override Text, and Anchor components. Now, these styles are passed via `className` component props and custom styles defined by outer component. Release note: None Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com>
craig bot
pushed a commit
that referenced
this issue
Jun 9, 2020
48155: ui: CSS modules for Button component r=koorosh a=koorosh Depends on #48090 Related to #47527 Before, Button component had styles defined with own namespacing and now styles are imported as CSS module. The main change is separation BackIcon component which was coupled with Button and the way custom styles were applied to display button as a link without highlighting. - BackIcon is refactored to it's own module with styles - custom styles are applied with new Button type option - `unstyled-link`. Release note: None 48217: ui: CSS modules for SqlBox components r=koorosh a=koorosh Depends on #48155 Related to #47527 Refactor following components to use CSS modules instead of global styles: - SqlBox - highlight Note, `hljs-` classes are 3rd-party styles which are overriden with custom styles. Release note: None 48234: ui: CSS modules for Badge component r=koorosh a=koorosh Depends on #48217 Related to #47527 Define styles for Badge component as CSS modules. Release note: None Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Since we'll be extracting the primary Admin UI pages for embedding elsewhere, we'll be tackling the Statements page first.
As part of this work we'll need to figure out how to extract individual components and ensure they do not rely on global CSS.
These components, including the Statements Page, will be isolated as display-only components in the Storybook instance for later extraction into the
UIrepository.Antdstyles. Make sure that imported ant components do not pollute global CSS.Following components have to be refactored to use CSS modules:
The text was updated successfully, but these errors were encountered: