From 0c16d3cd6a63d854094890095d1e5d57492ce347 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 23 Jan 2019 11:37:46 +0100 Subject: [PATCH] Moved history component, added start draft of frontend code style guide --- public/app/features/all.ts | 2 +- .../VersionHistory/HistoryListCtrl.test.ts} | 4 +- .../VersionHistory/HistoryListCtrl.ts} | 8 +-- .../VersionHistory/HistorySrv.test.ts} | 7 +-- .../VersionHistory/HistorySrv.ts} | 2 +- .../VersionHistory/__mocks__/history.ts} | 0 .../components/VersionHistory/index.ts | 2 + .../VersionHistory/template.html} | 0 .../features/dashboard/{all.ts => index.ts} | 2 +- style_guides/frontend.md | 62 +++++++++++++++++++ 10 files changed, 75 insertions(+), 14 deletions(-) rename public/app/features/dashboard/{specs/history_ctrl.test.ts => components/VersionHistory/HistoryListCtrl.test.ts} (98%) rename public/app/features/dashboard/{history/history.ts => components/VersionHistory/HistoryListCtrl.ts} (96%) rename public/app/features/dashboard/{specs/history_srv.test.ts => components/VersionHistory/HistorySrv.test.ts} (90%) rename public/app/features/dashboard/{history/history_srv.ts => components/VersionHistory/HistorySrv.ts} (96%) rename public/app/features/dashboard/{specs/history_mocks.ts => components/VersionHistory/__mocks__/history.ts} (100%) create mode 100644 public/app/features/dashboard/components/VersionHistory/index.ts rename public/app/features/dashboard/{history/history.html => components/VersionHistory/template.html} (100%) rename public/app/features/dashboard/{all.ts => index.ts} (96%) create mode 100644 style_guides/frontend.md diff --git a/public/app/features/all.ts b/public/app/features/all.ts index 1ba6a85899c..83146596ea0 100644 --- a/public/app/features/all.ts +++ b/public/app/features/all.ts @@ -1,7 +1,7 @@ import './annotations/all'; import './templating/all'; import './plugins/all'; -import './dashboard/all'; +import './dashboard'; import './playlist/all'; import './panel/all'; import './org/all'; diff --git a/public/app/features/dashboard/specs/history_ctrl.test.ts b/public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.test.ts similarity index 98% rename from public/app/features/dashboard/specs/history_ctrl.test.ts rename to public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.test.ts index 632f3489dae..2b257e148f5 100644 --- a/public/app/features/dashboard/specs/history_ctrl.test.ts +++ b/public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.test.ts @@ -1,6 +1,6 @@ import _ from 'lodash'; -import { HistoryListCtrl } from 'app/features/dashboard/history/history'; -import { versions, compare, restore } from './history_mocks'; +import { HistoryListCtrl } from './HistoryListCtrl'; +import { versions, compare, restore } from './__mocks__/history'; import $q from 'q'; describe('HistoryListCtrl', () => { diff --git a/public/app/features/dashboard/history/history.ts b/public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.ts similarity index 96% rename from public/app/features/dashboard/history/history.ts rename to public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.ts index 3563ccc7766..b8632e2eeae 100644 --- a/public/app/features/dashboard/history/history.ts +++ b/public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.ts @@ -1,12 +1,10 @@ -import './history_srv'; - import _ from 'lodash'; import angular from 'angular'; import moment from 'moment'; import locationUtil from 'app/core/utils/location_util'; -import { DashboardModel } from '../dashboard_model'; -import { HistoryListOpts, RevisionsModel, CalculateDiffOptions, HistorySrv } from './history_srv'; +import { DashboardModel } from '../../dashboard_model'; +import { HistoryListOpts, RevisionsModel, CalculateDiffOptions, HistorySrv } from './HistorySrv'; export class HistoryListCtrl { appending: boolean; @@ -200,7 +198,7 @@ export class HistoryListCtrl { export function dashboardHistoryDirective() { return { restrict: 'E', - templateUrl: 'public/app/features/dashboard/history/history.html', + templateUrl: 'public/app/features/dashboard/components/VersionHistory/template.html', controller: HistoryListCtrl, bindToController: true, controllerAs: 'ctrl', diff --git a/public/app/features/dashboard/specs/history_srv.test.ts b/public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts similarity index 90% rename from public/app/features/dashboard/specs/history_srv.test.ts rename to public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts index 1e2bd57a221..75766060e7f 100644 --- a/public/app/features/dashboard/specs/history_srv.test.ts +++ b/public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts @@ -1,7 +1,6 @@ -import '../history/history_srv'; -import { versions, restore } from './history_mocks'; -import { HistorySrv } from '../history/history_srv'; -import { DashboardModel } from '../dashboard_model'; +import { versions, restore } from './__mocks__/history'; +import { HistorySrv } from './HistorySrv'; +import { DashboardModel } from '../../dashboard_model'; jest.mock('app/core/store'); describe('historySrv', () => { diff --git a/public/app/features/dashboard/history/history_srv.ts b/public/app/features/dashboard/components/VersionHistory/HistorySrv.ts similarity index 96% rename from public/app/features/dashboard/history/history_srv.ts rename to public/app/features/dashboard/components/VersionHistory/HistorySrv.ts index 7f7dc950de3..d52f3ab879c 100644 --- a/public/app/features/dashboard/history/history_srv.ts +++ b/public/app/features/dashboard/components/VersionHistory/HistorySrv.ts @@ -1,6 +1,6 @@ import _ from 'lodash'; import coreModule from 'app/core/core_module'; -import { DashboardModel } from '../dashboard_model'; +import { DashboardModel } from '../../dashboard_model'; export interface HistoryListOpts { limit: number; diff --git a/public/app/features/dashboard/specs/history_mocks.ts b/public/app/features/dashboard/components/VersionHistory/__mocks__/history.ts similarity index 100% rename from public/app/features/dashboard/specs/history_mocks.ts rename to public/app/features/dashboard/components/VersionHistory/__mocks__/history.ts diff --git a/public/app/features/dashboard/components/VersionHistory/index.ts b/public/app/features/dashboard/components/VersionHistory/index.ts new file mode 100644 index 00000000000..138de434bf3 --- /dev/null +++ b/public/app/features/dashboard/components/VersionHistory/index.ts @@ -0,0 +1,2 @@ +export { HistoryListCtrl } from './HistoryListCtrl'; +export { HistorySrv } from './HistorySrv'; diff --git a/public/app/features/dashboard/history/history.html b/public/app/features/dashboard/components/VersionHistory/template.html similarity index 100% rename from public/app/features/dashboard/history/history.html rename to public/app/features/dashboard/components/VersionHistory/template.html diff --git a/public/app/features/dashboard/all.ts b/public/app/features/dashboard/index.ts similarity index 96% rename from public/app/features/dashboard/all.ts rename to public/app/features/dashboard/index.ts index 01570ae4744..316b7c5b443 100644 --- a/public/app/features/dashboard/all.ts +++ b/public/app/features/dashboard/index.ts @@ -1,6 +1,5 @@ import './dashboard_ctrl'; import './alerting_srv'; -import './history/history'; import './dashboard_loader_srv'; import './submenu/submenu'; import './save_as_modal'; @@ -27,6 +26,7 @@ import './components/DashExportModal'; import './components/DashNav'; import './components/ExportDataModal'; import './components/FolderPicker'; +import './components/VersionHistory'; // angular wrappers import { react2AngularDirective } from 'app/core/utils/react2angular'; diff --git a/style_guides/frontend.md b/style_guides/frontend.md new file mode 100644 index 00000000000..8d0849506a3 --- /dev/null +++ b/style_guides/frontend.md @@ -0,0 +1,62 @@ +# Frontend Style Guide + +Generally we follow the Airbnb [React Style Guide](https://github.com/airbnb/javascript/tree/master/react). + +## Table of Contents + + 1. [Basic Rules](#basic-rules) + 1. [File & Component Organization](#Organization) + 1. [Naming](#naming) + 1. [Declaration](#declaration) + 1. [Props](#props) + 1. [Refs](#refs) + 1. [Methods](#methods) + 1. [Ordering](#ordering) + +## Basic rules + +* Try to keep files small and focused and break large components up into sub components. + +## Organization + +* Components and types that needs to be used by external plugins needs to go into @grafana/ui +* Components should get their own folder under features/xxx/components + * Sub components can live in that component folders, so not small component needs their own folder + * Place test next to their component file (same dir) + * Mocks in __mocks__ dir + * Test utils in __tests__ dir + * Component sass should live in the same folder as component code +* State logic & domain models should live in features/xxx/state +* Containers (pages) can live in feature root features/xxx + * up for debate? + +## Props + +* Name callback props & handlers with a "on" prefix. + +```tsx +// good +onChange = () => { + +}; + +render() { + return ( + + ); +} + +// bad +handleChange = () => { + +}; + +render() { + return ( + + ); +} +``` + + +