refactor: Migrate legal hold dot component to React

src/script/components/LegalHoldDot.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * Wire
+ * Copyright (C) 2021 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import TestPage from 'Util/test/TestPage';
+import LegalHoldDot, {LegalHoldDotProps} from 'Components/LegalHoldDot';
+import {LegalHoldModalViewModel} from '../view_model/content/LegalHoldModalViewModel';
+
+class LegalHoldDotPage extends TestPage<LegalHoldDotProps> {
+  constructor(props?: LegalHoldDotProps) {
+    super(LegalHoldDot, props);
+  }
+
+  getPendingIcon = () => this.get('svg[data-uie-name="legal-hold-dot-pending-icon"]');
+}
+
+describe('LegalHoldDot', () => {
+  it('shows a pending icon', () => {
+    const legalHoldModal = {
+      showRequestModal: () => Promise.resolve(),
+      showUsers: () => Promise.resolve(),
+    } as LegalHoldModalViewModel;
+
+    const legalHoldDotPage = new LegalHoldDotPage({
+      isPending: true,
+      legalHoldModal,
+    });
+
+    const isPending = legalHoldDotPage.getPendingIcon().exists();
+    expect(isPending).toBe(true);
+  });
+});

src/script/components/LegalHoldDot.tsx

@@ -0,0 +1,66 @@
+/*
+ * Wire
+ * Copyright (C) 2019 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React from 'react';
+import cx from 'classnames';
+import type {Conversation} from '../entity/Conversation';
+import type {LegalHoldModalViewModel} from '../view_model/content/LegalHoldModalViewModel';
+import NamedIcon from 'Components/NamedIcon';
+import {registerReactComponent} from 'Util/ComponentUtil';
+
+export interface LegalHoldDotProps {
+  conversation?: Conversation;
+  isPending?: boolean;
+  large?: boolean;
+  legalHoldModal?: LegalHoldModalViewModel;
+}
+
+const LegalHoldDot: React.FC<LegalHoldDotProps> = ({conversation, isPending, large, legalHoldModal}) => {
+  const isInteractive = !!legalHoldModal;
+
+  return (
+    <div
+      className={cx('legal-hold-dot', {
+        'legal-hold-dot--active': !isPending,
+        'legal-hold-dot--interactive': isInteractive,
+        'legal-hold-dot--large': large,
+      })}
+      onClick={event => {
+        event.stopPropagation();
+        if (isInteractive) {
+          if (isPending) {
+            legalHoldModal.showRequestModal(true);
+            return;
+          }
+          legalHoldModal.showUsers(conversation);
+        }
+      }}
+    >
+      {isPending && <NamedIcon name="pending-icon" data-uie-name="legal-hold-dot-pending-icon" />}
+    </div>
+  );
+};
+
+export default LegalHoldDot;
+
+registerReactComponent('legal-hold-dot', {
+  component: LegalHoldDot,
+  optionalParams: ['conversation', 'isPending', 'large', 'legalHoldModal'],
+  template: '<div data-bind="react: {conversation, isPending: ko.unwrap(isPending), large, legalHoldModal}"></div>',
+});

src/script/view_model/list/ConversationListViewModel.ts

@@ -26,7 +26,7 @@ import type {Availability} from '@wireapp/protocol-messaging';
 import type {WebappProperties} from '@wireapp/api-client/src/user/data';
 
 import 'Components/AvailabilityState';
-import 'Components/legalHoldDot';
+import 'Components/LegalHoldDot';
 import 'Components/list/groupedConversations';
 import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import {getLogger, Logger} from 'Util/Logger';