From 8ef417bec6ffc50b63ef97636f0422a446dac00a Mon Sep 17 00:00:00 2001
From: Ginsu Eddy <ginsu.eddy@gmail.com>
Date: Tue, 28 Nov 2023 23:06:13 -0500
Subject: [PATCH] [web] introduce keyserver selection modal

Summary:
This diff introduces the barebones keyserver selection modal. The focus of this diff is just to implement the interface. Subsequent diffs will handle the behavior of disconnect/removing a keyserver from your keyserver selection list

Figma:
{F882258}

Linear task: https://linear.app/comm/issue/ENG-5497/introduce-remove-keyserver-ui

Depends on D9918

Test Plan:
Please see the demo video below

{F882263}

Reviewers: inka, rohan, michal

Reviewed By: inka

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D9920
---
 .../keyserver-selection-modal.css             | 41 ++++++++++++
 .../keyserver-selection-modal.react.js        | 62 +++++++++++++++++++
 .../keyserver-selection-list-item.react.js    | 17 ++++-
 3 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 web/modals/keyserver-selection/keyserver-selection-modal.css
 create mode 100644 web/modals/keyserver-selection/keyserver-selection-modal.react.js

diff --git a/web/modals/keyserver-selection/keyserver-selection-modal.css b/web/modals/keyserver-selection/keyserver-selection-modal.css
new file mode 100644
index 0000000000..6ffb2f52ed
--- /dev/null
+++ b/web/modals/keyserver-selection/keyserver-selection-modal.css
@@ -0,0 +1,41 @@
+.container {
+  padding: 0 32px;
+}
+
+.keyserverDetailsContainer {
+  background-color: var(--modal-background-secondary-default);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 8px;
+  padding: 16px 0;
+  border-radius: 8px;
+  margin-top: 16px;
+}
+
+.keyserverDetailsHeaderContainer {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+.keyserverURL {
+  color: var(--text-background-primary-default);
+}
+
+.keyserverRemoveTextContainer {
+  color: var(--text-background-primary-default);
+  margin: 16px 0 24px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+}
+
+.buttonContainer {
+  background-color: var(--modal-background-secondary-default);
+  padding: 16px 32px;
+}
+
+.button {
+  width: 100%;
+}
diff --git a/web/modals/keyserver-selection/keyserver-selection-modal.react.js b/web/modals/keyserver-selection/keyserver-selection-modal.react.js
new file mode 100644
index 0000000000..a627e6774e
--- /dev/null
+++ b/web/modals/keyserver-selection/keyserver-selection-modal.react.js
@@ -0,0 +1,62 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import type { KeyserverInfo } from 'lib/types/keyserver-types.js';
+import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
+
+import css from './keyserver-selection-modal.css';
+import Button, { buttonThemes } from '../../components/button.react.js';
+import KeyserverPill from '../../components/keyserver-pill.react.js';
+import StatusIndicator from '../../components/status-indicator.react.js';
+import Modal from '../modal.react.js';
+
+type Props = {
+  +keyserverAdminUserInfo: GlobalAccountUserInfo,
+  +keyserverInfo: KeyserverInfo,
+};
+
+function KeyserverSelectionModal(props: Props): React.Node {
+  const { keyserverAdminUserInfo, keyserverInfo } = props;
+
+  const { popModal } = useModalContext();
+
+  return (
+    <Modal size="large" onClose={popModal} name="Keyserver details">
+      <div className={css.container}>
+        <div className={css.keyserverDetailsContainer}>
+          <div className={css.keyserverDetailsHeaderContainer}>
+            <KeyserverPill
+              keyserverAdminUsername={keyserverAdminUserInfo.username}
+            />
+            <StatusIndicator connectionInfo={keyserverInfo.connection} />
+          </div>
+          <div className={css.keyserverURL}>{keyserverInfo.urlPrefix}</div>
+        </div>
+        <div className={css.keyserverRemoveTextContainer}>
+          <div>
+            You may delete offline keyserver from your keyserver list. When you
+            delete a keyserver, you will still remain in the associated
+            communities.
+          </div>
+          <div>
+            Any messages or content you have previously sent will remain on the
+            keyserver&rsquo;s communities after disconnecting or deleting.
+          </div>
+        </div>
+      </div>
+      <div className={css.buttonContainer}>
+        <Button
+          variant="filled"
+          buttonColor={buttonThemes.danger}
+          className={css.button}
+        >
+          Delete keyserver from list
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+export default KeyserverSelectionModal;
diff --git a/web/settings/keyserver-selection-list-item.react.js b/web/settings/keyserver-selection-list-item.react.js
index 00ab743546..ffa157a206 100644
--- a/web/settings/keyserver-selection-list-item.react.js
+++ b/web/settings/keyserver-selection-list-item.react.js
@@ -2,12 +2,14 @@
 
 import * as React from 'react';
 
+import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { KeyserverInfo } from 'lib/types/keyserver-types.js';
 import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
 
 import css from './keyserver-selection-list-item.css';
 import KeyserverPill from '../components/keyserver-pill.react.js';
 import StatusIndicator from '../components/status-indicator.react.js';
+import KeyserverSelectionModal from '../modals/keyserver-selection/keyserver-selection-modal.react.js';
 
 type Props = {
   +keyserverAdminUserInfo: GlobalAccountUserInfo,
@@ -17,16 +19,27 @@ type Props = {
 function KeyserverSelectionListItem(props: Props): React.Node {
   const { keyserverAdminUserInfo, keyserverInfo } = props;
 
+  const { pushModal } = useModalContext();
+
+  const onClick = React.useCallback(() => {
+    pushModal(
+      <KeyserverSelectionModal
+        keyserverAdminUserInfo={keyserverAdminUserInfo}
+        keyserverInfo={keyserverInfo}
+      />,
+    );
+  }, [keyserverAdminUserInfo, keyserverInfo, pushModal]);
+
   const keyserverSelectionListItem = React.useMemo(
     () => (
-      <div className={css.container}>
+      <div className={css.container} onClick={onClick}>
         <KeyserverPill
           keyserverAdminUsername={keyserverAdminUserInfo.username}
         />
         <StatusIndicator connectionInfo={keyserverInfo.connection} />
       </div>
     ),
-    [keyserverAdminUserInfo.username, keyserverInfo.connection],
+    [keyserverAdminUserInfo.username, keyserverInfo.connection, onClick],
   );
 
   return keyserverSelectionListItem;