Revamp Copy Pull Command

src/portal/src/app/base/harbor-shell/harbor-shell.component.html

@@ -201,6 +201,7 @@
     </div>
 </clr-main-container>
 <account-settings-modal></account-settings-modal>
+<preference-settings></preference-settings>
 <password-setting></password-setting>
 <global-confirmation-dialog></global-confirmation-dialog>
 <about-dialog></about-dialog>

src/portal/src/app/base/harbor-shell/harbor-shell.component.spec.ts

@@ -18,77 +18,88 @@ import { SkinableConfig } from '../../services/skinable-config.service';
 import { AppConfigService } from '../../services/app-config.service';
 import { ErrorHandler } from '../../shared/units/error-handler';
 import { AccountSettingsModalComponent } from '../account-settings/account-settings-modal.component';
+import { PreferenceSettingsComponent } from '../preference-settings/preference-settings.component';
 import { InlineAlertComponent } from '../../shared/components/inline-alert/inline-alert.component';
 import { ScannerService } from '../../../../ng-swagger-gen/services/scanner.service';
 import { UserService } from '../../../../ng-swagger-gen/services/user.service';
 
+// Mocks
+const fakeSessionService = {
+    getCurrentUser: function () {
+        return { has_admin_role: true };
+    },
+};
+
+const fakeSearchTriggerService = {
+    searchTriggerChan$: of('null'),
+    searchCloseChan$: of(null),
+};
+
+const mockMessageHandlerService = null;
+
+const mockPasswordSettingService = null;
+
+const mockSkinableConfig = {
+    getSkinConfig: function () {
+        return {
+            headerBgColor: {
+                darkMode: '',
+                lightMode: '',
+            },
+            loginBgImg: '',
+            loginTitle: '',
+            product: {
+                name: '',
+                logo: '',
+                introduction: '',
+            },
+        };
+    },
+};
+
+const fakeAppConfigService = {
+    isLdapMode: function () {
+        return true;
+    },
+    isHttpAuthMode: function () {
+        return false;
+    },
+    isOidcMode: function () {
+        return false;
+    },
+    getConfig: function () {
+        return {
+            with_trivy: true,
+        };
+    },
+};
+
+const fakedUserService = {
+    getCurrentUserInfo() {
+        return of({});
+    },
+    setCliSecret() {
+        return of(null);
+    },
+};
+
 describe('HarborShellComponent', () => {
     let component: HarborShellComponent;
     let fixture: ComponentFixture<HarborShellComponent>;
-    let fakeSessionService = {
-        getCurrentUser: function () {
-            return { has_admin_role: true };
-        },
-    };
-    let fakeSearchTriggerService = {
-        searchTriggerChan$: of('null'),
-        searchCloseChan$: of(null),
-    };
-    let mockMessageHandlerService = null;
-    let mockPasswordSettingService = null;
-    let mockSkinableConfig = {
-        getSkinConfig: function () {
-            return {
-                headerBgColor: {
-                    darkMode: '',
-                    lightMode: '',
-                },
-                loginBgImg: '',
-                loginTitle: '',
-                product: {
-                    name: '',
-                    logo: '',
-                    introduction: '',
-                },
-            };
-        },
-    };
-    let fakeAppConfigService = {
-        isLdapMode: function () {
-            return true;
-        },
-        isHttpAuthMode: function () {
-            return false;
-        },
-        isOidcMode: function () {
-            return false;
-        },
-        getConfig: function () {
-            return {
-                with_trivy: true,
-            };
-        },
-    };
-    const fakedUserService = {
-        getCurrentUserInfo() {
-            return of({});
-        },
-        setCliSecret() {
-            return of(null);
-        },
-    };
+
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [
                 RouterTestingModule,
-                TranslateModule.forRoot(),
+                TranslateModule.forRoot(), // Ensure TranslateModule is imported
                 ClarityModule,
                 BrowserAnimationsModule,
                 FormsModule,
             ],
             declarations: [
                 HarborShellComponent,
                 AccountSettingsModalComponent,
+                PreferenceSettingsComponent,
                 PasswordSettingComponent,
                 AboutDialogComponent,
                 InlineAlertComponent,
@@ -105,10 +116,7 @@ describe('HarborShellComponent', () => {
                     provide: MessageHandlerService,
                     useValue: mockMessageHandlerService,
                 },
-                {
-                    provide: UserService,
-                    useValue: fakedUserService,
-                },
+                { provide: UserService, useValue: fakedUserService },
                 {
                     provide: PasswordSettingService,
                     useValue: mockPasswordSettingService,
@@ -128,6 +136,9 @@ describe('HarborShellComponent', () => {
         ).componentInstance;
         component.accountSettingsModal.inlineAlert =
             TestBed.createComponent(InlineAlertComponent).componentInstance;
+        component.prefSetting = TestBed.createComponent(
+            PreferenceSettingsComponent
+        ).componentInstance;
         component.pwdSetting = TestBed.createComponent(
             PasswordSettingComponent
         ).componentInstance;
@@ -139,6 +150,7 @@ describe('HarborShellComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
     it('should open users profile', async () => {
         component.openModal({
             modalName: modalEvents.USER_PROFILE,
@@ -149,7 +161,18 @@ describe('HarborShellComponent', () => {
             fixture.nativeElement.querySelector('#account_settings_username');
         expect(accountSettingsUsernameInput).toBeTruthy();
     });
-    it('should open users changPwd', async () => {
+
+    it('should open users preferences', async () => {
+        component.openModal({
+            modalName: modalEvents.PREFERENCES,
+            modalFlag: false,
+        });
+        await fixture.whenStable();
+        const dropdowns = fixture.nativeElement.querySelector('.dropdowns');
+        expect(dropdowns).toBeTruthy();
+    });
+
+    it('should open users changePwd', async () => {
         component.openModal({
             modalName: modalEvents.CHANGE_PWD,
             modalFlag: false,
@@ -159,6 +182,7 @@ describe('HarborShellComponent', () => {
             fixture.nativeElement.querySelector('#oldPassword');
         expect(oldPasswordInput).toBeTruthy();
     });
+
     it('should open users about-dialog', async () => {
         component.openModal({ modalName: modalEvents.ABOUT, modalFlag: false });
         await fixture.whenStable();

src/portal/src/app/base/harbor-shell/harbor-shell.component.ts

@@ -37,6 +37,7 @@ import { THEME_ARRAY, ThemeInterface } from '../../services/theme';
 import { clone } from '../../shared/units/utils';
 import { ThemeService } from '../../services/theme.service';
 import { AccountSettingsModalComponent } from '../account-settings/account-settings-modal.component';
+import { PreferenceSettingsComponent } from '../preference-settings/preference-settings.component';
 import {
     EventService,
     HarborEvent,
@@ -53,6 +54,9 @@ export class HarborShellComponent implements OnInit, OnDestroy {
     @ViewChild(AccountSettingsModalComponent)
     accountSettingsModal: AccountSettingsModalComponent;
 
+    @ViewChild(PreferenceSettingsComponent)
+    prefSetting: PreferenceSettingsComponent;
+
     @ViewChild(PasswordSettingComponent)
     pwdSetting: PasswordSettingComponent;
 
@@ -176,6 +180,9 @@ export class HarborShellComponent implements OnInit, OnDestroy {
             case modalEvents.USER_PROFILE:
                 this.accountSettingsModal.open();
                 break;
+            case modalEvents.PREFERENCES:
+                this.prefSetting.open();
+                break;
             case modalEvents.CHANGE_PWD:
                 this.pwdSetting.open();
                 break;

src/portal/src/app/base/modal-events.const.ts

@@ -13,6 +13,7 @@
 // limitations under the License.
 export const modalEvents = {
     USER_PROFILE: 'USER_PROFILE',
+    PREFERENCES: 'PREFERENCES',
     CHANGE_PWD: 'CHANGE_PWD',
     ABOUT: 'ABOUT',
 };