mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Angular: More isolation and removing of unused components (#41630)
* Angular: More isolation and removing of unused components * Moved some more and fixed a test
This commit is contained in:
Torkel Ödegaard
GitHub
@@ -1,205 +0,0 @@
|
||||
import { map, find } from 'lodash';
|
||||
import { IScope } from 'angular';
|
||||
import { AppEvents } from '@grafana/data';
|
||||
|
||||
import coreModule from 'app/angular/core_module';
|
||||
import appEvents from 'app/core/app_events';
|
||||
import { backendSrv } from 'app/core/services/backend_srv';
|
||||
import { ValidationSrv } from 'app/features/manage-dashboards';
|
||||
import { ContextSrv } from 'app/core/services/context_srv';
|
||||
import { promiseToDigest } from '../../../../angular/promiseToDigest';
|
||||
import { createFolder } from 'app/features/manage-dashboards/state/actions';
|
||||
|
||||
export class FolderPickerCtrl {
|
||||
declare initialTitle: string;
|
||||
initialFolderId?: number;
|
||||
labelClass?: string;
|
||||
onChange: any;
|
||||
onLoad: any;
|
||||
onCreateFolder: any;
|
||||
enterFolderCreation: any;
|
||||
exitFolderCreation: any;
|
||||
declare enableCreateNew: boolean;
|
||||
declare enableReset: boolean;
|
||||
rootName = 'General';
|
||||
folder: any;
|
||||
createNewFolder?: boolean;
|
||||
newFolderName?: string;
|
||||
newFolderNameTouched?: boolean;
|
||||
hasValidationError?: boolean;
|
||||
validationError: any;
|
||||
isEditor: boolean;
|
||||
dashboardId?: number;
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private validationSrv: ValidationSrv, private contextSrv: ContextSrv, private $scope: IScope) {
|
||||
this.isEditor = this.contextSrv.isEditor;
|
||||
|
||||
if (this.labelClass === undefined) {
|
||||
this.labelClass = 'width-7';
|
||||
}
|
||||
|
||||
this.loadInitialValue();
|
||||
}
|
||||
|
||||
getOptions(query: string) {
|
||||
const params = {
|
||||
query,
|
||||
type: 'dash-folder',
|
||||
permission: 'Edit',
|
||||
};
|
||||
|
||||
return promiseToDigest(this.$scope)(
|
||||
backendSrv.get('api/search', params).then((result: any) => {
|
||||
if (
|
||||
this.isEditor &&
|
||||
(query === '' ||
|
||||
query.toLowerCase() === 'g' ||
|
||||
query.toLowerCase() === 'ge' ||
|
||||
query.toLowerCase() === 'gen' ||
|
||||
query.toLowerCase() === 'gene' ||
|
||||
query.toLowerCase() === 'gener' ||
|
||||
query.toLowerCase() === 'genera' ||
|
||||
query.toLowerCase() === 'general')
|
||||
) {
|
||||
result.unshift({ title: this.rootName, id: 0 });
|
||||
}
|
||||
|
||||
if (this.isEditor && this.enableCreateNew && query === '') {
|
||||
result.unshift({ title: '-- New folder --', id: -1 });
|
||||
}
|
||||
|
||||
if (this.enableReset && query === '' && this.initialTitle !== '') {
|
||||
result.unshift({ title: this.initialTitle, id: null });
|
||||
}
|
||||
|
||||
return map(result, (item) => {
|
||||
return { text: item.title, value: item.id };
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
onFolderChange(option: { value: number; text: string }) {
|
||||
if (!option) {
|
||||
option = { value: 0, text: this.rootName };
|
||||
} else if (option.value === -1) {
|
||||
this.createNewFolder = true;
|
||||
this.enterFolderCreation();
|
||||
return;
|
||||
}
|
||||
this.onChange({ $folder: { id: option.value, title: option.text } });
|
||||
}
|
||||
|
||||
newFolderNameChanged() {
|
||||
this.newFolderNameTouched = true;
|
||||
|
||||
this.validationSrv
|
||||
.validateNewFolderName(this.newFolderName)
|
||||
.then(() => {
|
||||
this.hasValidationError = false;
|
||||
})
|
||||
.catch((err: any) => {
|
||||
this.hasValidationError = true;
|
||||
this.validationError = err.message;
|
||||
});
|
||||
}
|
||||
|
||||
createFolder(evt: any) {
|
||||
if (evt) {
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
}
|
||||
|
||||
return promiseToDigest(this.$scope)(
|
||||
createFolder({ title: this.newFolderName }).then((result: { title: string; id: number }) => {
|
||||
appEvents.emit(AppEvents.alertSuccess, ['Folder created', 'OK']);
|
||||
|
||||
this.closeCreateFolder();
|
||||
this.folder = { text: result.title, value: result.id };
|
||||
this.onFolderChange(this.folder);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
cancelCreateFolder(evt: any) {
|
||||
if (evt) {
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
}
|
||||
|
||||
this.closeCreateFolder();
|
||||
this.loadInitialValue();
|
||||
}
|
||||
|
||||
private closeCreateFolder() {
|
||||
this.exitFolderCreation();
|
||||
this.createNewFolder = false;
|
||||
this.hasValidationError = false;
|
||||
this.validationError = null;
|
||||
this.newFolderName = '';
|
||||
this.newFolderNameTouched = false;
|
||||
}
|
||||
|
||||
private loadInitialValue() {
|
||||
const resetFolder: { text: string; value: any } = { text: this.initialTitle, value: null };
|
||||
const rootFolder: { text: string; value: any } = { text: this.rootName, value: 0 };
|
||||
|
||||
this.getOptions('').then((result: any[]) => {
|
||||
let folder: { text: string; value: any } | undefined;
|
||||
|
||||
if (this.initialFolderId) {
|
||||
// @ts-ignore
|
||||
folder = find(result, { value: this.initialFolderId });
|
||||
} else if (this.enableReset && this.initialTitle && this.initialFolderId === null) {
|
||||
folder = resetFolder;
|
||||
}
|
||||
|
||||
if (!folder) {
|
||||
if (this.isEditor) {
|
||||
folder = rootFolder;
|
||||
} else {
|
||||
// We shouldn't assign a random folder without the user actively choosing it on a persisted dashboard
|
||||
const isPersistedDashBoard = this.dashboardId ? true : false;
|
||||
if (isPersistedDashBoard) {
|
||||
folder = resetFolder;
|
||||
} else {
|
||||
folder = result.length > 0 ? result[0] : resetFolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.folder = folder;
|
||||
|
||||
// if this is not the same as our initial value notify parent
|
||||
if (this.folder.value !== this.initialFolderId) {
|
||||
this.onChange({ $folder: { id: this.folder.value, title: this.folder.text } });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function folderPicker() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'public/app/features/dashboard/components/FolderPicker/template.html',
|
||||
controller: FolderPickerCtrl,
|
||||
bindToController: true,
|
||||
controllerAs: 'ctrl',
|
||||
scope: {
|
||||
initialTitle: '<',
|
||||
initialFolderId: '<',
|
||||
labelClass: '@',
|
||||
rootName: '@',
|
||||
onChange: '&',
|
||||
onCreateFolder: '&',
|
||||
enterFolderCreation: '&',
|
||||
exitFolderCreation: '&',
|
||||
enableCreateNew: '@',
|
||||
enableReset: '@',
|
||||
dashboardId: '<?',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
coreModule.directive('folderPicker', folderPicker);
|
||||
@@ -8,7 +8,9 @@ import * as api from 'app/features/manage-dashboards/state/actions';
|
||||
jest.mock('app/features/plugins/datasource_srv', () => ({}));
|
||||
jest.mock('app/features/expressions/ExpressionDatasource', () => ({}));
|
||||
jest.mock('app/features/manage-dashboards/services/ValidationSrv', () => ({
|
||||
validateNewDashboardName: () => true,
|
||||
validationSrv: {
|
||||
validateNewDashboardName: () => true,
|
||||
},
|
||||
}));
|
||||
|
||||
jest.spyOn(api, 'searchFolders').mockResolvedValue([]);
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Button, Input, Switch, Form, Field, InputControl, Modal } from '@grafan
|
||||
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
|
||||
import { FolderPicker } from 'app/core/components/Select/FolderPicker';
|
||||
import { SaveDashboardFormProps } from '../types';
|
||||
import validationSrv from 'app/features/manage-dashboards/services/ValidationSrv';
|
||||
import { validationSrv } from 'app/features/manage-dashboards/services/ValidationSrv';
|
||||
|
||||
interface SaveDashboardAsFormDTO {
|
||||
title: string;
|
||||
|
||||
Reference in New Issue
Block a user