PascalCase files (#6955)

* PascalCase files

* git mv for file name change

* renamed files

* merge changes from master

* fix: template name

* sort imports

---------

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     _: 'readonly'
   },
-  plugins: ['prettier', 'simple-import-sort'],
+  plugins: ['prettier', 'unicorn', 'simple-import-sort'],
   extends: [
     'eslint:recommended',
     'plugin:compat/recommended',
@@ -145,6 +145,17 @@ module.exports = {
     'no-implicit-coercion': 'error',
     //https://eslint.org/docs/rules/no-unneeded-ternary
     'no-unneeded-ternary': 'error',
+    "unicorn/filename-case": [
+      "error",
+      {
+        "cases": {
+          "pascalCase": true
+        },
+        "ignore": [
+          "^.*\\.js$"
+        ]
+      }
+    ],
     'vue/first-attribute-linebreak': 'error',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/singleline-html-element-content-newline': 'off',

package.json

@@ -30,6 +30,7 @@
     "eslint-plugin-playwright": "0.12.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-simple-import-sort": "10.0.0",
+    "eslint-plugin-unicorn": "44.0.2",
     "eslint-plugin-vue": "9.15.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
     "eventemitter3": "1.2.0",

src/api/forms/components/controls/Locator.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import MctTree from '@/ui/layout/mct-tree.vue';
+import MctTree from '@/ui/layout/MctTree.vue';
 
 export default {
   components: {

src/plugins/LADTable/LADTableConfigurationViewProvider.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import LADTableConfigurationComponent from './components/LADTableConfiguration.vue';
+import LadTableConfiguration from './components/LadTableConfiguration.vue';
 
 export default function LADTableConfigurationViewProvider(openmct) {
   return {
@@ -46,12 +46,12 @@ export default function LADTableConfigurationViewProvider(openmct) {
             {
               el: element,
               components: {
-                LADTableConfiguration: LADTableConfigurationComponent
+                LadTableConfiguration
               },
               provide: {
                 openmct
               },
-              template: '<LADTableConfiguration />'
+              template: '<LadTableConfiguration />'
             },
             {
               app: openmct.app,

src/plugins/LADTable/LADTableView.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import LadTable from './components/LADTable.vue';
+import LadTable from './components/LadTable.vue';
 import LADTableConfiguration from './LADTableConfiguration';
 
 export default class LADTableView {

src/plugins/LADTable/components/LadTable.vue

@@ -53,7 +53,7 @@ import Vue, { toRaw } from 'vue';
 
 import StalenessUtils from '@/utils/staleness';
 
-import LadRow from './LADRow.vue';
+import LadRow from './LadRow.vue';
 
 export default {
   components: {

src/plugins/LADTable/components/LadTableSet.vue

@@ -58,7 +58,7 @@
 <script>
 import StalenessUtils from '@/utils/staleness';
 
-import LadRow from './LADRow.vue';
+import LadRow from './LadRow.vue';
 
 export default {
   components: {

src/plugins/clearData/plugin.js

@@ -22,7 +22,7 @@
 import mount from 'utils/mount';
 
 import ClearDataAction from './ClearDataAction';
-import GlobalClearIndicator from './components/globalClearIndicator.vue';
+import GlobalClearIndicator from './components/GlobalClearIndicator.vue';
 
 export default function plugin(appliesToObjects, options = { indicator: true }) {
   let installIndicator = options.indicator;

src/plugins/condition/components/inspector/StyleEditor.vue

@@ -88,9 +88,9 @@
 <script>
 import { STYLE_CONSTANTS } from '@/plugins/condition/utils/constants';
 import { getStylesWithoutNoneValue } from '@/plugins/condition/utils/styleUtils';
-import ToolbarButton from '@/ui/toolbar/components/toolbar-button.vue';
-import ToolbarColorPicker from '@/ui/toolbar/components/toolbar-color-picker.vue';
-import ToolbarToggleButton from '@/ui/toolbar/components/toolbar-toggle-button.vue';
+import ToolbarButton from '@/ui/toolbar/components/ToolbarButton.vue';
+import ToolbarColorPicker from '@/ui/toolbar/components/ToolbarColorPicker.vue';
+import ToolbarToggleButton from '@/ui/toolbar/components/ToolbarToggleButton.vue';
 
 export default {
   name: 'StyleEditor',

src/plugins/faultManagement/FaultManagementSearch.vue

@@ -40,7 +40,7 @@
 
 <script>
 import SelectField from '@/api/forms/components/controls/SelectField.vue';
-import Search from '@/ui/components/search.vue';
+import Search from '@/ui/components/Search.vue';
 
 import { FILTER_ITEMS } from './constants';
 

src/plugins/flexibleLayout/components/Container.vue

@@ -75,9 +75,9 @@
 </template>
 
 <script>
-import DropHint from './dropHint.vue';
-import FrameComponent from './frame.vue';
-import ResizeHandle from './resizeHandle.vue';
+import DropHint from './DropHint.vue';
+import FrameComponent from './Frame.vue';
+import ResizeHandle from './ResizeHandle.vue';
 
 const MIN_FRAME_SIZE = 5;
 

src/plugins/flexibleLayout/components/FlexibleLayout.vue

@@ -81,9 +81,9 @@
 <script>
 import Container from '../utils/container';
 import Frame from '../utils/frame';
-import ContainerComponent from './container.vue';
-import DropHint from './dropHint.vue';
-import ResizeHandle from './resizeHandle.vue';
+import ContainerComponent from './Container.vue';
+import DropHint from './DropHint.vue';
+import ResizeHandle from './ResizeHandle.vue';
 
 const MIN_CONTAINER_SIZE = 5;
 

src/plugins/flexibleLayout/flexibleLayoutViewProvider.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import FlexibleLayoutComponent from './components/flexibleLayout.vue';
+import FlexibleLayoutComponent from './components/FlexibleLayout.vue';
 
 const FLEXIBLE_LAYOUT_KEY = 'flexible-layout';
 export default class FlexibleLayoutViewProvider {

src/plugins/imagery/components/Compass/Compass.vue

@@ -22,7 +22,7 @@
 
 <template>
   <div class="c-compass" :style="`width: 100%; height: 100%`">
-    <CompassHUD
+    <compass-hud
       :camera-angle-of-view="cameraAngleOfView"
       :heading="heading"
       :camera-azimuth="cameraAzimuth"
@@ -45,13 +45,13 @@
 </template>
 
 <script>
-import CompassHUD from './CompassHUD.vue';
+import CompassHud from './CompassHud.vue';
 import CompassRose from './CompassRose.vue';
 import { rotate } from './utils';
 
 export default {
   components: {
-    CompassHUD,
+    CompassHud,
     CompassRose
   },
   props: {

src/plugins/inspectorViews/elements/ElementsPool.vue

@@ -53,7 +53,7 @@
 <script>
 import _ from 'lodash';
 
-import Search from '../../../ui/components/search.vue';
+import Search from '../../../ui/components/Search.vue';
 import ElementItem from './ElementItem.vue';
 
 export default {

src/plugins/inspectorViews/elements/PlotElementsPool.vue

@@ -71,7 +71,7 @@
 <script>
 import _ from 'lodash';
 
-import Search from '../../../ui/components/search.vue';
+import Search from '../../../ui/components/Search.vue';
 import configStore from '../../plot/configuration/ConfigStore';
 import ElementItem from './ElementItem.vue';
 import ElementItemGroup from './ElementItemGroup.vue';

src/plugins/inspectorViews/styles/StylesInspectorView.vue

@@ -36,14 +36,14 @@
 <script>
 import StylesView from '@/plugins/condition/components/inspector/StylesView.vue';
 
-import multipane from '../../../ui/layout/multipane.vue';
-import pane from '../../../ui/layout/pane.vue';
+import Multipane from '../../../ui/layout/Multipane.vue';
+import Pane from '../../../ui/layout/Pane.vue';
 import SavedStylesInspectorView from './SavedStylesInspectorView.vue';
 
 export default {
   components: {
-    multipane,
-    pane,
+    Multipane,
+    Pane,
     StylesView,
     SavedStylesInspectorView
   },

src/plugins/notebook/components/Notebook.vue

@@ -157,7 +157,7 @@
 <script>
 import { debounce } from 'lodash';
 
-import Search from '@/ui/components/search.vue';
+import Search from '@/ui/components/Search.vue';
 
 import ProgressBar from '../../../ui/components/ProgressBar.vue';
 import objectLink from '../../../ui/mixins/object-link';
@@ -184,7 +184,6 @@ import {
 import NotebookEntry from './NotebookEntry.vue';
 import SearchResults from './SearchResults.vue';
 import Sidebar from './Sidebar.vue';
-
 function objectCopy(obj) {
   return JSON.parse(JSON.stringify(obj));
 }

src/plugins/tabs/tabs.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import TabsComponent from './components/tabs.vue';
+import TabsComponent from './components/Tabs.vue';
 
 const TABS_KEY = 'tabs';
 export default class Tabs {

src/plugins/telemetryTable/TableConfigurationViewProvider.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import TableConfigurationComponent from './components/table-configuration.vue';
+import TableConfigurationComponent from './components/TableConfiguration.vue';
 import TelemetryTableConfiguration from './TelemetryTableConfiguration';
 
 export default function TableConfigurationViewProvider(openmct) {

src/plugins/telemetryTable/TelemetryTableView.js

@@ -1,6 +1,6 @@
 import mount from 'utils/mount';
 
-import TableComponent from './components/table.vue';
+import TableComponent from './components/Table.vue';
 import TelemetryTable from './TelemetryTable';
 
 export default class TelemetryTableView {

src/plugins/telemetryTable/components/Table.vue

@@ -278,12 +278,12 @@ import { toRaw } from 'vue';
 
 import CSVExporter from '../../../exporters/CSVExporter.js';
 import ProgressBar from '../../../ui/components/ProgressBar.vue';
-import search from '../../../ui/components/search.vue';
+import Search from '../../../ui/components/Search.vue';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
-import SizingRow from './sizing-row.vue';
-import TableColumnHeader from './table-column-header.vue';
-import TableFooterIndicator from './table-footer-indicator.vue';
-import TelemetryTableRow from './table-row.vue';
+import SizingRow from './SizingRow.vue';
+import TableColumnHeader from './TableColumnHeader.vue';
+import TableFooterIndicator from './TableFooterIndicator.vue';
+import TelemetryTableRow from './TableRow.vue';
 
 const VISIBLE_ROW_COUNT = 100;
 const ROW_HEIGHT = 17;
@@ -294,7 +294,7 @@ export default {
   components: {
     TelemetryTableRow,
     TableColumnHeader,
-    search,
+    Search,
     TableFooterIndicator,
     ToggleSwitch,
     SizingRow,

src/plugins/telemetryTable/components/TableRow.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import TableCell from './table-cell.vue';
+import TableCell from './TableCell.vue';
 
 export default {
   components: {

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -51,7 +51,7 @@
 import _ from 'lodash';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants';
-import TimePopupFixed from './timePopupFixed.vue';
+import TimePopupFixed from './TimePopupFixed.vue';
 
 export default {
   components: {

src/plugins/timeConductor/ConductorInputsRealtime.vue

@@ -58,7 +58,7 @@
 import _ from 'lodash';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants';
-import TimePopupRealtime from './timePopupRealtime.vue';
+import TimePopupRealtime from './TimePopupRealtime.vue';
 
 const DEFAULT_DURATION_FORMATTER = 'duration';
 

src/ui/layout/Layout.vue

@@ -159,9 +159,9 @@ import Toolbar from '../toolbar/Toolbar.vue';
 import AppLogo from './AppLogo.vue';
 import BrowseBar from './BrowseBar.vue';
 import CreateButton from './CreateButton.vue';
-import MctTree from './mct-tree.vue';
-import multipane from './multipane.vue';
-import pane from './pane.vue';
+import MctTree from './MctTree.vue';
+import Multipane from './Multipane.vue';
+import Pane from './Pane.vue';
 import RecentObjectsList from './RecentObjectsList.vue';
 import GrandSearch from './search/GrandSearch.vue';
 import Indicators from './status-bar/Indicators.vue';
@@ -174,8 +174,8 @@ export default {
     ObjectView,
     CreateButton,
     GrandSearch,
-    multipane,
-    pane,
+    Multipane,
+    Pane,
     BrowseBar,
     Toolbar,
     AppLogo,

src/ui/layout/MctTree.vue

@@ -118,8 +118,8 @@
 import _ from 'lodash';
 import { markRaw, reactive } from 'vue';
 
-import search from '../components/search.vue';
-import treeItem from './tree-item.vue';
+import Search from '../components/Search.vue';
+import TreeItem from './TreeItem.vue';
 
 const ITEM_BUFFER = 25;
 const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
@@ -130,8 +130,8 @@ const LOCATOR_ITEM_COUNT_HEIGHT = 10; // how many tree items to make the locator
 export default {
   name: 'MctTree',
   components: {
-    search,
-    treeItem
+    Search,
+    TreeItem
   },
   inject: ['openmct'],
   props: {

src/ui/layout/TreeItem.vue

@@ -63,12 +63,12 @@
 
 <script>
 import ObjectLabel from '../components/ObjectLabel.vue';
-import viewControl from '../components/viewControl.vue';
+import ViewControl from '../components/ViewControl.vue';
 
 export default {
   name: 'TreeItem',
   components: {
-    viewControl,
+    ViewControl,
     ObjectLabel
   },
   inject: ['openmct'],

src/ui/layout/search/GrandSearch.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import search from '../../components/search.vue';
+import Search from '../../components/Search.vue';
 import SearchResultsDropDown from './SearchResultsDropDown.vue';
 
 const SEARCH_DEBOUNCE_TIME = 200;
@@ -44,7 +44,7 @@ const SEARCH_DEBOUNCE_TIME = 200;
 export default {
   name: 'GrandSearch',
   components: {
-    search,
+    Search,
     SearchResultsDropDown
   },
   inject: ['openmct'],

src/ui/preview/Preview.vue

@@ -37,7 +37,7 @@
 import StyleRuleManager from '@/plugins/condition/StyleRuleManager';
 import { STYLE_CONSTANTS } from '@/plugins/condition/utils/constants';
 
-import PreviewHeader from './preview-header.vue';
+import PreviewHeader from './PreviewHeader.vue';
 
 export default {
   components: {

src/ui/preview/PreviewHeader.vue

@@ -59,7 +59,7 @@
 <script>
 import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
 
-import ViewSwitcher from '../../ui/layout/ViewSwitcher.vue';
+import ViewSwitcher from '../layout/ViewSwitcher.vue';
 
 const HIDDEN_ACTIONS = ['remove', 'move', 'preview', 'large.view'];
 

src/ui/toolbar/Toolbar.vue

@@ -47,25 +47,25 @@
 <script>
 import _ from 'lodash';
 
-import toolbarButton from './components/toolbar-button.vue';
-import toolbarCheckbox from './components/toolbar-checkbox.vue';
-import toolbarColorPicker from './components/toolbar-color-picker.vue';
-import toolbarInput from './components/toolbar-input.vue';
-import toolbarMenu from './components/toolbar-menu.vue';
-import toolbarSelectMenu from './components/toolbar-select-menu.vue';
-import toolbarSeparator from './components/toolbar-separator.vue';
-import toolbarToggleButton from './components/toolbar-toggle-button.vue';
+import ToolbarButton from './components/ToolbarButton.vue';
+import ToolbarCheckbox from './components/ToolbarCheckbox.vue';
+import ToolbarColorPicker from './components/ToolbarColorPicker.vue';
+import ToolbarInput from './components/ToolbarInput.vue';
+import ToolbarMenu from './components/ToolbarMenu.vue';
+import ToolbarSelectMenu from './components/ToolbarSelectMenu.vue';
+import ToolbarSeparator from './components/ToolbarSeparator.vue';
+import ToolbarToggleButton from './components/ToolbarToggleButton.vue';
 
 export default {
   components: {
-    toolbarButton,
-    toolbarColorPicker,
-    toolbarCheckbox,
-    toolbarInput,
-    toolbarMenu,
-    toolbarSelectMenu,
-    toolbarSeparator,
-    toolbarToggleButton
+    ToolbarButton,
+    ToolbarColorPicker,
+    ToolbarCheckbox,
+    ToolbarInput,
+    ToolbarMenu,
+    ToolbarSelectMenu,
+    ToolbarSeparator,
+    ToolbarToggleButton
   },
   inject: ['openmct'],
   data: function () {