Merge pull request #3085 from codecrafters-io/add-admin-panel-link-dropdown

Move admin panel link to account dropdown

Author: rohitpaulk

app/components/header/account-dropdown.hbs

@@ -70,6 +70,11 @@
         <DarkModeToggleWithUpgradePrompt @size="small" />
       </div>
 
+      {{#if this.currentUser.isAdmin}}
+        <div class="h-px mt-2 mb-2 ml-3 mr-3 bg-gray-200 dark:bg-white/5" />
+        <DropdownLink @text="Admin Panel" @icon="cog" {{on "click" (fn this.handleAdminPanelLinkClick dd.actions)}} />
+      {{/if}}
+
       <div class="h-px mt-2 mb-2 ml-3 mr-3 bg-gray-200 dark:bg-white/5" />
 
       <DropdownLink @text="Logout" @icon="logout" {{on "click" this.handleLogoutClick}} />

app/components/header/account-dropdown.ts

@@ -8,6 +8,7 @@ import type Store from '@ember-data/store';
 import type TeamModel from 'codecrafters-frontend/models/team';
 import type FeatureFlagsService from 'codecrafters-frontend/services/feature-flags';
 import type DarkModeService from 'codecrafters-frontend/services/dark-mode';
+import config from 'codecrafters-frontend/config/environment';
 
 export default class AccountDropdown extends Component {
   @service declare authenticator: AuthenticatorService;
@@ -20,6 +21,12 @@ export default class AccountDropdown extends Component {
     return this.authenticator.currentUser;
   }
 
+  @action
+  handleAdminPanelLinkClick(dropdownActions: { close: () => void }) {
+    dropdownActions.close();
+    window.open(`${config.x.backendUrl}/admin`, '_blank');
+  }
+
   @action
   handleCreateTeamClick(dropdownActions: { close: () => void }) {
     dropdownActions.close();

app/components/header/index.ts

@@ -1,18 +1,17 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
-import { htmlSafe } from '@ember/template';
-import { next } from '@ember/runloop';
+import PromotionalDiscountModel from 'codecrafters-frontend/models/promotional-discount';
 import logoImage from '/assets/images/logo/logomark-color.svg';
-import config from 'codecrafters-frontend/config/environment';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 import type ContainerWidthService from 'codecrafters-frontend/services/container-width';
 import type FeatureFlagsService from 'codecrafters-frontend/services/feature-flags';
 import type RouterService from '@ember/routing/router-service';
 import type VersionTrackerService from 'codecrafters-frontend/services/version-tracker';
-import PromotionalDiscountModel from 'codecrafters-frontend/models/promotional-discount';
 import type { SafeString } from '@ember/template/-private/handlebars';
+import { action } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+import { inject as service } from '@ember/service';
+import { next } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -35,10 +34,6 @@ export default class Header extends Component<Signature> {
     return this.currentUser?.activeDiscountForYearlyPlan || null;
   }
 
-  get adminPanelLink() {
-    return `${config.x.backendUrl}/admin`;
-  }
-
   get currentUser() {
     return this.authenticator.currentUser;
   }
@@ -65,10 +60,6 @@ export default class Header extends Component<Signature> {
       { text: 'Roadmap', route: 'roadmap', type: 'route' },
     ];
 
-    if (this.currentUser && this.currentUser.isAdmin) {
-      links.push({ text: 'Admin', route: this.adminPanelLink, type: 'link' });
-    }
-
     return links;
   }