From 7ef2acc11ad43ec1880a73c7681220de57218861 Mon Sep 17 00:00:00 2001 From: aj-rosado <109146700+aj-rosado@users.noreply.github.com> Date: Mon, 31 Jul 2023 12:04:33 +0100 Subject: [PATCH] [PM-2804] Migrate Send List to Component Library (#5796) * Migrate Send list html to use Component Library and TailWind * Added ComponentLibrary search module to Send * Updated the No-Items on Send List to the new CL * Added missing type on button at send.component.html * Changed send to standalone component on web * Moved no send icon to the consuming component * removed unnecessary href on send component html * Added sort to send list * Removed SendComponent from loose-components module and added on app module * Removed unnecessary click handler on send name button * Created own file for no-send icon * set icons folder as lowercase * Corrected no-send.icon import * Setting name as default sort on send list * Added extra height to no-send.icon and removed classes from bit-no-items title container * Removed the size small from options button --- apps/web/src/app/app.module.ts | 2 + .../src/app/shared/loose-components.module.ts | 3 - .../src/app/tools/send/icons/no-send.icon.ts | 13 ++ .../src/app/tools/send/send.component.html | 111 ++++++++++-------- apps/web/src/app/tools/send/send.component.ts | 20 +++- apps/web/src/locales/en/messages.json | 8 ++ libs/angular/src/tools/send/send.component.ts | 11 +- 7 files changed, 111 insertions(+), 57 deletions(-) create mode 100644 apps/web/src/app/tools/send/icons/no-send.icon.ts diff --git a/apps/web/src/app/app.module.ts b/apps/web/src/app/app.module.ts index 5d1afd2122..eca957a070 100644 --- a/apps/web/src/app/app.module.ts +++ b/apps/web/src/app/app.module.ts @@ -9,6 +9,7 @@ import { AppComponent } from "./app.component"; import { CoreModule } from "./core"; import { OssRoutingModule } from "./oss-routing.module"; import { OssModule } from "./oss.module"; +import { SendComponent } from "./tools/send/send.component"; import { WildcardRoutingModule } from "./wildcard-routing.module"; @NgModule({ @@ -21,6 +22,7 @@ import { WildcardRoutingModule } from "./wildcard-routing.module"; DragDropModule, LayoutModule, OssRoutingModule, + SendComponent, WildcardRoutingModule, // Needs to be last to catch all non-existing routes ], declarations: [AppComponent], diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts index 38a4b40c6e..74a422d3b2 100644 --- a/apps/web/src/app/shared/loose-components.module.ts +++ b/apps/web/src/app/shared/loose-components.module.ts @@ -95,7 +95,6 @@ import { PasswordGeneratorHistoryComponent } from "../tools/password-generator-h import { AccessComponent } from "../tools/send/access.component"; import { AddEditComponent as SendAddEditComponent } from "../tools/send/add-edit.component"; import { EffluxDatesComponent as SendEffluxDatesComponent } from "../tools/send/efflux-dates.component"; -import { SendComponent } from "../tools/send/send.component"; import { ToolsComponent } from "../tools/tools.component"; import { PasswordRepromptComponent } from "../vault/components/password-reprompt.component"; import { PremiumBadgeComponent } from "../vault/components/premium-badge.component"; @@ -199,7 +198,6 @@ import { SharedModule } from "./shared.module"; SecurityKeysComponent, SelectableAvatarComponent, SendAddEditComponent, - SendComponent, SendEffluxDatesComponent, SetPasswordComponent, SettingsComponent, @@ -304,7 +302,6 @@ import { SharedModule } from "./shared.module"; SecurityKeysComponent, SelectableAvatarComponent, SendAddEditComponent, - SendComponent, SendEffluxDatesComponent, SetPasswordComponent, SettingsComponent, diff --git a/apps/web/src/app/tools/send/icons/no-send.icon.ts b/apps/web/src/app/tools/send/icons/no-send.icon.ts new file mode 100644 index 0000000000..7811a4723b --- /dev/null +++ b/apps/web/src/app/tools/send/icons/no-send.icon.ts @@ -0,0 +1,13 @@ +import { svgIcon } from "@bitwarden/components"; + +export const NoSend = svgIcon` + + + + + + + + + + `; diff --git a/apps/web/src/app/tools/send/send.component.html b/apps/web/src/app/tools/send/send.component.html index 53bc0b7014..04e624f7d9 100644 --- a/apps/web/src/app/tools/send/send.component.html +++ b/apps/web/src/app/tools/send/send.component.html @@ -1,24 +1,22 @@
- - {{ "sendDisabledWarning" | i18n }} - -
-
+ + {{ "sendDisabledWarning" | i18n }} + +
+
{{ "filters" | i18n }}
- +
+ +
  • @@ -64,9 +62,9 @@
-
-
-

+
+
+

{{ "send" | i18n }} @@ -79,29 +77,38 @@

-
+
- - - - + + + + + + + + - - + - -
-
{{ "name" | i18n }}{{ "deletionDate" | i18n }}{{ "options" | i18n }}
+ - {{ s.name }} + + {{ "pendingDeletion" | i18n }} -
- {{ s.deletionDate | date : "medium" }} 		+ + {{ + s.deletionDate | date : "medium" + }} + + >
+ +
{{ "loading" | i18n }} - -

{{ "noSendsInList" | i18n }}

- + + {{ "sendsNoItemsTitle" | i18n }} + {{ "sendsNoItemsMessage" | i18n }} + +
diff --git a/apps/web/src/app/tools/send/send.component.ts b/apps/web/src/app/tools/send/send.component.ts index 616abaf4f2..157b64da59 100644 --- a/apps/web/src/app/tools/send/send.component.ts +++ b/apps/web/src/app/tools/send/send.component.ts @@ -13,20 +13,36 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl import { SendView } from "@bitwarden/common/tools/send/models/view/send.view"; import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction"; import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction"; -import { Icons } from "@bitwarden/components"; +import { NoItemsModule, SearchModule, TableDataSource } from "@bitwarden/components"; + +import { SharedModule } from "../../shared"; import { AddEditComponent } from "./add-edit.component"; +import { NoSend } from "./icons/no-send.icon"; const BroadcasterSubscriptionId = "SendComponent"; @Component({ selector: "app-send", + standalone: true, + imports: [SharedModule, SearchModule, NoItemsModule], templateUrl: "send.component.html", }) export class SendComponent extends BaseSendComponent { @ViewChild("sendAddEdit", { read: ViewContainerRef, static: true }) sendAddEditModalRef: ViewContainerRef; - noItemIcon = Icons.Search; + noItemIcon = NoSend; + + override set filteredSends(filteredSends: SendView[]) { + super.filteredSends = filteredSends; + this.dataSource.data = filteredSends; + } + + override get filteredSends() { + return super.filteredSends; + } + + protected dataSource = new TableDataSource(); constructor( sendService: SendService, diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 46da473dcd..86641c9f60 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -6955,6 +6955,14 @@ "selectedRegionFlag": { "message": "Selected region flag" }, + "sendsNoItemsTitle": { + "message": "No active Sends", + "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated." + }, + "sendsNoItemsMessage": { + "message": "Use Send to securely share encrypted information with anyone.", + "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated." + }, "inviteUsers": { "message": "Invite Users" }, diff --git a/libs/angular/src/tools/send/send.component.ts b/libs/angular/src/tools/send/send.component.ts index c3215e9818..6064c09ad2 100644 --- a/libs/angular/src/tools/send/send.component.ts +++ b/libs/angular/src/tools/send/send.component.ts @@ -25,11 +25,9 @@ export class SendComponent implements OnInit, OnDestroy { expired = false; type: SendType = null; sends: SendView[] = []; - filteredSends: SendView[] = []; searchText: string; selectedType: SendType; selectedAll: boolean; - searchPlaceholder: string; filter: (cipher: SendView) => boolean; searchPending = false; hasSearched = false; // search() function called - returns true if text qualifies for search @@ -41,6 +39,15 @@ export class SendComponent implements OnInit, OnDestroy { private searchTimeout: any; private destroy$ = new Subject(); + private _filteredSends: SendView[]; + + get filteredSends(): SendView[] { + return this._filteredSends; + } + + set filteredSends(filteredSends: SendView[]) { + this._filteredSends = filteredSends; + } constructor( protected sendService: SendService,