[ENG-8622] Feat/added context sentence to connected Add-ons

src/app/features/project/addons/addons.component.html

@@ -48,6 +48,9 @@
         }
       </p-tabpanel>
       <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
+        <p>
+          {{ 'settings.addons.connectedDescription' | translate }}
+        </p>
         <osf-search-input
           class="flex-1"
           [control]="searchControl"

src/app/features/project/addons/addons.component.spec.ts

@@ -36,4 +36,22 @@ describe('AddonsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render the connected description paragraph', () => {
+    component['selectedTab'].set(component['AddonTabValue'].ALL_ADDONS);
+    fixture.detectChanges();
+    const compiled: HTMLElement = fixture.nativeElement;
+    const p = compiled.querySelector('p');
+    expect(p).toBeTruthy();
+    expect(p?.textContent?.trim()).toContain('settings.addons.description');
+  });
+
+  it('should render the connected description paragraph', () => {
+    component['selectedTab'].set(component['AddonTabValue'].CONNECTED_ADDONS);
+    fixture.detectChanges();
+    const compiled: HTMLElement = fixture.nativeElement;
+    const p = compiled.querySelector('p');
+    expect(p).toBeTruthy();
+    expect(p?.textContent?.trim()).toContain('settings.addons.connectedDescription');
+  });
 });

src/app/features/settings/addons/addons.component.html

@@ -52,6 +52,9 @@
       </p-tabpanel>
 
       <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
+        <p>
+          {{ 'settings.addons.connectedDescription' | translate }}
+        </p>
         <osf-search-input
           class="flex-1"
           [control]="searchControl"

src/app/features/settings/addons/addons.component.spec.ts

@@ -61,4 +61,22 @@ describe('AddonsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render the connected description paragraph', () => {
+    component['selectedTab'].set(component['AddonTabValue'].ALL_ADDONS);
+    fixture.detectChanges();
+    const compiled: HTMLElement = fixture.nativeElement;
+    const p = compiled.querySelector('p');
+    expect(p).toBeTruthy();
+    expect(p?.textContent?.trim()).toContain('settings.addons.description');
+  });
+
+  it('should render the connected description paragraph', () => {
+    component['selectedTab'].set(component['AddonTabValue'].CONNECTED_ADDONS);
+    fixture.detectChanges();
+    const compiled: HTMLElement = fixture.nativeElement;
+    const p = compiled.querySelector('p');
+    expect(p).toBeTruthy();
+    expect(p?.textContent?.trim()).toContain('settings.addons.connectedDescription');
+  });
 });

src/assets/i18n/en.json

@@ -1423,6 +1423,7 @@
         "title": "Add-ons"
       },
       "description": "Sync your projects with external services to help stay connected and organized. Select a category and browse the options. Add-ons can also be linked directly from Project page.",
+      "connectedDescription": "Manage your connected Add-ons, re-authorize, disconnect account, or disconnect project",
       "tabs": {
         "allAddons": "All Add-ons",
         "connectedAddons": "Connected Add-ons"