DSAT-106: change 'Revoke All' to 'Revoke File' with accompanying functionality

src/scenes/Document/Document.js

@@ -45,6 +45,9 @@ function Document({
   const [isAuthOpen, setAuthOpen] = useState(false);
   const [isStayUpOpen, setStayUpOpen] = useState(false);
   const [isDownloadOpen, setDownloadOpen] = useState(false);
+  const [isPolicyRevoked, setPolicyRevoked] = useState(
+    !!localStorage.getItem('virtru-demo-policyRevoked'),
+  );
 
   const openAuthModal = () => {
     setEncryptState(ENCRYPT_STATES.AUTHENTICATING);
@@ -92,6 +95,13 @@ function Document({
     }
   };
 
+  const revokePolicy = () => {
+    localStorage.setItem('virtru-demo-policyRevoked', true);
+    setPolicyRevoked(true);
+    // TODO: handle error case?
+    Virtru.revoke({ virtruClient, policyId });
+  };
+
   useEffect(() => {
     async function updateAuditEvents() {
       const currentTimerId = auditTimerId;
@@ -137,12 +147,18 @@ function Document({
           setFile={setFile}
         >
           <div className="DocumentDetails">
-            <Filename file={file} isTdf={!!encrypted} />
+            <Filename
+              file={file}
+              isTdf={!!encrypted}
+              isPolicyRevoked={isPolicyRevoked}
+              revokePolicy={revokePolicy}
+            />
             <Policy
               virtruClient={virtruClient}
               file={file}
               policy={policy}
               policyId={policyId}
+              isPolicyRevoked={isPolicyRevoked}
               userId={userId}
               openAuthModal={openAuthModal}
               encrypt={encrypt}
@@ -204,7 +220,13 @@ function Document({
           </Button>
           <Button
             onClick={() => setShareOpen(true)}
-            disabled={!encrypted || !userId || !policy || !policy.getUsersWithAccess().length}
+            disabled={
+              !encrypted ||
+              !userId ||
+              !policy ||
+              isPolicyRevoked ||
+              !policy.getUsersWithAccess().length
+            }
           >
             Share
           </Button>
@@ -317,6 +339,7 @@ const actions = {
     localStorage.removeItem('virtru-demo-policy');
     localStorage.removeItem('virtru-demo-file-encrypted');
     localStorage.removeItem('virtru-demo-policyId');
+    localStorage.removeItem('virtru-demo-policyRevoked');
     if (!fileHandle) {
       return {
         file: false,

src/scenes/Document/components/Filename/Filename.css

@@ -31,3 +31,8 @@
 .Filename-Replace input[type='file'] {
   display: none;
 }
+
+.Filename .RevokeAll {
+  position: absolute;
+  right: 20px;
+}

src/scenes/Document/components/Filename/Filename.js

@@ -1,17 +1,20 @@
 import React from 'react';
 
+import RevokeAll from '../RevokeAll/RevokeAll';
+
 import Button from 'components/Button/Button';
 import Virtru from 'utils/VirtruWrapper';
 import './Filename.css';
 
-function Filename({ file, isTdf }) {
+function Filename({ file, isTdf, isPolicyRevoked, revokePolicy }) {
   return (
     <h2 className="Filename">
       {file.file.name}
       {isTdf && <span className="Filename-tdf">.tdf</span>}
       <Button variant="link" onClick={Virtru.signOut} small>
         Start over
       </Button>
+      {isTdf && <RevokeAll isPolicyRevoked={isPolicyRevoked} revokePolicy={revokePolicy} />}
     </h2>
   );
 }

src/scenes/Document/components/RevokeAll/RevokeAll.css

@@ -0,0 +1,93 @@
+.RevokeAll {
+  font: var(--fSizeSmall) / var(--lhSmall) var(--fontPrimary);
+  min-height: 36px;
+  margin: 4px;
+  min-width: 94px;
+}
+
+.RevokeAll {
+  background: var(--redDarker);
+  border: 1px solid var(--redDarker);
+  border-radius: 3px;
+  color: #fff;
+  font-family: var(--fontPrimary);
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 18px;
+  text-align: center;
+  cursor: pointer;
+}
+.RevokeAll:hover,
+.RevokeAll:focus {
+  background-color: var(--slateDarker);
+  border-color: var(--slateDarker);
+  box-shadow: 0 1px 4px 1px var(--slateShadow);
+  outline: none;
+}
+.RevokeAll:active {
+  background-color: var(--black);
+  border-color: var(--black);
+  box-shadow: 0 1px 4px 1px var(--slateShadow);
+}
+.RevokeAll:disabled {
+  box-shadow: none;
+  background-color: var(--slateLighter);
+  border-color: var(--slateLighter);
+  color: var(--white);
+  cursor: default;
+}
+
+.RevokeAll-container {
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+}
+.RevokeAll-title {
+  color: #2d323b;
+  font-family: var(--fontSecondary);
+  font-size: 16px;
+  line-height: 24px;
+  text-align: left;
+  font-weight: bold;
+}
+.RevokeAll-text {
+  color: #2d323b;
+  font-size: 15px;
+  line-height: 18px;
+  text-align: left;
+  margin: 15px 0 20px;
+  font-family: var(--fontSecondary);
+}
+
+.RevokeAll-confirm {
+  font: var(--fSizeSmall) / var(--lhSmall) var(--fontPrimary);
+  min-height: 36px;
+  margin: 4px;
+  min-width: 94px;
+  border: 1px solid var(--slateDarker);
+  border-radius: 3px;
+  background-color: #fff;
+  cursor: pointer;
+  color: var(--redDarker);
+  font-weight: bold;
+}
+.RevokeAll-confirm:hover,
+.RevokeAll-confirm:focus {
+  box-shadow: 0 1px 4px 1px var(--slateShadow);
+  border-color: var(--redDarker);
+  color: var(--redDarker);
+  outline: none;
+}
+.RevokeAll-confirm:active {
+  box-shadow: 0 1px 4px 1px var(--slateShadow);
+  color: var(--white);
+  border-color: var(--slatePrimary);
+  background-color: var(--redDarker);
+}
+.RevokeAll-confirm:disabled {
+  box-shadow: none;
+  background-color: var(--slateLighter);
+  border-color: var(--slateLighter);
+  color: var(--white);
+  cursor: default;
+}

src/scenes/Document/components/RevokeAll/RevokeAll.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import Button from '../../../../components/Button/Button';
+import Modal from '../../../../components/Modal/Modal';
+
+import './RevokeAll.css';
+
+function RevokeAll({ isPolicyRevoked, revokePolicy }) {
+  const [isShowWarning, setShowWarning] = useState(false);
+
+  const doClose = () => {
+    setShowWarning(false);
+  };
+
+  const doRevoke = () => {
+    revokePolicy();
+    doClose();
+  };
+
+  return (
+    <>
+      <Button
+        className="RevokeAll"
+        disabled={isPolicyRevoked}
+        onClick={() => {
+          setShowWarning(true);
+        }}
+      >
+        {isPolicyRevoked ? 'Revoked' : 'Revoke File'}
+      </Button>
+      {isShowWarning && (
+        <Modal onClose={doClose}>
+          <div className="RevokeAll-container">
+            <div className="RevokeAll-title">Revoke File</div>
+            <div className="RevokeAll-text">
+              <p>If you revoke this file, only you will be able to access it.</p>
+              <p>The SDK does not currently support undoing this action.</p>
+            </div>
+            <Button className="RevokeAll-confirm" onClick={doRevoke}>
+              Yes, Revoke This File
+            </Button>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}
+
+export default RevokeAll;

src/scenes/Document/scenes/Policy/Policy.css

@@ -23,3 +23,7 @@
 .Policy-buttons button {
   margin-left: 0;
 }
+
+.Section-disabled {
+  opacity: 0.5;
+}

src/scenes/Document/scenes/Policy/Policy.js

@@ -18,6 +18,7 @@ function Policy({
   policyChange,
   virtruClient,
   policyId,
+  isPolicyRevoked,
   isLoggedIn,
 }) {
   const renderButtons = () => {
@@ -50,6 +51,7 @@ function Policy({
         }
     }
   };
+
   if (encryptState !== ENCRYPT_STATES.PROTECTED) {
     return (
       <div className="Policy" id="policy">
@@ -58,6 +60,7 @@ function Policy({
           policy={policy}
           policyId={policyId}
           policyChange={policyChange}
+          isPolicyRevoked={isPolicyRevoked}
           userId={userId}
         />
         <span className="Policy-buttons">{renderButtons()}</span>
@@ -67,17 +70,21 @@ function Policy({
   return (
     <div className="Policy" id="policy">
       <Access
-        virtruClient={virtruClient}
-        policyId={policyId}
         policy={policy}
         encryptState={encryptState}
         policyChange={policyChange}
+        isPolicyRevoked={isPolicyRevoked}
         userId={userId}
       />
       <hr className="Policy-rule" />
-      <Expiration policy={policy} policyChange={policyChange} />
-      <Resharing policy={policy} policyChange={policyChange} />
-      <Watermarking file={file} policy={policy} policyChange={policyChange} />
+      <Expiration policy={policy} policyChange={policyChange} isPolicyRevoked={isPolicyRevoked} />
+      <Resharing policy={policy} policyChange={policyChange} isPolicyRevoked={isPolicyRevoked} />
+      <Watermarking
+        file={file}
+        policy={policy}
+        policyChange={policyChange}
+        isPolicyRevoked={isPolicyRevoked}
+      />
     </div>
   );
 }

src/scenes/Document/scenes/Policy/components/Access/Access.css

@@ -46,39 +46,13 @@
 }
 
 .Grant-owner,
-.Access-revokeAll,
 .Access input[type='submit'] {
   font: var(--fSizeSmall) / var(--lhSmall) var(--fontPrimary);
   min-height: 36px;
   margin: 4px;
   min-width: 94px;
 }
 
-.Access-revokeAll {
-  background: var(--redDarker);
-  border: 1px solid var(--redDarker);
-  border-radius: 3px;
-  color: #fff;
-  font-family: var(--fontPrimary);
-  font-size: 13px;
-  font-weight: bold;
-  line-height: 18px;
-  text-align: center;
-  cursor: pointer;
-}
-.Access-revokeAll:hover,
-.Access-revokeAll:focus {
-  background-color: var(--slateDarker);
-  border-color: var(--slateDarker);
-  box-shadow: 0 1px 4px 1px var(--slateShadow);
-  outline: none;
-}
-.Access-revokeAll:active {
-  background-color: var(--black);
-  border-color: var(--black);
-  box-shadow: 0 1px 4px 1px var(--slateShadow);
-}
-
 .Access input[type='submit'] {
   border: 1px solid var(--slateDarker);
   border-radius: 3px;