From f6892ba7fc72a0117b88d6e2e1391ad304623daf Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Wed, 11 Dec 2024 18:04:14 +0800 Subject: [PATCH] Disable buttons in sample data cards for read-only users Signed-off-by: Kapian1234 --- .../components/sample_data_set_card.js | 113 ++++++++++-------- .../sample_data_view_data_button.js | 1 + 2 files changed, 62 insertions(+), 52 deletions(-) diff --git a/src/plugins/home/public/application/components/sample_data_set_card.js b/src/plugins/home/public/application/components/sample_data_set_card.js index 5671478fa0de..c4aa428137fd 100644 --- a/src/plugins/home/public/application/components/sample_data_set_card.js +++ b/src/plugins/home/public/application/components/sample_data_set_card.js @@ -29,6 +29,7 @@ */ import React from 'react'; +import useObservable from 'react-use/lib/useObservable'; import PropTypes from 'prop-types'; import { EuiCard, @@ -46,62 +47,69 @@ import { i18n } from '@osd/i18n'; import { FormattedMessage } from '@osd/i18n/react'; import { SampleDataViewDataButton } from './sample_data_view_data_button'; - -export class SampleDataSetCard extends React.Component { - isInstalled = () => { - if (this.props.status === INSTALLED_STATUS) { +import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public'; + +export const SampleDataSetCard = (props) => { + const { + services: { workspaces }, + } = useOpenSearchDashboards(); + const isInstalled = () => { + if (props.status === INSTALLED_STATUS) { return true; } return false; }; + const currentWorkspace = useObservable(workspaces.currentWorkspace$); + const isReadOnly = !!(currentWorkspace && currentWorkspace.readonly); - install = () => { - this.props.onInstall(this.props.id, this.props.dataSourceId); + const install = () => { + props.onInstall(props.id, props.dataSourceId); }; - uninstall = () => { - this.props.onUninstall(this.props.id, this.props.dataSourceId); + const uninstall = () => { + props.onUninstall(props.id, props.dataSourceId); }; - renderBtn = () => { - const dataSourceEnabled = this.props.isDataSourceEnabled; - const hideLocalCluster = this.props.isLocalClusterHidden; - const dataSourceId = this.props.dataSourceId; + const renderBtn = () => { + const dataSourceEnabled = props.isDataSourceEnabled; + const hideLocalCluster = props.isLocalClusterHidden; + const dataSourceId = props.dataSourceId; let buttonDisabled = false; if (dataSourceEnabled && hideLocalCluster) { buttonDisabled = dataSourceId === undefined; } - switch (this.props.status) { + switch (props.status) { case INSTALLED_STATUS: return ( - {this.props.isProcessing ? ( + {props.isProcessing ? ( @@ -131,27 +140,27 @@ export class SampleDataSetCard extends React.Component { - {this.props.isProcessing ? ( + {props.isProcessing ? (

} > @@ -206,21 +215,21 @@ export class SampleDataSetCard extends React.Component { } }; - render() { - return ( - - ); - } -} + // render() { + return ( + + ); + // } +}; SampleDataSetCard.propTypes = { id: PropTypes.string.isRequired, diff --git a/src/plugins/home/public/application/components/sample_data_view_data_button.js b/src/plugins/home/public/application/components/sample_data_view_data_button.js index b51aef399200..987a21bdc5b7 100644 --- a/src/plugins/home/public/application/components/sample_data_view_data_button.js +++ b/src/plugins/home/public/application/components/sample_data_view_data_button.js @@ -76,6 +76,7 @@ export class SampleDataViewDataButton extends React.Component { if (this.props.appLinks.length === 0 && this.props.overviewDashboard !== '') { return (