🐛 Bug Report: OpenCost plugin yarn install fails on missing KeyboardDatePicker

[natigavriel]

📜 Description

Hello, I have followed the following tutorial to add opencost plugin to my local backstage implementation and got an error on missing KeyboardDatePicker consumed from @material-ui/pickers by @backstage/plugin-opencost. It seems that KeyboardDatePicker is no longer packed with @material-ui/pickers.

Please kindly advice :-) Link for tutorial - https://github.com/backstage/backstage/blob/master/plugins/opencost/README.md @mattray - I noticed some of your commits in this domain, your help would be appreciated.

👍 Expected behavior

yarn install should be successful after adding the plugin.

👎 Actual Behavior with Screenshots

Error: Failed to compile '../../node_modules/@backstage/plugin-opencost/dist/esm/index-BQC8_PDN.esm.js': Module not found: Error: Can't resolve '@material-ui/pickers/KeyboardDatePicker' in ...node_modules/@backstage/plugin-opencost/dist/esm

👟 Reproduction steps

Followed the steps from this tutorial - https://github.com/backstage/backstage/blob/master/plugins/opencost/README.md And then run: yarn --cwd packages/app add @backstage/plugin-opencost yarn clean yarn install --frozen-lockfile yarn tsc yarn build:backend --config ../../app-config.yaml

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

OS: Darwin 23.3.0 - darwin/x64 node: v18.19.1 yarn: 1.22.19 cli: 0.25.2 (installed) backstage: 1.23.0

Dependencies: @backstage/app-defaults 1.5.0 @backstage/backend-app-api 0.5.14, 0.6.1 @backstage/backend-common 0.21.3, 0.21.5 @backstage/backend-defaults 0.2.13 @backstage/backend-dev-utils 0.1.4 @backstage/backend-openapi-utils 0.1.6 @backstage/backend-plugin-api 0.6.15, 0.6.13 @backstage/backend-tasks 0.5.18, 0.5.20 @backstage/catalog-client 1.6.0, 1.6.2 @backstage/catalog-model 1.4.4, 1.4.5, 1.4.4-next.0 @backstage/cli-common 0.1.13 @backstage/cli-node 0.2.3, 0.2.4 @backstage/cli 0.25.2 @backstage/config-loader 1.6.2, 1.7.0 @backstage/config 1.1.1, 1.2.0 @backstage/core-app-api 1.12.0 @backstage/core-compat-api 0.2.0 @backstage/core-components 0.14.0, 0.14.3 @backstage/core-plugin-api 1.9.0, 1.9.1 @backstage/e2e-test-utils 0.1.1 @backstage/errors 1.2.3, 1.2.4 @backstage/eslint-plugin 0.1.5 @backstage/frontend-plugin-api 0.6.0 @backstage/integration-aws-node 0.1.11, 0.1.9 @backstage/integration-react 1.1.24 @backstage/integration 1.9.0, 1.9.1 @backstage/plugin-api-docs 0.11.0 @backstage/plugin-app-backend 0.3.61 @backstage/plugin-app-node 0.1.13 @backstage/plugin-auth-backend-module-atlassian-provider 0.1.5 @backstage/plugin-auth-backend-module-aws-alb-provider 0.1.4 @backstage/plugin-auth-backend-module-gcp-iap-provider 0.2.8 @backstage/plugin-auth-backend-module-github-provider 0.1.10 @backstage/plugin-auth-backend-module-gitlab-provider 0.1.10 @backstage/plugin-auth-backend-module-google-provider 0.1.10 @backstage/plugin-auth-backend-module-microsoft-provider 0.1.8 @backstage/plugin-auth-backend-module-oauth2-provider 0.1.10 @backstage/plugin-auth-backend-module-oauth2-proxy-provider 0.1.6 @backstage/plugin-auth-backend-module-oidc-provider 0.1.3 @backstage/plugin-auth-backend-module-okta-provider 0.0.6 @backstage/plugin-auth-backend 0.21.3 @backstage/plugin-auth-node 0.4.10, 0.4.8 @backstage/plugin-catalog-backend-module-aws 0.3.10 @backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.10 @backstage/plugin-catalog-backend 1.17.3 @backstage/plugin-catalog-common 1.0.21, 1.0.22 @backstage/plugin-catalog-graph 0.4.0 @backstage/plugin-catalog-import 0.10.6 @backstage/plugin-catalog-node 1.10.0, 1.7.3 @backstage/plugin-catalog-react 1.10.0 @backstage/plugin-catalog 1.17.0 @backstage/plugin-events-node 0.2.22 @backstage/plugin-github-actions 0.6.11 @backstage/plugin-jenkins-backend 0.3.7 @backstage/plugin-jenkins-common 0.1.24 @backstage/plugin-jenkins 0.9.5 @backstage/plugin-kubernetes-backend 0.15.3 @backstage/plugin-kubernetes-common 0.7.4, 0.7.5 @backstage/plugin-kubernetes-node 0.1.7 @backstage/plugin-kubernetes-react 0.3.0 @backstage/plugin-kubernetes 0.11.5 @backstage/plugin-opencost 0.2.8 @backstage/plugin-org 0.6.20 @backstage/plugin-permission-backend 0.5.39 @backstage/plugin-permission-common 0.7.12, 0.7.13 @backstage/plugin-permission-node 0.7.24, 0.7.26 @backstage/plugin-permission-react 0.4.20 @backstage/plugin-proxy-backend 0.4.11 @backstage/plugin-scaffolder-backend-module-azure 0.1.5 @backstage/plugin-scaffolder-backend-module-bitbucket-cloud 0.1.3 @backstage/plugin-scaffolder-backend-module-bitbucket-server 0.1.3 @backstage/plugin-scaffolder-backend-module-bitbucket 0.2.3 @backstage/plugin-scaffolder-backend-module-gerrit 0.1.5 @backstage/plugin-scaffolder-backend-module-gitea 0.1.3 @backstage/plugin-scaffolder-backend-module-github 0.2.3 @backstage/plugin-scaffolder-backend-module-gitlab 0.2.16 @backstage/plugin-scaffolder-backend 1.21.3 @backstage/plugin-scaffolder-common 1.5.0 @backstage/plugin-scaffolder-node 0.3.3 @backstage/plugin-scaffolder-react 1.8.0 @backstage/plugin-scaffolder 1.18.0 @backstage/plugin-search-backend-module-catalog 0.1.17 @backstage/plugin-search-backend-module-pg 0.5.22 @backstage/plugin-search-backend-module-techdocs 0.1.17 @backstage/plugin-search-backend-node 1.2.17 @backstage/plugin-search-backend 1.5.3 @backstage/plugin-search-common 1.2.10, 1.2.11 @backstage/plugin-search-react 1.7.6 @backstage/plugin-search 1.4.6 @backstage/plugin-tech-radar 0.6.13 @backstage/plugin-techdocs-backend 1.9.6 @backstage/plugin-techdocs-module-addons-contrib 1.1.5 @backstage/plugin-techdocs-node 1.11.5 @backstage/plugin-techdocs-react 1.1.16 @backstage/plugin-techdocs 1.10.0 @backstage/plugin-user-settings 0.8.1 @backstage/release-manifests 0.0.11 @backstage/repo-tools 0.6.3 @backstage/test-utils 1.5.0 @backstage/theme 0.5.1, 0.5.2, 0.5.1-next.1 @backstage/types 1.1.1 @backstage/version-bridge 1.0.7

👀 Have you spent some time to check if this bug has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Code of Conduct

Are you willing to submit PR?

None

[sammbetts]

I am hitting this same bug!

[sammbetts]

@natigavriel have you managed to get past this yet?

[freben]

Related: backstage/community-plugins#457

Might be that that effort needs to be accelerated to get rid of these deprecated components. Contributions welcome!

A short term fix until that's been arranged, could be to pin your material-ui versions with a root package.json resolution. But of course that's not ideal long term.

[Amir-Tayabali]

I'm experiencing the same problem. Any ideas on whether this can be accelerated?

[freben]

The plugin is community owned and will need someone to step up and make a pull request for replacing this picker with something else.

[mattray]

I'm looking into it.

[mattray]

If you don't want to wait for my PR, removing https://github.com/backstage/backstage/blob/master/plugins/opencost/src/components/SelectWindow.jsx#L20 and https://github.com/backstage/backstage/blob/master/plugins/opencost/src/components/SelectWindow.jsx#L141-L176 will remove the offending code (ie. the ability to specify the date/time range) and start working again. I'm looking into what replaced the @material-ui/pickers/KeyboardDatePicker

[vinzscam]

Hey @mattray, do you have a PR somewhere that fixes the issue?

[mattray]

I started one but got sidetracked, I'll try to circle back soon. Feel free to take it if you're interested.

[Ajay-Chidambaram]

Hi, I ran into the same issue .. Is there any temporary fix for this ?

[awanlin]

Hi @Ajay-Chidambaram this comment should help: https://github.com/backstage/community-plugins/issues/185#issuecomment-2068840150

[awanlin]

Still looking for help with this one, please!

[Guilherme-silvestri]

Hi guys, I made it work here: 1 - yarn add --cwd packages/app @mui/x-date-pickers 2 - edit the plugin-opencost/dist/components/SelectWindow.esm.js file 3 - change the line import { KeyboardDatePicker } from '@material-ui/pickers'; to import { DatePicker } from '@mui/x-date-pickers/DatePicker'; 4 - change the lines: KeyboardDatePicker, { style: { width: "144px" }, autoOk: true, disableToolbar: true, variant: "inline", format: "MM/dd/yyyy", margin: "normal", id: "date-picker-start", label: "Start Date", value: startDate, maxDate: /* @PURE / new Date(), maxDateMessage: "Date should not be after today.", onChange: handleStartDateChange, KeyboardButtonProps: { "aria-label": "change date" } } ), / @PURE / React.createElement( KeyboardDatePicker, { style: { width: "144px" }, autoOk: true, disableToolbar: true, variant: "inline", format: "MM/dd/yyyy", margin: "normal", id: "date-picker-end", label: "End Date", value: endDate, maxDate: / @PURE */ new Date(), maxDateMessage: "Date should not be after today.", onChange: handleEndDateChange, KeyboardButtonProps: { "aria-label": "change date" } } to:

  DatePicker,
  {
    style: { width: "144px" },
    autoOk: true,
    disableToolbar: true,
    variant: "inline",
    format: "MM/dd/yyyy",
    margin: "normal",
    id: "date-picker-start",
    label: "Start Date",
    value: startDate,
    maxDate: /* @__PURE__ */ new Date(),
    maxDateMessage: "Date should not be after today.",
    onChange: handleStartDateChange,
    KeyboardButtonProps: {
      "aria-label": "change date"
    }
  }
), /* @__PURE__ */ React.createElement(
  DatePicker,
  {
    style: { width: "144px" },
    autoOk: true,
    disableToolbar: true,
    variant: "inline",
    format: "MM/dd/yyyy",
    margin: "normal",
    id: "date-picker-end",
    label: "End Date",
    value: endDate,
    maxDate: /* @__PURE__ */ new Date(),
    maxDateMessage: "Date should not be after today.",
    onChange: handleEndDateChange,
    KeyboardButtonProps: {
      "aria-label": "change date"
    }
  }

[vinzscam]

this would be a good contribution to the plugin @Guilherme-silvestri 😄

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[and-arevalo]

Hi guys,

I created this PR to solve this issue. Can you please take a look? https://github.com/backstage/community-plugins/pull/2550

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[04kash]

Closing as https://github.com/backstage/community-plugins/pull/2550 is merged