123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- import styled from '@emotion/styled';
- import * as modal from 'app/actionCreators/modal';
- import Button from 'app/components/button';
- import ContextPickerModal from 'app/components/contextPickerModal';
- import {t} from 'app/locale';
- import space from 'app/styles/space';
- import {PluginProjectItem, PluginWithProjectList} from 'app/types';
- import withOrganization from 'app/utils/withOrganization';
- import AbstractIntegrationDetailedView from './abstractIntegrationDetailedView';
- import InstalledPlugin from './installedPlugin';
- type State = {
- plugins: PluginWithProjectList[];
- };
- type Tab = AbstractIntegrationDetailedView['state']['tab'];
- class PluginDetailedView extends AbstractIntegrationDetailedView<
- AbstractIntegrationDetailedView['props'],
- State & AbstractIntegrationDetailedView['state']
- > {
- getEndpoints(): ([string, string, any] | [string, string])[] {
- const {orgId, integrationSlug} = this.props.params;
- return [
- ['plugins', `/organizations/${orgId}/plugins/configs/?plugins=${integrationSlug}`],
- ];
- }
- get integrationType() {
- return 'plugin' as const;
- }
- get plugin() {
- return this.state.plugins[0];
- }
- get description() {
- return this.plugin.description || '';
- }
- get author() {
- return this.plugin.author?.name;
- }
- get resourceLinks() {
- return this.plugin.resourceLinks || [];
- }
- get installationStatus() {
- return this.plugin.projectList.length > 0 ? 'Installed' : 'Not Installed';
- }
- get integrationName() {
- return `${this.plugin.name}${this.plugin.isHidden ? ' (Legacy)' : ''}`;
- }
- get featureData() {
- return this.plugin.featureDescriptions;
- }
- handleResetConfiguration = (projectId: string) => {
-
- const projectList = this.plugin.projectList.slice();
-
- const index = projectList.findIndex(item => item.projectId === projectId);
-
- if (index < 0) {
- return;
- }
-
- projectList.splice(index, 1);
-
- this.setState({
- plugins: [{...this.state.plugins[0], projectList}],
- });
- };
- handlePluginEnableStatus = (projectId: string, enable: boolean = true) => {
-
- const projectList = this.plugin.projectList.slice();
-
- const index = projectList.findIndex(item => item.projectId === projectId);
-
- if (index < 0) {
- return;
- }
-
- projectList[index] = {
- ...projectList[index],
- enabled: enable,
- };
-
- this.setState({
- plugins: [{...this.state.plugins[0], projectList}],
- });
- };
- handleAddToProject = () => {
- const plugin = this.plugin;
- const {organization, router} = this.props;
- this.trackIntegrationEvent('integrations.plugin_add_to_project_clicked');
- modal.openModal(
- modalProps => (
- <ContextPickerModal
- {...modalProps}
- nextPath={`/settings/${organization.slug}/projects/:projectId/plugins/${plugin.id}/`}
- needProject
- needOrg={false}
- onFinish={path => {
- modalProps.closeModal();
- router.push(path);
- }}
- />
- ),
- {}
- );
- };
- getTabDisplay(tab: Tab) {
-
- if (tab === 'configurations') {
- return 'project configurations';
- }
- return 'overview';
- }
- renderTopButton(disabledFromFeatures: boolean, userHasAccess: boolean) {
- if (userHasAccess) {
- return (
- <AddButton
- data-test-id="install-button"
- disabled={disabledFromFeatures}
- onClick={this.handleAddToProject}
- size="small"
- priority="primary"
- >
- {t('Add to Project')}
- </AddButton>
- );
- }
- return this.renderRequestIntegrationButton();
- }
- renderConfigurations() {
- const plugin = this.plugin;
- const {organization} = this.props;
- if (plugin.projectList.length) {
- return (
- <div>
- {plugin.projectList.map((projectItem: PluginProjectItem) => (
- <InstalledPlugin
- key={projectItem.projectId}
- organization={organization}
- plugin={plugin}
- projectItem={projectItem}
- onResetConfiguration={this.handleResetConfiguration}
- onPluginEnableStatusChange={this.handlePluginEnableStatus}
- trackIntegrationEvent={this.trackIntegrationEvent}
- />
- ))}
- </div>
- );
- }
- return this.renderEmptyConfigurations();
- }
- }
- const AddButton = styled(Button)`
- margin-bottom: ${space(1)};
- `;
- export default withOrganization(PluginDetailedView);
|