Feature 🎸: Ember Upgrade to 3.28.6

.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

.eslintrc.js

@@ -2,58 +2,65 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
     ecmaFeatures: {
-      legacyDecorators: true
-    }
+      legacyDecorators: true,
+    },
+    requireConfigFile: false,
+    babelOptions: {
+      plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
+    },
   },
-  plugins: [
-    'ember'
-  ],
+  plugins: ['ember'],
   extends: [
     'eslint:recommended',
-    'plugin:ember/recommended'
+    'plugin:ember/recommended',
+    'plugin:prettier/recommended',
   ],
   env: {
-    browser: true
+    browser: true,
   },
   rules: {
     //'ember/new-module-imports': 'off',
     'no-console': 1,
-    'ember/no-observers': 1
+    'ember/no-observers': 1,
   },
   overrides: [
     // node files
     {
       files: [
-        '.eslintrc.js',
-        '.template-lintrc.js',
-        'ember-cli-build.js',
-        'testem.js',
-        'blueprints/*/index.js',
-        'config/**/*.js',
-        'lib/*/index.js',
-        'server/**/*.js'
+        './.eslintrc.js',
+        './.prettierrc.js',
+        './.template-lintrc.js',
+        './ember-cli-build.js',
+        './testem.js',
+        './blueprints/*/index.js',
+        './config/**/*.js',
+        './lib/*/index.js',
+        './server/**/*.js',
       ],
       parserOptions: {
-        sourceType: 'script'
+        sourceType: 'script',
       },
       env: {
         browser: false,
         node: true,
-        es6: true
       },
       plugins: ['node'],
-      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
-        // add your custom rules and overrides for node files here
-
+      extends: ['plugin:node/recommended'],
+      rules: {
         // this can be removed once the following is fixed
         // https://github.com/mysticatea/eslint-plugin-node/issues/77
-        'node/no-unpublished-require': 'off'
-      })
-    }
-  ]
+        'node/no-unpublished-require': 'off',
+      },
+    },
+    {
+      // Test files:
+      files: ['tests/**/*-test.{js,ts}'],
+      extends: ['plugin:qunit/recommended'],
+    },
+  ],
 };

.prettierignore

@@ -24,5 +24,4 @@
 /package-lock.json.ember-try
 /yarn.lock.ember-try
 
-
 .yarn/*

.prettierrc.js

@@ -1,14 +1,8 @@
-// prettier.config.js, .prettierrc.js, prettier.config.cjs, or .prettierrc.cjs
+'use strict';
 
-/**
- * @see https://prettier.io/docs/en/configuration.html
- * @type {import("prettier").Config}
- */
-const config = {
+module.exports = {
   trailingComma: 'es5',
   tabWidth: 2,
   semi: true,
   singleQuote: true,
-}
-
-module.exports = config
+};

TESTING_STRATEGY.md

@@ -0,0 +1,240 @@
+# Bootstrap Migration Testing Strategy
+
+## Overview
+Comprehensive testing approach to ensure Bootstrap migration maintains functionality and visual consistency across the mdEditor application.
+
+## Testing Phases
+
+### Phase 1: Pre-Migration Baseline
+- [ ] Capture visual snapshots of all major pages/components
+- [ ] Document current responsive behavior
+- [ ] Create component interaction test cases
+- [ ] Establish accessibility baseline scores
+
+### Phase 2: Component-Level Testing
+- [ ] Unit test each migrated component
+- [ ] Visual regression testing per component
+- [ ] Responsive behavior validation
+- [ ] Accessibility impact assessment
+
+### Phase 3: Integration Testing  
+- [ ] End-to-end user workflow testing
+- [ ] Cross-component interaction testing
+- [ ] Performance impact assessment
+- [ ] Browser compatibility testing
+
+## Testing Tools & Setup
+
+### Visual Regression Testing
+**Recommended: Percy.io or Chromatic**
+```bash
+# Setup example for Percy
+npm install --save-dev @percy/cli @percy/ember
+```
+
+**Test Configuration:**
+- Capture full page screenshots
+- Test multiple viewport sizes (mobile, tablet, desktop)
+- Include hover and focus states
+- Test dark/light theme variations if applicable
+
+### Responsive Testing Matrix
+| Breakpoint | Width | Test Scenarios |
+|------------|-------|----------------|
+| Mobile | 375px | Navigation collapse, form layout, grid stacking |
+| Tablet | 768px | Grid behavior, navbar changes, card layouts |
+| Desktop | 1200px | Full layout, all columns visible |
+| Large | 1600px | Custom xxl/xxxl grid behavior |
+
+### Browser Compatibility Matrix
+| Browser | Versions | Priority | Notes |
+|---------|----------|----------|-------|
+| Chrome | Latest 2 | High | Primary development browser |
+| Firefox | Latest 2 | High | Standards compliance |
+| Safari | Latest 2 | High | WebKit rendering engine |
+| Edge | Latest 2 | Medium | Chromium-based |
+| IE11 | 11 | Low | Legacy support (if required) |
+
+## Component Test Checklist
+
+### Grid System
+- [ ] Column widths at all breakpoints
+- [ ] Offset behavior  
+- [ ] Custom xxl/xxxl breakpoints
+- [ ] Nested grid behavior
+- [ ] Row gutters and spacing
+
+### Navigation
+- [ ] Navbar collapse/expand on mobile
+- [ ] Dropdown menu behavior
+- [ ] Active state styling
+- [ ] Breadcrumb navigation
+- [ ] Sidebar navigation functionality
+
+### Forms
+- [ ] Form control styling and sizing
+- [ ] Input group components
+- [ ] Validation state displays
+- [ ] Form layout (horizontal/vertical)
+- [ ] Date picker integration
+- [ ] File upload components
+
+### Buttons & Interactive Elements
+- [ ] Button sizes and variants
+- [ ] Button group behavior
+- [ ] Hover and focus states
+- [ ] Disabled state styling
+- [ ] Toggle functionality
+
+### Cards/Panels
+- [ ] Card layouts and spacing
+- [ ] Header/body/footer sections
+- [ ] Card groups and columns
+- [ ] Collapse/expand functionality
+- [ ] Color variants
+
+### Modals & Overlays
+- [ ] Modal opening/closing
+- [ ] Modal sizing options
+- [ ] Backdrop behavior
+- [ ] Scrolling with long content
+- [ ] Nested modal scenarios
+
+### Tables
+- [ ] Responsive table behavior
+- [ ] Striped and hover effects
+- [ ] Sorting functionality
+- [ ] Pagination controls
+- [ ] Column resizing
+
+## User Workflow Testing
+
+### Critical User Paths
+1. **Metadata Creation Workflow**
+   - [ ] Create new record
+   - [ ] Navigate through all form sections
+   - [ ] Save and validate
+   - [ ] Preview functionality
+
+2. **Data Import/Export**
+   - [ ] File upload interface
+   - [ ] Progress indicators
+   - [ ] Error handling displays
+   - [ ] Export format selection
+
+3. **Navigation & Search**
+   - [ ] Menu navigation
+   - [ ] Search functionality
+   - [ ] Filter applications  
+   - [ ] Results display
+
+4. **Settings & Configuration**
+   - [ ] User preferences
+   - [ ] System configuration
+   - [ ] Profile management
+
+## Automated Testing Implementation
+
+### QUnit Integration
+```javascript
+// Example component test
+test('bootstrap button component renders correctly', function(assert) {
+  this.render(hbs`{{md-button text="Test" type="primary"}}`);
+
+  assert.dom('.btn').exists('Button element exists');
+  assert.dom('.btn-primary').exists('Primary class applied');
+  assert.dom('.btn').hasText('Test', 'Button text correct');
+});
+```
+
+### Visual Regression Setup
+```javascript
+// Percy snapshot example
+import percySnapshot from '@percy/ember';
+
+test('metadata form layout', async function(assert) {
+  await visit('/metadata/new');
+  await percySnapshot('Metadata Form - Desktop');
+
+  // Test mobile layout
+  await resizeWindow(375, 667);
+  await percySnapshot('Metadata Form - Mobile');
+});
+```
+
+## Performance Testing
+
+### Metrics to Track
+- [ ] CSS bundle size reduction
+- [ ] JavaScript bundle impact
+- [ ] First Contentful Paint (FCP)
+- [ ] Largest Contentful Paint (LCP)
+- [ ] Cumulative Layout Shift (CLS)
+
+### Testing Tools
+- Lighthouse CI for automated performance testing
+- WebPageTest for detailed analysis
+- Bundle analyzer for size optimization
+
+## Accessibility Testing
+
+### Automated Tools
+- [ ] axe-core integration
+- [ ] WAVE browser extension
+- [ ] Lighthouse accessibility audit
+
+### Manual Testing
+- [ ] Screen reader testing (NVDA, JAWS, VoiceOver)
+- [ ] Keyboard navigation testing
+- [ ] Focus management verification
+- [ ] Color contrast validation
+
+### Accessibility Checklist
+- [ ] Semantic HTML structure maintained
+- [ ] ARIA labels and descriptions
+- [ ] Focus indicators visible
+- [ ] Color not sole means of conveying information
+- [ ] Proper heading hierarchy
+
+## Rollback Criteria
+
+### Critical Issues Requiring Rollback
+- [ ] > 10% performance degradation
+- [ ] Major accessibility regressions
+- [ ] Core workflow breakage
+- [ ] Cross-browser compatibility failures
+- [ ] Visual regressions in critical components
+
+## Testing Schedule
+
+### Weekly Testing Cycles
+**Week 1-2: Pre-migration**
+- Baseline establishment
+- Tool setup and configuration
+
+**Week 3-6: Bootstrap 4 Migration**  
+- Component-by-component testing
+- Weekly visual regression runs
+- Performance monitoring
+
+**Week 7-8: SCSS Reduction**
+- Impact assessment testing
+- Bundle size optimization verification
+
+**Week 9-12: Bootstrap 5 Migration**
+- JavaScript functionality testing
+- Accessibility audit
+- Cross-browser validation
+
+**Week 13-14: Final Testing**
+- Complete user workflow testing
+- Performance benchmarking
+- Final accessibility audit
+
+## Success Criteria
+- [ ] Zero critical functionality regressions
+- [ ] Visual consistency maintained (< 5% acceptable variance)
+- [ ] Performance maintained or improved
+- [ ] Accessibility scores maintained or improved
+- [ ] All supported browsers pass testing matrix
+- [ ] User acceptance testing completed successfully

app/adapters/application.js

@@ -1,7 +1,9 @@
+import classic from 'ember-classic-decorator';
 import Adapter from 'ember-local-storage/adapters/adapter';
 import { v4 } from 'uuid';
 
-export default Adapter.extend({
+@classic
+export default class Application extends Adapter {
   generateIdForRecord(store, type, inputProperties) {
     if (inputProperties.id) {
       return inputProperties.id;
@@ -13,5 +15,5 @@ export default Adapter.extend({
       return shortId;
     }
     return inputProperties.uuid.split('-')[0];
-  },
-});
+  }
+}