From 8574a62dbc1eff4a58612a550a20dfb8a855ebb7 Mon Sep 17 00:00:00 2001 From: Alan Greene Date: Wed, 28 Apr 2021 20:35:42 +0100 Subject: [PATCH] Enable Carbon CSS custom properties Enable the Carbon CSS custom properties feature flag so we can more easily handle theming, including component-specific overrides as needed (e.g. log container). Replace some hard-coded background colours with the appropriate theme tokens so they're updated correctly to match the selected theme. Reorganise the SCSS imports so they're no longer loaded from the individual components' JS files. This is for a number of reasons: - support for the CSS custom properties - reduce duplicate styles in output (each JS import of a SCSS file results in a new SASS build context rendering the `import-once` useless) - give consumers more control over the styles loaded Update unit tests to account for Carbon changes in icon-only buttons and dropdowns (they only add title attribute when text is truncated) A future PR will introduce more easily consumable bundles of styles, for example the `PipelineRun` component currently requires the `TaskTree`, `Task`, `Step`, etc. styles to be loaded, so it would make sense to provide an easily consumable SCSS import to fulfill this. --- .storybook/Container.scss | 3 + package-lock.json | 165 ++++++++++-------- package.json | 7 +- packages/components/package.json | 7 +- .../DataTableSkeleton/DataTableSkeleton.js | 5 +- .../src/components/DeleteModal/DeleteModal.js | 2 - .../components/DetailsHeader/DetailsHeader.js | 2 - .../DetailsHeader/DetailsHeader.scss | 4 +- .../src/components/Graph/Graph.scss | 3 +- .../components/src/components/Graph/Node.js | 4 +- .../components/Graph/ZoomablePipelineGraph.js | 5 +- .../Graph/ZoomablePipelineGraph.scss | 4 +- .../src/components/Header/Header.js | 4 +- .../components/KeyValueList/KeyValueList.js | 4 +- .../components/KeyValueList/KeyValueList.scss | 4 +- .../KeyValueList/KeyValueList.test.js | 6 +- .../src/components/LabelFilter/LabelFilter.js | 4 +- .../components/LabelFilter/LabelFilter.scss | 4 +- .../components/LoadingShell/LoadingShell.js | 4 +- .../components/LoadingShell/LoadingShell.scss | 2 - packages/components/src/components/Log/Log.js | 2 - .../components/src/components/Log/Log.scss | 2 - .../src/components/LogFormat/LogFormat.js | 5 +- .../components/LogoutButton/LogoutButton.js | 3 +- .../components/src/components/Param/index.js | 5 +- .../src/components/PipelineRun/PipelineRun.js | 2 - .../components/PipelineRuns/PipelineRuns.js | 4 +- .../components/src/components/Rerun/Rerun.js | 3 +- .../src/components/RunHeader/RunHeader.js | 2 - .../src/components/RunHeader/RunHeader.scss | 2 +- .../src/components/Spinner/Spinner.js | 2 - .../src/components/StatusIcon/StatusIcon.js | 2 - .../src/components/StatusIcon/StatusIcon.scss | 2 - .../components/src/components/Step/Step.js | 2 - .../components/src/components/Step/Step.scss | 4 +- .../src/components/StepDetails/StepDetails.js | 4 +- .../components/src/components/Table/Table.js | 4 +- .../src/components/Table/Table.scss | 4 +- .../components/src/components/Task/Task.js | 2 - .../components/src/components/Task/Task.scss | 4 +- .../TaskRunDetails/TaskRunDetails.js | 2 - .../src/components/TaskTree/TaskTree.js | 4 +- .../src/components/TaskTree/TaskTree.scss | 2 - .../src/components/Trigger/Trigger.js | 2 - .../src/components/Trigger/Trigger.scss | 4 +- .../src/components/ViewYAML/ViewYAML.js | 4 +- .../src/components/ViewYAML/ViewYAML.scss | 4 +- packages/components/src/scss/Run.scss | 4 +- packages/components/src/scss/_vars.scss | 18 -- src/containers/About/About.js | 2 - src/containers/About/About.scss | 4 +- src/containers/App/App.js | 3 +- src/containers/ClusterTasks/ClusterTasks.js | 2 - .../ClusterTriggerBinding.js | 2 - .../CreatePipelineResource.js | 2 - .../CreatePipelineRun/CreatePipelineRun.js | 2 - .../CreatePipelineRun.test.js | 43 ++--- src/containers/CreateTaskRun/CreateTaskRun.js | 2 - .../CreateTaskRun/CreateTaskRun.test.js | 45 ++--- src/containers/EventListener/EventListener.js | 2 - src/containers/Extensions/Extensions.js | 2 - .../ImportResources/ImportResources.js | 2 - .../ImportResources/ImportResources.scss | 2 - .../ListPageLayout/ListPageLayout.js | 2 - .../ListPageLayout/ListPageLayout.scss | 2 - src/containers/Pipelines/Pipelines.js | 2 - src/containers/SideNav/SideNav.js | 2 - src/containers/SideNav/SideNav.scss | 4 +- src/containers/TaskRun/TaskRun.js | 1 - src/containers/Tasks/Tasks.js | 2 - .../TriggerBinding/TriggerBinding.js | 2 - .../TriggerTemplate/TriggerTemplate.js | 2 - src/scss/App.scss | 35 ++++ src/scss/Create.scss | 2 - src/scss/Triggers.scss | 2 - src/scss/_carbon.scss | 15 +- 76 files changed, 225 insertions(+), 310 deletions(-) delete mode 100644 packages/components/src/scss/_vars.scss diff --git a/.storybook/Container.scss b/.storybook/Container.scss index 562b6b941..baecd25e7 100644 --- a/.storybook/Container.scss +++ b/.storybook/Container.scss @@ -12,3 +12,6 @@ limitations under the License. */ @import '../src/scss/App'; + +@import '@tektoncd/dashboard-components/dist/components/Graph/Graph.scss'; +@import '@tektoncd/dashboard-components/dist/components/Graph/ZoomablePipelineGraph.scss'; diff --git a/package-lock.json b/package-lock.json index 61774ec67..baa2f240e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1954,35 +1954,34 @@ "dev": true }, "@carbon/feature-flags": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.2.0.tgz", - "integrity": "sha512-CbHTsC4E17Qg3QibWlTDrkM3hhBUL8NXV6WIFz9gpswyZ+vS00LDJHGGP1xffnPUyOtQVxGe0oz0IGYZgy2C6g==" + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.3.0.tgz", + "integrity": "sha512-YMwPWTyKumkEBXunxMe3Q5ruqGQxt3qjPmg8MXZUQvsrz+mGLM78sOPFy7zhZ6BtFyUVHeU2qAdF1Wjufmex/w==" }, "@carbon/icon-helpers": { - "version": "10.15.0", - "resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.15.0.tgz", - "integrity": "sha512-TpCvRARVI1XnyuhxM8BgHl3m+HRlUkkef32SC6NGhz2cF99/3EsWAzcPz98JNCojAYYXHjGiEfO6K61z53u+lg==" + "version": "10.16.0", + "resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.16.0.tgz", + "integrity": "sha512-cN1sM0xvlDEN1pYPDWoHcikGysCTnfA49/12H92dBkn14fpRmB87shIe3hzKlW6h4QP7CrnF0hB5SCkA2KC7Ng==" }, "@carbon/icons-react": { - "version": "10.28.0", - "resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-10.28.0.tgz", - "integrity": "sha512-y7BKGPCqF6xJx/VMU/KHJdXsGKk+cY9F9Mi18Si9oJlY14foV/Us9Nw2eJjgPNO6MRdcxb2H6lmakngGEznB1Q==", + "version": "10.30.0", + "resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-10.30.0.tgz", + "integrity": "sha512-bK2g9QYJ8k5qUHoYQxKWL+gnpRgFsLMn9ct1S7bIaamE10Gf47GbSbxMKg/QpNKJTf2dBXYkB/DTypHNK1JYQA==", "requires": { - "@carbon/icon-helpers": "^10.15.0", + "@carbon/icon-helpers": "^10.16.0", + "@carbon/telemetry": "0.0.0-alpha.6", "prop-types": "^15.7.2" } }, "@carbon/import-once": { - "version": "10.3.0", - "resolved": "https://registry.npmjs.org/@carbon/import-once/-/import-once-10.3.0.tgz", - "integrity": "sha512-PFk3FhMe3psihYtCg3JsyPHismqglnbUqIpz1DCG5Gn/kt0HdVKhGvHdEq7E305rGoBUCKzMn/4xoY9v9mcmlg==", - "dev": true + "version": "10.6.0", + "resolved": "https://registry.npmjs.org/@carbon/import-once/-/import-once-10.6.0.tgz", + "integrity": "sha512-vi0lnmZot9J5uW2p9chtyLBwe3nCTY4HrDWuglLOZVOHu7dbLQiRjD/r3uOjB4lr5qduRwk2hblBXKBhpVDBpg==" }, "@carbon/layout": { - "version": "10.14.0", - "resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-10.14.0.tgz", - "integrity": "sha512-P9ueDQWpq3pF98iHGsCKL4fR/mP8Xhqe3qhBQfA5zgi7/RPy76lKGZR+SUoGX/QCC72vkA/zhJ4+7/I26LhMhQ==", - "dev": true + "version": "10.23.0", + "resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-10.23.0.tgz", + "integrity": "sha512-oO7okc7c7QPWpC0k6DeZFG219DWv4ioMYtgZ189rH81e8bjKIwc5uJh63uSZ9ITMI9+pvDu6hXaiHYIGsLza3w==" }, "@carbon/motion": { "version": "10.9.0", @@ -2101,12 +2100,19 @@ "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" }, "micromatch": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz", - "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", + "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==", "requires": { "braces": "^3.0.1", - "picomatch": "^2.0.5" + "picomatch": "^2.2.3" + }, + "dependencies": { + "picomatch": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz", + "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==" + } } }, "semver": { @@ -2154,9 +2160,9 @@ } }, "y18n": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz", - "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==" + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==" }, "yargs": { "version": "16.2.0", @@ -2180,25 +2186,30 @@ } }, "@carbon/themes": { - "version": "10.23.0", - "resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-10.23.0.tgz", - "integrity": "sha512-cw6p+gtbR0FBwsnDVGvGk80QbGw5Vqszs3D/7JLG8JpfLBaygOI6BWBfohdWrtrRMFYLdxBEz6GUvU+cTAIEnA==", - "dev": true, + "version": "10.32.0", + "resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-10.32.0.tgz", + "integrity": "sha512-7hcDOn0TapTQovOj57j14qNz66oRwbRpO7FRbOGjJc3t+YdfDFw7GDs0r4zBOGNKekXZQ69TBJm7nUUEP/OMaA==", "requires": { - "@carbon/colors": "^10.16.0", - "@carbon/layout": "^10.14.0", - "@carbon/type": "^10.17.0", + "@carbon/colors": "^10.23.0", + "@carbon/layout": "^10.23.0", + "@carbon/type": "^10.26.0", "color": "^3.1.2" + }, + "dependencies": { + "@carbon/colors": { + "version": "10.23.0", + "resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-10.23.0.tgz", + "integrity": "sha512-gR9q+qRxegb+axf9dJD3zlsP7zN5ZMnZsuAbaD1GGfOnZf7dbISkF0o0/8IYcAnw/ot3y7e25xxp6ekBFu1M6w==" + } } }, "@carbon/type": { - "version": "10.17.0", - "resolved": "https://registry.npmjs.org/@carbon/type/-/type-10.17.0.tgz", - "integrity": "sha512-fxutYwh6wNtcE0usO5d7ogoVLOTEOc34q4Xe1KT8IQVfDlnmdtLsdKvCxZrCk5KiAQZILCmXmyySiLdJfQcRJw==", - "dev": true, + "version": "10.26.0", + "resolved": "https://registry.npmjs.org/@carbon/type/-/type-10.26.0.tgz", + "integrity": "sha512-nZuybp7TEgV4vPApVa16O0kxnbfL8d0q3F9AYlf4m/rQicRSkY8hLukRpHcnOXVRjorNKkXuo+/KM0LtCBs5dQ==", "requires": { - "@carbon/import-once": "^10.3.0", - "@carbon/layout": "^10.14.0" + "@carbon/import-once": "^10.6.0", + "@carbon/layout": "^10.23.0" } }, "@dabh/diagnostics": { @@ -5738,9 +5749,9 @@ } }, "@sindresorhus/is": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.0.0.tgz", - "integrity": "sha512-FyD2meJpDPjyNQejSjvnhpgI/azsQkA4lGbuu5BQZfjvJ9cbRZXzeWL2HceCekW4lixO9JPesIIQkSoLjeJHNQ==" + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.0.1.tgz", + "integrity": "sha512-Qm9hBEBu18wt1PO2flE7LPb30BHMQt1eQgbV76YntdNk73XZGpn3izvGTYxbGgzXKgbCjiia0uxTd3aTNQrY/g==" }, "@sinonjs/commons": { "version": "1.8.1", @@ -14533,6 +14544,11 @@ "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==", "dev": true }, + "async": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz", + "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==" + }, "async-each": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz", @@ -15735,9 +15751,9 @@ } }, "carbon-components": { - "version": "10.31.0", - "resolved": "https://registry.npmjs.org/carbon-components/-/carbon-components-10.31.0.tgz", - "integrity": "sha512-gUXRky9rUHavqFLJJQf+Lzouk8GHsXJUjxRgTOUQ6vdBfA0ks6ugwptG8fiFGwCJJht/CW9/YsKb5w8N9a39sg==", + "version": "10.33.0", + "resolved": "https://registry.npmjs.org/carbon-components/-/carbon-components-10.33.0.tgz", + "integrity": "sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw==", "requires": { "@carbon/telemetry": "0.0.0-alpha.6", "flatpickr": "4.6.1", @@ -15746,14 +15762,15 @@ } }, "carbon-components-react": { - "version": "7.31.0", - "resolved": "https://registry.npmjs.org/carbon-components-react/-/carbon-components-react-7.31.0.tgz", - "integrity": "sha512-zVX/x6kmVkQERmye9j9WezefmHavE7zJPzqbzC2C12T6X3gud6y1hq2VGnMauXby/NOaR5aP9Hr51iAfSoi2nQ==", + "version": "7.33.0", + "resolved": "https://registry.npmjs.org/carbon-components-react/-/carbon-components-react-7.33.0.tgz", + "integrity": "sha512-qjZv91s3n9Nmd8Pn1T2NHVIWmpmtYZ+3mxC3s+uuey1DM4IIL7ZYPaUGIEyWDxHv/NiH61oFC+QQk23HgvPdnQ==", "requires": { - "@carbon/feature-flags": "^0.2.0", - "@carbon/icons-react": "^10.28.0", + "@carbon/feature-flags": "^0.3.0", + "@carbon/icons-react": "^10.30.0", "@carbon/telemetry": "0.0.0-alpha.6", - "classnames": "2.2.6", + "classnames": "2.3.1", + "copy-to-clipboard": "^3.3.1", "downshift": "5.2.1", "flatpickr": "4.6.9", "invariant": "^2.2.3", @@ -15768,19 +15785,25 @@ }, "dependencies": { "@carbon/icon-helpers": { - "version": "10.15.0", - "resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.15.0.tgz", - "integrity": "sha512-TpCvRARVI1XnyuhxM8BgHl3m+HRlUkkef32SC6NGhz2cF99/3EsWAzcPz98JNCojAYYXHjGiEfO6K61z53u+lg==" + "version": "10.16.0", + "resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.16.0.tgz", + "integrity": "sha512-cN1sM0xvlDEN1pYPDWoHcikGysCTnfA49/12H92dBkn14fpRmB87shIe3hzKlW6h4QP7CrnF0hB5SCkA2KC7Ng==" }, "@carbon/icons-react": { - "version": "10.28.0", - "resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-10.28.0.tgz", - "integrity": "sha512-y7BKGPCqF6xJx/VMU/KHJdXsGKk+cY9F9Mi18Si9oJlY14foV/Us9Nw2eJjgPNO6MRdcxb2H6lmakngGEznB1Q==", + "version": "10.30.0", + "resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-10.30.0.tgz", + "integrity": "sha512-bK2g9QYJ8k5qUHoYQxKWL+gnpRgFsLMn9ct1S7bIaamE10Gf47GbSbxMKg/QpNKJTf2dBXYkB/DTypHNK1JYQA==", "requires": { - "@carbon/icon-helpers": "^10.15.0", + "@carbon/icon-helpers": "^10.16.0", + "@carbon/telemetry": "0.0.0-alpha.6", "prop-types": "^15.7.2" } }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "flatpickr": { "version": "4.6.9", "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.9.tgz", @@ -16175,7 +16198,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz", "integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==", - "dev": true, "requires": { "color-convert": "^1.9.1", "color-string": "^1.5.4" @@ -16347,9 +16369,9 @@ } }, "compute-scroll-into-view": { - "version": "1.0.16", - "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.16.tgz", - "integrity": "sha512-a85LHKY81oQnikatZYA90pufpZ6sQx++BoCxOEMsjpZx+ZnaKGQnCyCehTRr/1p9GBIAHTjcU9k71kSYWloLiQ==" + "version": "1.0.17", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz", + "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==" }, "concat-map": { "version": "0.0.1", @@ -17161,7 +17183,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", - "dev": true, "requires": { "toggle-selection": "^1.0.6" } @@ -19802,9 +19823,9 @@ } }, "fecha": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.0.tgz", - "integrity": "sha512-aN3pcx/DSmtyoovUudctc8+6Hl4T+hI9GBBHLjA76jdZl7+b1sgh5g4k+u/GL3dTy1/pnYzKp69FpJ0OicE3Wg==" + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.1.tgz", + "integrity": "sha512-MMMQ0ludy/nBs1/o0zVOiKTpG7qMbonKUzjJgQFEuvq6INZ1OraKPRAWkBq5vlKLOUMpmNYG1JoN3oDPUQ9m3Q==" }, "fetch-mock": { "version": "9.10.7", @@ -29407,9 +29428,9 @@ } }, "resolve-alpn": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.0.0.tgz", - "integrity": "sha512-rTuiIEqFmGxne4IovivKSDzld2lWW9QCjqv80SYjPgf+gS35eaCAjaP54CCwGAwBtnCsvNLYtqxe1Nw+i6JEmA==" + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.1.2.tgz", + "integrity": "sha512-8OyfzhAtA32LVUsJSke3auIyINcwdh5l3cvYKdKO0nvsYSKuiLfTM5i78PJswFPT8y6cPW+L1v6/hE95chcpDA==" }, "resolve-cwd": { "version": "3.0.0", @@ -32030,8 +32051,7 @@ "toggle-selection": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", - "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=", - "dev": true + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" }, "toidentifier": { "version": "1.0.0", @@ -33869,11 +33889,6 @@ "winston-transport": "^4.4.0" }, "dependencies": { - "async": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz", - "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==" - }, "is-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz", diff --git a/package.json b/package.json index e11ec8ab1..918a3f851 100644 --- a/package.json +++ b/package.json @@ -29,12 +29,13 @@ }, "dependencies": { "@babel/runtime": "^7.12.5", - "@carbon/icons-react": "^10.28.0", + "@carbon/icons-react": "^10.30.0", + "@carbon/themes": "^10.32.0", "@tektoncd/dashboard-components": "file:./packages/components", "@tektoncd/dashboard-utils": "file:./packages/utils", "buffer": "^6.0.3", - "carbon-components": "^10.31.0", - "carbon-components-react": "^7.31.0", + "carbon-components": "^10.33.0", + "carbon-components-react": "^7.33.0", "carbon-icons": "^7.0.7", "classnames": "^2.2.6", "core-js": "^3.6.5", diff --git a/packages/components/package.json b/packages/components/package.json index 6bcf7d2c3..faaf9f370 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -29,9 +29,10 @@ "tlds": "^1.208.0" }, "peerDependencies": { - "@carbon/icons-react": "^10.28.0", - "carbon-components": "^10.31.0", - "carbon-components-react": "^7.31.0", + "@carbon/icons-react": "^10.30.0", + "@carbon/themes": "^10.31.0", + "carbon-components": "^10.33.0", + "carbon-components-react": "^7.33.0", "react": "^16.14.0 || ^17.0.1", "react-dom": "^16.14.0 || ^17.0.1", "react-intl": "^5.10.2", diff --git a/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.js b/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.js index adfefb056..f5adf0463 100644 --- a/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.js +++ b/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.js @@ -1,5 +1,5 @@ /* -Copyright 2020 The Tekton Authors +Copyright 2020-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,11 +11,10 @@ See the License for the specific language governing permissions and limitations under the License. */ /* istanbul ignore file */ + import PropTypes from 'prop-types'; import React from 'react'; -import './DataTableSkeleton.scss'; - const DataTableSkeleton = ({ className, columnCount, diff --git a/packages/components/src/components/DeleteModal/DeleteModal.js b/packages/components/src/components/DeleteModal/DeleteModal.js index c85dd2801..ecba4cabc 100644 --- a/packages/components/src/components/DeleteModal/DeleteModal.js +++ b/packages/components/src/components/DeleteModal/DeleteModal.js @@ -17,8 +17,6 @@ import { injectIntl } from 'react-intl'; import { Modal } from 'carbon-components-react'; import { Table } from '@tektoncd/dashboard-components'; -import './DeleteModal.scss'; - const DeleteModal = ({ onClose, onSubmit, diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.js b/packages/components/src/components/DetailsHeader/DetailsHeader.js index c34497f6f..ceefd7b6c 100644 --- a/packages/components/src/components/DetailsHeader/DetailsHeader.js +++ b/packages/components/src/components/DetailsHeader/DetailsHeader.js @@ -18,8 +18,6 @@ import { getStatus } from '@tektoncd/dashboard-utils'; import { FormattedDuration, StatusIcon } from '..'; -import './DetailsHeader.scss'; - class DetailsHeader extends Component { getDuration() { const { intl, stepStatus, taskRun } = this.props; diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.scss b/packages/components/src/components/DetailsHeader/DetailsHeader.scss index 799732606..a3cdb1aaf 100644 --- a/packages/components/src/components/DetailsHeader/DetailsHeader.scss +++ b/packages/components/src/components/DetailsHeader/DetailsHeader.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~carbon-components/scss/globals/scss/vars'; - header.tkn--step-details-header { padding: 1rem 1rem 0; diff --git a/packages/components/src/components/Graph/Graph.scss b/packages/components/src/components/Graph/Graph.scss index 00fa32b58..6a93d89ca 100644 --- a/packages/components/src/components/Graph/Graph.scss +++ b/packages/components/src/components/Graph/Graph.scss @@ -1,5 +1,5 @@ /* -Copyright 2019 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,7 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ /* stylelint-disable -- keep existing colours until we revisit the Graph feature */ -@import '~carbon-components/scss/globals/scss/vars'; .graph { #edge-arrow path { diff --git a/packages/components/src/components/Graph/Node.js b/packages/components/src/components/Graph/Node.js index 62efc5143..a63c930ae 100644 --- a/packages/components/src/components/Graph/Node.js +++ b/packages/components/src/components/Graph/Node.js @@ -1,5 +1,5 @@ /* -Copyright 2019 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,6 +11,7 @@ See the License for the specific language governing permissions and limitations under the License. */ /* istanbul ignore file */ + import React, { Component } from 'react'; import classNames from 'classnames'; @@ -24,7 +25,6 @@ import { import Graph from './Graph'; // eslint-disable-line import/no-cycle import InlineLoading from './InlineLoading'; -import './Graph.scss'; export default class Node extends Component { handleClick = () => { diff --git a/packages/components/src/components/Graph/ZoomablePipelineGraph.js b/packages/components/src/components/Graph/ZoomablePipelineGraph.js index dcf9c064e..b6b0bd02f 100644 --- a/packages/components/src/components/Graph/ZoomablePipelineGraph.js +++ b/packages/components/src/components/Graph/ZoomablePipelineGraph.js @@ -1,5 +1,5 @@ /* -Copyright 2019 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,6 +11,7 @@ See the License for the specific language governing permissions and limitations under the License. */ /* istanbul ignore file */ + import React from 'react'; import { injectIntl } from 'react-intl'; @@ -25,8 +26,6 @@ import { import PanZoom from './PanZoom'; import PipelineGraph from './PipelineGraph'; -import './ZoomablePipelineGraph.scss'; - const width = 300; const height = 600; diff --git a/packages/components/src/components/Graph/ZoomablePipelineGraph.scss b/packages/components/src/components/Graph/ZoomablePipelineGraph.scss index 7b43fcc70..782096395 100644 --- a/packages/components/src/components/Graph/ZoomablePipelineGraph.scss +++ b/packages/components/src/components/Graph/ZoomablePipelineGraph.scss @@ -1,5 +1,5 @@ /* -Copyright 2019 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~@tektoncd/dashboard-components/dist/scss/vars'; - .pipeline-graph-zoom-container { display: flex; flex-direction: column; diff --git a/packages/components/src/components/Header/Header.js b/packages/components/src/components/Header/Header.js index 4809e5c30..a8d012a24 100644 --- a/packages/components/src/components/Header/Header.js +++ b/packages/components/src/components/Header/Header.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -22,8 +22,6 @@ import { SkipToContent } from 'carbon-components-react'; -import './Header.scss'; - function Header({ intl, isSideNavExpanded, diff --git a/packages/components/src/components/KeyValueList/KeyValueList.js b/packages/components/src/components/KeyValueList/KeyValueList.js index 736a3806f..f795da3ac 100644 --- a/packages/components/src/components/KeyValueList/KeyValueList.js +++ b/packages/components/src/components/KeyValueList/KeyValueList.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -16,8 +16,6 @@ import { injectIntl } from 'react-intl'; import { Button, TextInput } from 'carbon-components-react'; import { AddAlt24 as Add, SubtractAlt16 as Remove } from '@carbon/icons-react'; -import './KeyValueList.scss'; - const KeyValueList = props => { const { intl, diff --git a/packages/components/src/components/KeyValueList/KeyValueList.scss b/packages/components/src/components/KeyValueList/KeyValueList.scss index 7df29f040..0af901e9f 100644 --- a/packages/components/src/components/KeyValueList/KeyValueList.scss +++ b/packages/components/src/components/KeyValueList/KeyValueList.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~carbon-components/scss/globals/scss/vars'; - .tkn--keyvalues { margin-bottom: $spacing-06; diff --git a/packages/components/src/components/KeyValueList/KeyValueList.test.js b/packages/components/src/components/KeyValueList/KeyValueList.test.js index 4eeec008d..baafb031e 100644 --- a/packages/components/src/components/KeyValueList/KeyValueList.test.js +++ b/packages/components/src/components/KeyValueList/KeyValueList.test.js @@ -146,9 +146,9 @@ it('KeyValueList add and remove buttons work', () => { fireEvent.click(addButton); fireEvent.click(addButton); - fireEvent.click(getAllByText(/Remove/i)[0]); - fireEvent.click(getAllByText(/Remove/i)[0]); - fireEvent.click(getAllByText(/Remove/i)[0]); + fireEvent.click(getAllByText(/Remove/i)[0].parentNode); + fireEvent.click(getAllByText(/Remove/i)[0].parentNode); + fireEvent.click(getAllByText(/Remove/i)[0].parentNode); expect(props.onAdd).toHaveBeenCalledTimes(5); expect(props.onRemove).toHaveBeenCalledTimes(3); diff --git a/packages/components/src/components/LabelFilter/LabelFilter.js b/packages/components/src/components/LabelFilter/LabelFilter.js index 80bb2656e..9786f346a 100644 --- a/packages/components/src/components/LabelFilter/LabelFilter.js +++ b/packages/components/src/components/LabelFilter/LabelFilter.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -22,8 +22,6 @@ import { Tag } from 'carbon-components-react'; -import './LabelFilter.scss'; - function arrayUnique(arr) { return arr.filter((item, index) => arr.indexOf(item) >= index); } diff --git a/packages/components/src/components/LabelFilter/LabelFilter.scss b/packages/components/src/components/LabelFilter/LabelFilter.scss index 255d9bebc..dbf14b461 100644 --- a/packages/components/src/components/LabelFilter/LabelFilter.scss +++ b/packages/components/src/components/LabelFilter/LabelFilter.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~carbon-components/scss/globals/scss/vars'; - .tkn--label-filter { form { display: flex; diff --git a/packages/components/src/components/LoadingShell/LoadingShell.js b/packages/components/src/components/LoadingShell/LoadingShell.js index ca37e5f75..5654feda6 100644 --- a/packages/components/src/components/LoadingShell/LoadingShell.js +++ b/packages/components/src/components/LoadingShell/LoadingShell.js @@ -1,5 +1,5 @@ /* -Copyright 2020 The Tekton Authors +Copyright 2020-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -25,8 +25,6 @@ import { } from 'carbon-components-react'; import { Header } from '..'; -import './LoadingShell.scss'; - const SkeletonText = ({ heading, paragraph }) => ( ); diff --git a/packages/components/src/components/LoadingShell/LoadingShell.scss b/packages/components/src/components/LoadingShell/LoadingShell.scss index e404aa899..a1e650828 100644 --- a/packages/components/src/components/LoadingShell/LoadingShell.scss +++ b/packages/components/src/components/LoadingShell/LoadingShell.scss @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '../../scss/vars'; - // TODO: move SideNav.scss to components and import here for consistency .tkn--config-loading-shell { diff --git a/packages/components/src/components/Log/Log.js b/packages/components/src/components/Log/Log.js index 29d8677da..8de747fba 100644 --- a/packages/components/src/components/Log/Log.js +++ b/packages/components/src/components/Log/Log.js @@ -18,8 +18,6 @@ import { injectIntl } from 'react-intl'; import Ansi from '../LogFormat'; -import './Log.scss'; - const LogLine = ({ data, index, style }) => (
{`${data[index]}\n`} diff --git a/packages/components/src/components/Log/Log.scss b/packages/components/src/components/Log/Log.scss index 9b2b1c113..362fec393 100644 --- a/packages/components/src/components/Log/Log.scss +++ b/packages/components/src/components/Log/Log.scss @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~@tektoncd/dashboard-components/dist/scss/vars'; - pre.tkn--log { position: relative; padding: 2rem 1.6rem 1.3rem 1.6rem; diff --git a/packages/components/src/components/LogFormat/LogFormat.js b/packages/components/src/components/LogFormat/LogFormat.js index 29d875bc4..68af266e6 100644 --- a/packages/components/src/components/LogFormat/LogFormat.js +++ b/packages/components/src/components/LogFormat/LogFormat.js @@ -1,5 +1,5 @@ /* -Copyright 2020 The Tekton Authors +Copyright 2020-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -10,6 +10,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ + import React from 'react'; import PropTypes from 'prop-types'; import tlds from 'tlds'; @@ -17,8 +18,6 @@ import LinkifyIt from 'linkify-it'; import classNames from 'classnames'; import { colors } from './defaults'; -import './LogFormat.scss'; - const linkifyIt = LinkifyIt().tlds(tlds); // eslint-disable-next-line no-control-regex diff --git a/packages/components/src/components/LogoutButton/LogoutButton.js b/packages/components/src/components/LogoutButton/LogoutButton.js index 83fca3b84..1db3ead6d 100644 --- a/packages/components/src/components/LogoutButton/LogoutButton.js +++ b/packages/components/src/components/LogoutButton/LogoutButton.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -15,7 +15,6 @@ import { Logout20 as LogoutIcon } from '@carbon/icons-react'; import { HeaderGlobalAction } from 'carbon-components-react'; import { injectIntl } from 'react-intl'; import React, { Component } from 'react'; -import './LogoutButton.scss'; export class LogoutButton extends Component { state = { diff --git a/packages/components/src/components/Param/index.js b/packages/components/src/components/Param/index.js index 600326bee..32e210092 100644 --- a/packages/components/src/components/Param/index.js +++ b/packages/components/src/components/Param/index.js @@ -1,5 +1,5 @@ /* -Copyright 2020 The Tekton Authors +Copyright 2020-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,12 +11,11 @@ See the License for the specific language governing permissions and limitations under the License. */ /* istanbul ignore file */ + import React from 'react'; import ViewYAML from '../ViewYAML'; -import './Param.scss'; - export default function Param({ children }) { if (!children) { return null; diff --git a/packages/components/src/components/PipelineRun/PipelineRun.js b/packages/components/src/components/PipelineRun/PipelineRun.js index 0f5c66f0b..35d47ee85 100644 --- a/packages/components/src/components/PipelineRun/PipelineRun.js +++ b/packages/components/src/components/PipelineRun/PipelineRun.js @@ -32,8 +32,6 @@ import { TaskTree } from '..'; -import '../../scss/Run.scss'; - export /* istanbul ignore next */ class PipelineRunContainer extends Component { state = { isLogsMaximized: false diff --git a/packages/components/src/components/PipelineRuns/PipelineRuns.js b/packages/components/src/components/PipelineRuns/PipelineRuns.js index ded1c9711..0ca273f6b 100644 --- a/packages/components/src/components/PipelineRuns/PipelineRuns.js +++ b/packages/components/src/components/PipelineRuns/PipelineRuns.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -20,8 +20,6 @@ import { Pending24 as DefaultIcon } from '@carbon/icons-react'; import { FormattedDate, FormattedDuration, RunDropdown } from '..'; -import './PipelineRuns.scss'; - const PipelineRuns = ({ batchActionButtons = [], createPipelineRunURL = urls.pipelineRuns.byName, diff --git a/packages/components/src/components/Rerun/Rerun.js b/packages/components/src/components/Rerun/Rerun.js index c6d1e9a85..41b7d138f 100644 --- a/packages/components/src/components/Rerun/Rerun.js +++ b/packages/components/src/components/Rerun/Rerun.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -15,7 +15,6 @@ import React, { Component } from 'react'; import { injectIntl } from 'react-intl'; import { Button } from 'carbon-components-react'; import { Restart32 as Restart } from '@carbon/icons-react'; -import './Rerun.scss'; class Rerun extends Component { handleRerun = event => { diff --git a/packages/components/src/components/RunHeader/RunHeader.js b/packages/components/src/components/RunHeader/RunHeader.js index 1cd7016ab..07926894f 100644 --- a/packages/components/src/components/RunHeader/RunHeader.js +++ b/packages/components/src/components/RunHeader/RunHeader.js @@ -18,8 +18,6 @@ import { copyToClipboard } from '@tektoncd/dashboard-utils'; import { FormattedDate } from '..'; -import './RunHeader.scss'; - class RunHeader extends Component { /* istanbul ignore next */ copyStatusMessage = () => { diff --git a/packages/components/src/components/RunHeader/RunHeader.scss b/packages/components/src/components/RunHeader/RunHeader.scss index 2c938bb85..ce85141ab 100644 --- a/packages/components/src/components/RunHeader/RunHeader.scss +++ b/packages/components/src/components/RunHeader/RunHeader.scss @@ -16,7 +16,7 @@ limitations under the License. header.tkn--pipeline-run-header { @include type-style('body-short-01'); line-height: 1; - background: white; + background: $ui-01; margin-bottom: 2em; padding: .4em 0 .4em 1.5em; diff --git a/packages/components/src/components/Spinner/Spinner.js b/packages/components/src/components/Spinner/Spinner.js index b7302f87f..697db775c 100644 --- a/packages/components/src/components/Spinner/Spinner.js +++ b/packages/components/src/components/Spinner/Spinner.js @@ -15,8 +15,6 @@ import React from 'react'; import { Renew20 as SpinnerIcon } from '@carbon/icons-react'; -import './Spinner.scss'; - export default function Spinner({ children, className }) { return ( diff --git a/packages/components/src/components/StatusIcon/StatusIcon.js b/packages/components/src/components/StatusIcon/StatusIcon.js index 64a42556c..046d34073 100644 --- a/packages/components/src/components/StatusIcon/StatusIcon.js +++ b/packages/components/src/components/StatusIcon/StatusIcon.js @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import './StatusIcon.scss'; - import React from 'react'; import classNames from 'classnames'; import { diff --git a/packages/components/src/components/StatusIcon/StatusIcon.scss b/packages/components/src/components/StatusIcon/StatusIcon.scss index 83ecb3920..f47e92bf0 100644 --- a/packages/components/src/components/StatusIcon/StatusIcon.scss +++ b/packages/components/src/components/StatusIcon/StatusIcon.scss @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~carbon-components/scss/globals/scss/vars'; - .tkn--status-icon { fill: $ui-04; width: 20px; diff --git a/packages/components/src/components/Step/Step.js b/packages/components/src/components/Step/Step.js index f7f0edf3a..e01e88df4 100644 --- a/packages/components/src/components/Step/Step.js +++ b/packages/components/src/components/Step/Step.js @@ -17,8 +17,6 @@ import { Pending20 as DefaultIcon } from '@carbon/icons-react'; import StatusIcon from '../StatusIcon'; -import './Step.scss'; - class Step extends Component { handleClick = event => { event.preventDefault(); diff --git a/packages/components/src/components/Step/Step.scss b/packages/components/src/components/Step/Step.scss index 6c7dc7790..9ac9058e2 100644 --- a/packages/components/src/components/Step/Step.scss +++ b/packages/components/src/components/Step/Step.scss @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~@tektoncd/dashboard-components/dist/scss/vars'; - .tkn--step { list-style-type: none; @@ -41,7 +39,7 @@ limitations under the License. font-size: 0.78rem; letter-spacing: 0.02rem; text-decoration: none; - border-left: 3px solid white; + border-left: 3px solid $ui-01; } .tkn--status-icon { diff --git a/packages/components/src/components/StepDetails/StepDetails.js b/packages/components/src/components/StepDetails/StepDetails.js index 1c976f922..34d46991c 100644 --- a/packages/components/src/components/StepDetails/StepDetails.js +++ b/packages/components/src/components/StepDetails/StepDetails.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -18,8 +18,6 @@ import { getStatus, getStepStatusReason } from '@tektoncd/dashboard-utils'; import { DetailsHeader, StepDefinition, StepStatus, Tab, Tabs } from '..'; -import './StepDetails.scss'; - const tabs = ['logs', 'status', 'details']; const StepDetails = props => { diff --git a/packages/components/src/components/Table/Table.js b/packages/components/src/components/Table/Table.js index 9f426c892..1466fd8ce 100644 --- a/packages/components/src/components/Table/Table.js +++ b/packages/components/src/components/Table/Table.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -30,8 +30,6 @@ import { ALL_NAMESPACES } from '@tektoncd/dashboard-utils'; import { DataTableSkeleton } from '..'; -import './Table.scss'; - const { TableContainer, Table: CarbonTable, diff --git a/packages/components/src/components/Table/Table.scss b/packages/components/src/components/Table/Table.scss index 000af673f..dbf043326 100644 --- a/packages/components/src/components/Table/Table.scss +++ b/packages/components/src/components/Table/Table.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~@tektoncd/dashboard-components/dist/scss/vars'; - .tkn--table { // add space between adjacent tables ~ .tkn--table { diff --git a/packages/components/src/components/Task/Task.js b/packages/components/src/components/Task/Task.js index 9747aebc9..c18583572 100644 --- a/packages/components/src/components/Task/Task.js +++ b/packages/components/src/components/Task/Task.js @@ -22,8 +22,6 @@ import { updateUnexecutedSteps } from '@tektoncd/dashboard-utils'; -import './Task.scss'; - class Task extends Component { state = { selectedStepId: null }; diff --git a/packages/components/src/components/Task/Task.scss b/packages/components/src/components/Task/Task.scss index cccffcafb..2f67484cb 100644 --- a/packages/components/src/components/Task/Task.scss +++ b/packages/components/src/components/Task/Task.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '../../scss/vars'; - .tkn--task { list-style-type: none; diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.js index 169b7b71e..8de89b392 100644 --- a/packages/components/src/components/TaskRunDetails/TaskRunDetails.js +++ b/packages/components/src/components/TaskRunDetails/TaskRunDetails.js @@ -18,8 +18,6 @@ import { getParams } from '@tektoncd/dashboard-utils'; import { DetailsHeader, Param, Tab, Table, Tabs, ViewYAML } from '..'; -import './TaskRunDetails.scss'; - function getDescriptions(array = []) { return array.reduce((accumulator, { name, description }) => { accumulator[name] = description; diff --git a/packages/components/src/components/TaskTree/TaskTree.js b/packages/components/src/components/TaskTree/TaskTree.js index 88089eaae..275911442 100644 --- a/packages/components/src/components/TaskTree/TaskTree.js +++ b/packages/components/src/components/TaskTree/TaskTree.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -15,8 +15,6 @@ import React from 'react'; import { getStatus, labels as labelConstants } from '@tektoncd/dashboard-utils'; import Task from '../Task'; -import './TaskTree.scss'; - const TaskTree = ({ onSelect, selectedStepId, selectedTaskId, taskRuns }) => { if (!taskRuns) { return
; diff --git a/packages/components/src/components/TaskTree/TaskTree.scss b/packages/components/src/components/TaskTree/TaskTree.scss index 6c749545e..993e8b0a0 100644 --- a/packages/components/src/components/TaskTree/TaskTree.scss +++ b/packages/components/src/components/TaskTree/TaskTree.scss @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~carbon-components/scss/globals/scss/vars'; - .tkn--task-tree { width: 21%; min-width: 15rem; diff --git a/packages/components/src/components/Trigger/Trigger.js b/packages/components/src/components/Trigger/Trigger.js index bb7989263..0c05126c9 100644 --- a/packages/components/src/components/Trigger/Trigger.js +++ b/packages/components/src/components/Trigger/Trigger.js @@ -23,8 +23,6 @@ import { import { urls } from '@tektoncd/dashboard-utils'; import { Table, ViewYAML } from '@tektoncd/dashboard-components'; -import './Trigger.scss'; - const Trigger = ({ intl, namespace, trigger }) => { const tableHeaders = [ { diff --git a/packages/components/src/components/Trigger/Trigger.scss b/packages/components/src/components/Trigger/Trigger.scss index 9bd366e90..c8ead264f 100644 --- a/packages/components/src/components/Trigger/Trigger.scss +++ b/packages/components/src/components/Trigger/Trigger.scss @@ -1,5 +1,5 @@ /* -Copyright 2019 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~carbon-components/scss/globals/scss/vars'; - .tkn--trigger-interceptors { margin-top: $spacing-05; diff --git a/packages/components/src/components/ViewYAML/ViewYAML.js b/packages/components/src/components/ViewYAML/ViewYAML.js index d65114291..e0118a630 100644 --- a/packages/components/src/components/ViewYAML/ViewYAML.js +++ b/packages/components/src/components/ViewYAML/ViewYAML.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -16,8 +16,6 @@ import PropTypes from 'prop-types'; import jsYaml from 'js-yaml'; import classNames from 'classnames'; -import './ViewYAML.scss'; - const ViewYAML = props => { const { className, dark, resource } = props; diff --git a/packages/components/src/components/ViewYAML/ViewYAML.scss b/packages/components/src/components/ViewYAML/ViewYAML.scss index 92eb42cf5..4a73b57d6 100644 --- a/packages/components/src/components/ViewYAML/ViewYAML.scss +++ b/packages/components/src/components/ViewYAML/ViewYAML.scss @@ -1,5 +1,5 @@ /* -Copyright 2020 The Tekton Authors +Copyright 2020-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~@tektoncd/dashboard-components/dist/scss/vars'; - .bx--snippet--multi.tkn--view-yaml--dark { background-color: $gray-90; // TODO: $inverse-02 - see Log.scss color: $gray-10; // $inverse-01 diff --git a/packages/components/src/scss/Run.scss b/packages/components/src/scss/Run.scss index 4ce6dc516..a79a7e426 100644 --- a/packages/components/src/scss/Run.scss +++ b/packages/components/src/scss/Run.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import './vars'; - .tkn--tasks { display: flex; flex-wrap: nowrap; diff --git a/packages/components/src/scss/_vars.scss b/packages/components/src/scss/_vars.scss deleted file mode 100644 index 78e484758..000000000 --- a/packages/components/src/scss/_vars.scss +++ /dev/null @@ -1,18 +0,0 @@ -/* -Copyright 2020 The Tekton Authors -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -@import '~carbon-components/scss/globals/scss/theme'; - -$carbon--theme: $carbon--theme--g10; - -@import '~carbon-components/scss/globals/scss/vars'; diff --git a/src/containers/About/About.js b/src/containers/About/About.js index 628b4fb53..5ec5eb421 100644 --- a/src/containers/About/About.js +++ b/src/containers/About/About.js @@ -32,8 +32,6 @@ import { isTriggersInstalled as selectIsTriggersInstalled } from '../../reducers'; -import './About.scss'; - /* istanbul ignore next */ export function About({ dashboardNamespace, diff --git a/src/containers/About/About.scss b/src/containers/About/About.scss index e183195d1..49b9a352c 100644 --- a/src/containers/About/About.scss +++ b/src/containers/About/About.scss @@ -1,5 +1,5 @@ /* -Copyright 2020 The Tekton Authors +Copyright 2020-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~carbon-components/scss/globals/scss/vars'; - .tkn--about { .tkn--about--content { display: flex; diff --git a/src/containers/App/App.js b/src/containers/App/App.js index 238060c9e..2a35f3fe5 100644 --- a/src/containers/App/App.js +++ b/src/containers/App/App.js @@ -90,9 +90,10 @@ import { isWebSocketConnected as selectIsWebSocketConnected } from '../../reducers'; -import '../../scss/App.scss'; import config from '../../../config_frontend/config.json'; +import '../../scss/App.scss'; + const { default: defaultLocale, supported: supportedLocales } = config.locales; /* istanbul ignore next */ diff --git a/src/containers/ClusterTasks/ClusterTasks.js b/src/containers/ClusterTasks/ClusterTasks.js index 2884f2057..ca82c36a6 100644 --- a/src/containers/ClusterTasks/ClusterTasks.js +++ b/src/containers/ClusterTasks/ClusterTasks.js @@ -44,8 +44,6 @@ import { isReadOnly as selectIsReadOnly } from '../../reducers'; -import '../../scss/Definitions.scss'; - /* istanbul ignore next */ function ClusterTasksContainer(props) { const { diff --git a/src/containers/ClusterTriggerBinding/ClusterTriggerBinding.js b/src/containers/ClusterTriggerBinding/ClusterTriggerBinding.js index c2fe9c621..9e4171005 100644 --- a/src/containers/ClusterTriggerBinding/ClusterTriggerBinding.js +++ b/src/containers/ClusterTriggerBinding/ClusterTriggerBinding.js @@ -26,8 +26,6 @@ import { import { getViewChangeHandler } from '../../utils'; import { fetchClusterTriggerBinding as fetchClusterTriggerBindingActionCreator } from '../../actions/clusterTriggerBindings'; -import '../../scss/Triggers.scss'; - export /* istanbul ignore next */ function ClusterTriggerBindingContainer( props ) { diff --git a/src/containers/CreatePipelineResource/CreatePipelineResource.js b/src/containers/CreatePipelineResource/CreatePipelineResource.js index 5c17da446..bafb4e99e 100644 --- a/src/containers/CreatePipelineResource/CreatePipelineResource.js +++ b/src/containers/CreatePipelineResource/CreatePipelineResource.js @@ -27,8 +27,6 @@ import UniversalFields from './UniversalFields'; import { createPipelineResource } from '../../api'; import { getSelectedNamespace } from '../../reducers'; -import '../../scss/Create.scss'; - /* istanbul ignore next */ function validateInputs(value, id) { const trimmed = value.trim(); diff --git a/src/containers/CreatePipelineRun/CreatePipelineRun.js b/src/containers/CreatePipelineRun/CreatePipelineRun.js index 2bfeba777..a56679736 100644 --- a/src/containers/CreatePipelineRun/CreatePipelineRun.js +++ b/src/containers/CreatePipelineRun/CreatePipelineRun.js @@ -40,8 +40,6 @@ import { createPipelineRun } from '../../api'; import { getStore } from '../../store/index'; import { isValidLabel } from '../../utils'; -import '../../scss/Create.scss'; - const initialState = { creating: false, invalidLabels: {}, diff --git a/src/containers/CreatePipelineRun/CreatePipelineRun.test.js b/src/containers/CreatePipelineRun/CreatePipelineRun.test.js index 390445b25..1b3dd6849 100644 --- a/src/containers/CreatePipelineRun/CreatePipelineRun.test.js +++ b/src/containers/CreatePipelineRun/CreatePipelineRun.test.js @@ -208,12 +208,12 @@ const selectPipeline1 = async ({ getByPlaceholderText, getByText }) => { fireEvent.click(pipeline1); }; -const fillPipeline1Resources = ({ getAllByPlaceholderText, getByTitle }) => { +const fillPipeline1Resources = ({ getAllByPlaceholderText, getByText }) => { const resourceDropdowns = getAllByPlaceholderText(/select pipelineresource/i); fireEvent.click(resourceDropdowns[0]); - fireEvent.click(getByTitle(/pipeline-resource-1/i)); + fireEvent.click(getByText(/pipeline-resource-1/i)); fireEvent.click(resourceDropdowns[1]); - fireEvent.click(getByTitle(/pipeline-resource-2/i)); + fireEvent.click(getByText(/pipeline-resource-2/i)); }; const fillPipeline1Params = getByPlaceholderText => { @@ -229,7 +229,6 @@ const selectPipeline1AndFillSpec = async ({ getAllByPlaceholderText, getByPlaceholderText, getByText, - getByTitle, queryByText, queryByDisplayValue }) => { @@ -237,7 +236,7 @@ const selectPipeline1AndFillSpec = async ({ await selectPipeline1({ getByPlaceholderText, getByText }); testPipelineSpec('id-pipeline-1', queryByText, queryByDisplayValue); // Fill pipeline spec - fillPipeline1Resources({ getAllByPlaceholderText, getByTitle }); + fillPipeline1Resources({ getAllByPlaceholderText, getByText }); fillPipeline1Params(getByPlaceholderText); }; @@ -278,7 +277,6 @@ describe('CreatePipelineRun', () => { getAllByPlaceholderText, getByPlaceholderText, getByText, - getByTitle, queryByText, queryByDisplayValue }); @@ -304,7 +302,6 @@ describe('CreatePipelineRun', () => { getAllByText, getByPlaceholderText, getByText, - getByTitle, queryByText, queryByDisplayValue } = renderWithIntl( @@ -317,7 +314,6 @@ describe('CreatePipelineRun', () => { getAllByPlaceholderText, getByPlaceholderText, getByText, - getByTitle, queryByText, queryByDisplayValue }); @@ -337,7 +333,7 @@ describe('CreatePipelineRun', () => { it('renders empty, dropdowns disabled when no namespace selected', async () => { const { getByPlaceholderText, - getByTitle, + getByText, queryByText, queryAllByText, queryByPlaceholderText @@ -369,7 +365,7 @@ describe('CreatePipelineRun', () => { fireEvent.click( await waitFor(() => getByPlaceholderText(/select namespace/i)) ); - fireEvent.click(await waitFor(() => getByTitle(/namespace-1/i))); + fireEvent.click(await waitFor(() => getByText(/namespace-1/i))); await waitFor(() => expect(document.querySelector('[label="Select Pipeline"]').disabled).toBe( false @@ -389,7 +385,6 @@ describe('CreatePipelineRun', () => { getAllByPlaceholderText, getByPlaceholderText, getByText, - getByTitle, queryByDisplayValue, queryByText } = renderWithIntl( @@ -405,7 +400,7 @@ describe('CreatePipelineRun', () => { // Fill pipeline spec fillPipeline1Resources({ getAllByPlaceholderText, - getByTitle + getByText }); fillPipeline1Params(getByPlaceholderText); expect(queryByDisplayValue(/pipeline-resource-1/i)).toBeTruthy(); @@ -415,7 +410,7 @@ describe('CreatePipelineRun', () => { // Select pipeline-2 and verify spec details are displayed fireEvent.click(queryByDisplayValue(/pipeline-1/i)); - fireEvent.click(await waitFor(() => getByTitle(/pipeline-2/i))); + fireEvent.click(await waitFor(() => getByText(/pipeline-2/i))); testPipelineSpec('id-pipeline-2', queryByText, queryByDisplayValue); }); @@ -464,7 +459,7 @@ describe('CreatePipelineRun', () => { }); expect(queryByDisplayValue(/foo/i)).toBeTruthy(); expect(queryByDisplayValue(/bar/i)).toBeTruthy(); - fireEvent.click(getByText(/Remove/i)); + fireEvent.click(getByText(/Remove/i).parentNode); expect(queryByDisplayValue(/foo/i)).toBeFalsy(); expect(queryByDisplayValue(/bar/i)).toBeFalsy(); }); @@ -474,7 +469,7 @@ describe('CreatePipelineRun', () => { jest.spyOn(store, 'getStore').mockImplementation(() => mockTestStore); const { getByPlaceholderText, - getByTitle, + getByText, getByDisplayValue } = renderWithIntl( @@ -483,18 +478,18 @@ describe('CreatePipelineRun', () => { ); fireEvent.click(getByPlaceholderText(/select pipeline/i)); - fireEvent.click(await waitFor(() => getByTitle(/pipeline-1/i))); + fireEvent.click(await waitFor(() => getByText(/pipeline-1/i))); fireEvent.click(getByPlaceholderText(/select serviceaccount/i)); - fireEvent.click(await waitFor(() => getByTitle(/service-account-1/i))); + fireEvent.click(await waitFor(() => getByText(/service-account-1/i))); // Change selected namespace to the same namespace (expect no change) fireEvent.click(getByDisplayValue(/namespace-1/i)); - fireEvent.click(await waitFor(() => getByTitle(/namespace-1/i))); + fireEvent.click(await waitFor(() => getByText(/namespace-1/i))); expect(getByDisplayValue(/pipeline-1/i)).toBeTruthy(); expect(getByDisplayValue(/service-account-1/i)).toBeTruthy(); // Change selected namespace fireEvent.click(getByDisplayValue(/namespace-1/i)); - fireEvent.click(await waitFor(() => getByTitle(/namespace-2/i))); + fireEvent.click(await waitFor(() => getByText(/namespace-2/i))); // Verify that Pipeline and ServiceAccount value have reset expect(getByPlaceholderText(/select pipeline/i)).toBeTruthy(); @@ -509,7 +504,6 @@ describe('CreatePipelineRun', () => { getAllByText, getByPlaceholderText, getByText, - getByTitle, queryByText, queryByDisplayValue } = renderWithIntl( @@ -523,11 +517,11 @@ describe('CreatePipelineRun', () => { await selectPipeline1({ getByPlaceholderText, getByText }); testPipelineSpec('id-pipeline-1', queryByText, queryByDisplayValue); // Fill pipeline spec - fillPipeline1Resources({ getAllByPlaceholderText, getByTitle }); + fillPipeline1Resources({ getAllByPlaceholderText, getByText }); fillPipeline1Params(getByPlaceholderText); // Fill ServiceAccount fireEvent.click(getByPlaceholderText(/select serviceaccount/i)); - fireEvent.click(await waitFor(() => getByTitle(/service-account-1/i))); + fireEvent.click(await waitFor(() => getByText(/service-account-1/i))); // Fill timeout fireEvent.change(getByPlaceholderText(/60/i), { target: { value: '120' } @@ -589,7 +583,6 @@ describe('CreatePipelineRun', () => { getAllByText, getByPlaceholderText, getByText, - getByTitle, queryAllByText, queryByText } = renderWithIntl( @@ -604,7 +597,7 @@ describe('CreatePipelineRun', () => { expect(queryByText(pipelineValidationErrorRegExp)).toBeTruthy(); // Fix validation error fireEvent.click(getByPlaceholderText(/select namespace/i)); - fireEvent.click(await waitFor(() => getByTitle(/namespace-1/i))); + fireEvent.click(await waitFor(() => getByText(/namespace-1/i))); await selectPipeline1({ getByPlaceholderText, getByText }); expect(queryByText(pipelineValidationErrorRegExp)).toBeFalsy(); @@ -616,7 +609,7 @@ describe('CreatePipelineRun', () => { ).toBeTruthy(); expect(queryByText(paramsValidationErrorRegExp)).toBeTruthy(); // Fix validation error - fillPipeline1Resources({ getAllByPlaceholderText, getByTitle }); + fillPipeline1Resources({ getAllByPlaceholderText, getByText }); expect( queryAllByText(pipelineResourceValidationErrorRegExp)[0] ).toBeFalsy(); diff --git a/src/containers/CreateTaskRun/CreateTaskRun.js b/src/containers/CreateTaskRun/CreateTaskRun.js index 3883d7c83..ffdc4c13d 100644 --- a/src/containers/CreateTaskRun/CreateTaskRun.js +++ b/src/containers/CreateTaskRun/CreateTaskRun.js @@ -43,8 +43,6 @@ import { createTaskRun } from '../../api'; import { getStore } from '../../store/index'; import { isValidLabel } from '../../utils'; -import '../../scss/Create.scss'; - const clusterTaskItem = { id: 'clustertask', text: 'ClusterTask' }; const taskItem = { id: 'task', text: 'Task' }; const parseTaskInfo = (taskRef, kind, namespace) => { diff --git a/src/containers/CreateTaskRun/CreateTaskRun.test.js b/src/containers/CreateTaskRun/CreateTaskRun.test.js index 368bbd211..04c27126b 100644 --- a/src/containers/CreateTaskRun/CreateTaskRun.test.js +++ b/src/containers/CreateTaskRun/CreateTaskRun.test.js @@ -245,14 +245,14 @@ const selectTask1 = async ({ getByPlaceholderText, getByText }) => { fireEvent.click(task1); }; -const fillTask1Resources = ({ getAllByPlaceholderText, getByTitle }) => { +const fillTask1Resources = ({ getAllByPlaceholderText, getByText }) => { const resourceDropdowns = getAllByPlaceholderText(/select pipelineresource/i); fireEvent.click(resourceDropdowns[0]); - fireEvent.click(getByTitle(/pipeline-resource-1/i)); + fireEvent.click(getByText(/pipeline-resource-1/i)); fireEvent.click(resourceDropdowns[1]); - fireEvent.click(getByTitle(/pipeline-resource-2/i)); + fireEvent.click(getByText(/pipeline-resource-2/i)); fireEvent.click(resourceDropdowns[2]); - fireEvent.click(getByTitle(/pipeline-resource-3/i)); + fireEvent.click(getByText(/pipeline-resource-3/i)); }; const fillTask1Params = getByPlaceholderText => { @@ -268,7 +268,6 @@ const selectTask1AndFillSpec = async ({ getAllByPlaceholderText, getByPlaceholderText, getByText, - getByTitle, queryByText, queryByDisplayValue }) => { @@ -276,7 +275,7 @@ const selectTask1AndFillSpec = async ({ await selectTask1({ getByPlaceholderText, getByText }); testTaskSpec('id-task-1', queryByText, queryByDisplayValue); // Fill task spec - fillTask1Resources({ getAllByPlaceholderText, getByTitle }); + fillTask1Resources({ getAllByPlaceholderText, getByText }); fillTask1Params(getByPlaceholderText); }; @@ -316,7 +315,6 @@ describe('CreateTaskRun', () => { getAllByPlaceholderText, getByPlaceholderText, getByText, - getByTitle, queryByText, queryByDisplayValue }); @@ -340,7 +338,6 @@ describe('CreateTaskRun', () => { getAllByText, getByPlaceholderText, getByText, - getByTitle, queryByText, queryByDisplayValue } = renderWithIntl( @@ -353,7 +350,6 @@ describe('CreateTaskRun', () => { getAllByPlaceholderText, getByPlaceholderText, getByText, - getByTitle, queryByText, queryByDisplayValue }); @@ -373,7 +369,7 @@ describe('CreateTaskRun', () => { it('renders empty, dropdowns disabled when no namespace selected', async () => { const { getByPlaceholderText, - getByTitle, + getByText, queryByText, queryAllByText, queryByPlaceholderText @@ -403,7 +399,7 @@ describe('CreateTaskRun', () => { fireEvent.click( await waitFor(() => getByPlaceholderText(/select namespace/i)) ); - fireEvent.click(await waitFor(() => getByTitle(/namespace-1/i))); + fireEvent.click(await waitFor(() => getByText(/namespace-1/i))); await waitFor(() => expect(document.querySelector('[label="Select Task"]').disabled).toBe( false @@ -421,7 +417,6 @@ describe('CreateTaskRun', () => { getAllByPlaceholderText, getByPlaceholderText, getByText, - getByTitle, queryByDisplayValue, queryByText } = renderWithIntl( @@ -437,7 +432,7 @@ describe('CreateTaskRun', () => { // Fill task spec fillTask1Resources({ getAllByPlaceholderText, - getByTitle + getByText }); fillTask1Params(getByPlaceholderText); expect(queryByDisplayValue(/pipeline-resource-1/i)).toBeTruthy(); @@ -447,7 +442,7 @@ describe('CreateTaskRun', () => { // Select task-2 and verify spec details are displayed fireEvent.click(queryByDisplayValue(/task-1/i)); - fireEvent.click(await waitFor(() => getByTitle(/task-2/i))); + fireEvent.click(await waitFor(() => getByText(/task-2/i))); testTaskSpec('id-task-2', queryByText, queryByDisplayValue); }); @@ -491,7 +486,7 @@ describe('CreateTaskRun', () => { }); expect(queryByDisplayValue(/foo/i)).toBeTruthy(); expect(queryByDisplayValue(/bar/i)).toBeTruthy(); - fireEvent.click(getByText(/Remove/i)); + fireEvent.click(getByText(/Remove/i).parentNode); expect(queryByDisplayValue(/foo/i)).toBeFalsy(); expect(queryByDisplayValue(/bar/i)).toBeFalsy(); }); @@ -499,7 +494,7 @@ describe('CreateTaskRun', () => { it('resets Task and ServiceAccount when namespace changes', async () => { const { getByPlaceholderText, - getByTitle, + getByText, getByDisplayValue } = renderWithIntl( @@ -508,18 +503,18 @@ describe('CreateTaskRun', () => { ); fireEvent.click(getByPlaceholderText(/select task/i)); - fireEvent.click(await waitFor(() => getByTitle(/task-1/i))); + fireEvent.click(await waitFor(() => getByText(/task-1/i))); fireEvent.click(getByPlaceholderText(/select serviceaccount/i)); - fireEvent.click(await waitFor(() => getByTitle(/service-account-1/i))); + fireEvent.click(await waitFor(() => getByText(/service-account-1/i))); // Change selected namespace to the same namespace (expect no change) fireEvent.click(getByDisplayValue(/namespace-1/i)); - fireEvent.click(await waitFor(() => getByTitle(/namespace-1/i))); + fireEvent.click(await waitFor(() => getByText(/namespace-1/i))); expect(getByDisplayValue(/task-1/i)).toBeTruthy(); expect(getByDisplayValue(/service-account-1/i)).toBeTruthy(); // Change selected namespace fireEvent.click(getByDisplayValue(/namespace-1/i)); - fireEvent.click(await waitFor(() => getByTitle(/namespace-2/i))); + fireEvent.click(await waitFor(() => getByText(/namespace-2/i))); // Verify that Task and ServiceAccount value have reset expect(getByPlaceholderText(/select task/i)).toBeTruthy(); @@ -532,7 +527,6 @@ describe('CreateTaskRun', () => { getAllByText, getByPlaceholderText, getByText, - getByTitle, queryByText, queryByDisplayValue } = renderWithIntl( @@ -546,11 +540,11 @@ describe('CreateTaskRun', () => { await selectTask1({ getByPlaceholderText, getByText }); testTaskSpec('id-task-1', queryByText, queryByDisplayValue); // Fill task spec - fillTask1Resources({ getAllByPlaceholderText, getByTitle }); + fillTask1Resources({ getAllByPlaceholderText, getByText }); fillTask1Params(getByPlaceholderText); // Fill ServiceAccount fireEvent.click(getByPlaceholderText(/select serviceaccount/i)); - fireEvent.click(await waitFor(() => getByTitle(/service-account-1/i))); + fireEvent.click(await waitFor(() => getByText(/service-account-1/i))); // Fill timeout fireEvent.change(getByPlaceholderText(/60/i), { target: { value: '120' } @@ -613,7 +607,6 @@ describe('CreateTaskRun', () => { getAllByText, getByPlaceholderText, getByText, - getByTitle, queryAllByText, queryByText } = renderWithIntl( @@ -633,7 +626,7 @@ describe('CreateTaskRun', () => { expect(queryByText(taskValidationErrorRegExp)).toBeTruthy(); // Fix validation error fireEvent.click(getByPlaceholderText(/select namespace/i)); - fireEvent.click(await waitFor(() => getByTitle(/namespace-1/i))); + fireEvent.click(await waitFor(() => getByText(/namespace-1/i))); await selectTask1({ getByPlaceholderText, getByText }); expect(queryByText(taskValidationErrorRegExp)).toBeFalsy(); @@ -645,7 +638,7 @@ describe('CreateTaskRun', () => { ).toBeTruthy(); expect(queryByText(paramsValidationErrorRegExp)).toBeTruthy(); // Fix validation error - fillTask1Resources({ getAllByPlaceholderText, getByTitle }); + fillTask1Resources({ getAllByPlaceholderText, getByText }); expect( queryAllByText(pipelineResourceValidationErrorRegExp)[0] ).toBeFalsy(); diff --git a/src/containers/EventListener/EventListener.js b/src/containers/EventListener/EventListener.js index 37eaf48d9..09b5db12b 100644 --- a/src/containers/EventListener/EventListener.js +++ b/src/containers/EventListener/EventListener.js @@ -28,8 +28,6 @@ import { import { fetchEventListener } from '../../actions/eventListeners'; import { getViewChangeHandler } from '../../utils'; -import './EventListener.scss'; - export /* istanbul ignore next */ class EventListenerContainer extends Component { componentDidMount() { const { match } = this.props; diff --git a/src/containers/Extensions/Extensions.js b/src/containers/Extensions/Extensions.js index eb5a4113b..65dedb2d8 100644 --- a/src/containers/Extensions/Extensions.js +++ b/src/containers/Extensions/Extensions.js @@ -25,8 +25,6 @@ import { isFetchingExtensions } from '../../reducers'; -import '../../scss/Definitions.scss'; - export const Extensions = /* istanbul ignore next */ ({ error, intl, diff --git a/src/containers/ImportResources/ImportResources.js b/src/containers/ImportResources/ImportResources.js index 364a2ada9..e68631bb5 100644 --- a/src/containers/ImportResources/ImportResources.js +++ b/src/containers/ImportResources/ImportResources.js @@ -39,8 +39,6 @@ import { importResources } from '../../api'; import { getDashboardNamespace, getSelectedNamespace } from '../../reducers'; import { NamespacesDropdown, ServiceAccountsDropdown } from '..'; -import './ImportResources.scss'; - const itemToString = item => (item ? item.text : ''); function isValidGitURL(url) { diff --git a/src/containers/ImportResources/ImportResources.scss b/src/containers/ImportResources/ImportResources.scss index bfe893e48..9bae134c5 100644 --- a/src/containers/ImportResources/ImportResources.scss +++ b/src/containers/ImportResources/ImportResources.scss @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~carbon-components/scss/globals/scss/vars'; - .tkn--importresources { .bx--form__helper-text, .bx--label--disabled { diff --git a/src/containers/ListPageLayout/ListPageLayout.js b/src/containers/ListPageLayout/ListPageLayout.js index eb3033c4d..bfc5ffaa5 100644 --- a/src/containers/ListPageLayout/ListPageLayout.js +++ b/src/containers/ListPageLayout/ListPageLayout.js @@ -26,8 +26,6 @@ import { selectNamespace as selectNamespaceAction } from '../../actions/namespac import { getSelectedNamespace, getTenantNamespace } from '../../reducers'; import { LabelFilter, NamespacesDropdown } from '..'; -import './ListPageLayout.scss'; - export const ListPageLayout = ({ children, error, diff --git a/src/containers/ListPageLayout/ListPageLayout.scss b/src/containers/ListPageLayout/ListPageLayout.scss index 099c56625..70bb8e988 100644 --- a/src/containers/ListPageLayout/ListPageLayout.scss +++ b/src/containers/ListPageLayout/ListPageLayout.scss @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~@tektoncd/dashboard-components/dist/scss/vars'; - .tkn--list-page--header { display: flex; diff --git a/src/containers/Pipelines/Pipelines.js b/src/containers/Pipelines/Pipelines.js index 9fb658a3f..fcf70a4b7 100644 --- a/src/containers/Pipelines/Pipelines.js +++ b/src/containers/Pipelines/Pipelines.js @@ -46,8 +46,6 @@ import { isWebSocketConnected } from '../../reducers'; -import '../../scss/Definitions.scss'; - export /* istanbul ignore next */ class Pipelines extends Component { state = { deleteError: null, diff --git a/src/containers/SideNav/SideNav.js b/src/containers/SideNav/SideNav.js index 98b9c1631..5ca924400 100644 --- a/src/containers/SideNav/SideNav.js +++ b/src/containers/SideNav/SideNav.js @@ -40,8 +40,6 @@ import { import { ReactComponent as KubernetesIcon } from '../../images/kubernetes.svg'; import { ReactComponent as TektonIcon } from '../../images/tekton-logo-20x20.svg'; -import './SideNav.scss'; - function SideNav(props) { const { expanded, diff --git a/src/containers/SideNav/SideNav.scss b/src/containers/SideNav/SideNav.scss index 808f66e75..6b0fbc133 100644 --- a/src/containers/SideNav/SideNav.scss +++ b/src/containers/SideNav/SideNav.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2020 The Tekton Authors +Copyright 2019-2021 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~carbon-components/scss/globals/scss/vars'; - .bx--header ~ { nav.bx--side-nav { background-color: $gray-100; diff --git a/src/containers/TaskRun/TaskRun.js b/src/containers/TaskRun/TaskRun.js index 2cda3281c..26b9608b6 100644 --- a/src/containers/TaskRun/TaskRun.js +++ b/src/containers/TaskRun/TaskRun.js @@ -52,7 +52,6 @@ import { isLogStreamingEnabled as selectIsLogStreamingEnabled } from '../../reducers'; -import '@tektoncd/dashboard-components/dist/scss/Run.scss'; import { fetchTask, fetchTaskByType } from '../../actions/tasks'; import { fetchTaskRun } from '../../actions/taskRuns'; import { rerunTaskRun } from '../../api'; diff --git a/src/containers/Tasks/Tasks.js b/src/containers/Tasks/Tasks.js index 4d29e3758..f797cdd79 100644 --- a/src/containers/Tasks/Tasks.js +++ b/src/containers/Tasks/Tasks.js @@ -46,8 +46,6 @@ import { isWebSocketConnected } from '../../reducers'; -import '../../scss/Definitions.scss'; - export /* istanbul ignore next */ class Tasks extends Component { state = { deleteError: null, diff --git a/src/containers/TriggerBinding/TriggerBinding.js b/src/containers/TriggerBinding/TriggerBinding.js index 9d8690802..6e0b6a7db 100644 --- a/src/containers/TriggerBinding/TriggerBinding.js +++ b/src/containers/TriggerBinding/TriggerBinding.js @@ -28,8 +28,6 @@ import { getViewChangeHandler } from '../../utils'; import { fetchTriggerBinding as fetchTriggerBindingActionCreator } from '../../actions/triggerBindings'; -import '../../scss/Triggers.scss'; - export /* istanbul ignore next */ function TriggerBindingContainer(props) { const { error, diff --git a/src/containers/TriggerTemplate/TriggerTemplate.js b/src/containers/TriggerTemplate/TriggerTemplate.js index a1f6be44d..11c31a02e 100644 --- a/src/containers/TriggerTemplate/TriggerTemplate.js +++ b/src/containers/TriggerTemplate/TriggerTemplate.js @@ -33,8 +33,6 @@ import { getViewChangeHandler } from '../../utils'; import { fetchTriggerTemplate as fetchTriggerTemplateActionCreator } from '../../actions/triggerTemplates'; -import '../../scss/Triggers.scss'; - const { Table, TableBody, diff --git a/src/scss/App.scss b/src/scss/App.scss index 3fd30a5b9..d5d6975b5 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -13,6 +13,41 @@ limitations under the License. @import './carbon'; +@import './Definitions.scss'; +@import './Triggers.scss'; +@import './Create.scss'; +@import '../containers/About/About.scss'; +@import '../containers/EventListener/EventListener.scss'; +@import '../containers/ImportResources/ImportResources.scss'; +@import '../containers/ListPageLayout/ListPageLayout.scss'; +@import '../containers/SideNav/SideNav.scss'; + +@import '~@tektoncd/dashboard-components/dist/scss/Run.scss'; +@import '~@tektoncd/dashboard-components/dist/components/DataTableSkeleton/DataTableSkeleton.scss'; +@import '~@tektoncd/dashboard-components/dist/components/DeleteModal/DeleteModal.scss'; +@import '~@tektoncd/dashboard-components/dist/components/DetailsHeader/DetailsHeader.scss'; +@import '~@tektoncd/dashboard-components/dist/components/Header/Header.scss'; +@import '~@tektoncd/dashboard-components/dist/components/KeyValueList/KeyValueList.scss'; +@import '~@tektoncd/dashboard-components/dist/components/LabelFilter/LabelFilter.scss'; +@import '~@tektoncd/dashboard-components/dist/components/LoadingShell/LoadingShell.scss'; +@import '~@tektoncd/dashboard-components/dist/components/Log/Log.scss'; +@import '~@tektoncd/dashboard-components/dist/components/LogFormat/LogFormat.scss'; +@import '~@tektoncd/dashboard-components/dist/components/LogoutButton/LogoutButton.scss'; +@import '~@tektoncd/dashboard-components/dist/components/Param/Param.scss'; +@import '~@tektoncd/dashboard-components/dist/components/PipelineRuns/PipelineRuns.scss'; +@import '~@tektoncd/dashboard-components/dist/components/Rerun/Rerun.scss'; +@import '~@tektoncd/dashboard-components/dist/components/RunHeader/RunHeader.scss'; +@import '~@tektoncd/dashboard-components/dist/components/Spinner/Spinner.scss'; +@import '~@tektoncd/dashboard-components/dist/components/StatusIcon/StatusIcon.scss'; +@import '~@tektoncd/dashboard-components/dist/components/Step/Step.scss'; +@import '~@tektoncd/dashboard-components/dist/components/StepDetails/StepDetails.scss'; +@import '~@tektoncd/dashboard-components/dist/components/Table/Table.scss'; +@import '~@tektoncd/dashboard-components/dist/components/Task/Task.scss'; +@import '~@tektoncd/dashboard-components/dist/components/TaskRunDetails/TaskRunDetails.scss'; +@import '~@tektoncd/dashboard-components/dist/components/TaskTree/TaskTree.scss'; +@import '~@tektoncd/dashboard-components/dist/components/Trigger/Trigger.scss'; +@import '~@tektoncd/dashboard-components/dist/components/ViewYAML/ViewYAML.scss'; + .bx--btn.link-btn.bx--btn--ghost { text-decoration: none; } diff --git a/src/scss/Create.scss b/src/scss/Create.scss index ddf32c420..8965ce26d 100644 --- a/src/scss/Create.scss +++ b/src/scss/Create.scss @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~carbon-components/scss/globals/scss/vars'; - .tkn--create { .tkn--create--heading { display: flex; diff --git a/src/scss/Triggers.scss b/src/scss/Triggers.scss index e0d1cef2a..a2cd8bc78 100644 --- a/src/scss/Triggers.scss +++ b/src/scss/Triggers.scss @@ -11,8 +11,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -@import '~@tektoncd/dashboard-components/dist/scss/vars'; - .tkn--resourcedetails { .tkn--details { p:not(:empty) { diff --git a/src/scss/_carbon.scss b/src/scss/_carbon.scss index ffc9a9fa7..0478391b1 100644 --- a/src/scss/_carbon.scss +++ b/src/scss/_carbon.scss @@ -19,12 +19,21 @@ $css--default-type: true; $css--plex: true; $feature-flags: ( - grid-columns-16: true + grid-columns-16: true, + enable-css-custom-properties: true ); -@import '~@tektoncd/dashboard-components/dist/scss/vars'; -@include carbon--theme(); +@import '~@carbon/themes/scss/themes'; +:root { + @include carbon--theme($carbon--theme--g10, true); +} + +body.tkn--dark-theme { + @include carbon--theme($carbon--theme--g90, true); +} + +@import '~carbon-components/scss/globals/scss/vars'; @import '~carbon-components/scss/globals/scss/css--reset'; @import '~carbon-components/scss/globals/scss/css--font-face'; @import '~carbon-components/scss/globals/scss/css--helpers';