Edit CSE steps

Cosmian · Nov 18, 2024 · d0fc065 · d0fc065
1 parent 31ee8e5
commit d0fc065
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 16 deletions.
diff --git a/src/assets/admin_cse.png b/src/assets/admin_cse.png
diff --git a/src/assets/label_scope.png b/src/assets/label_scope.png
diff --git a/src/assets/sensitivity_label.png b/src/assets/sensitivity_label.png
diff --git a/src/pages/cse/ConfigureCse.tsx b/src/pages/cse/ConfigureCse.tsx
@@ -1,24 +1,26 @@
 import { message } from "antd"
-import { useState } from "react"
 import { Link, useNavigate } from "react-router-dom"
+import CseAdmin from "../../assets/admin_cse.png"
 import Code from "../../component/Code"
+import { ImageWrapper } from "../../component/Layout"
 import Split from "../../component/Split"
-import { useBoundStore } from "../../store/store"
+import { useBoundStore, useCseStore } from "../../store/store"
 import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
 import { Language } from "../../utils/types"
 
+
 const activeLanguageList: Language[] = [];
 
 const ConfigureCse = (): JSX.Element => {
   const { steps, setSteps } = useBoundStore((state) => state);
-  const [key, setKey] = useState<string | undefined>();
+  const { cseConfig, setCseConfig } = useCseStore((state) => state);
 
   const navigate = useNavigate();
   const currentItem = findCurrentNavigationItem(steps);
 
   const handleSetup = async (): Promise<void> => {
     try {
-      setKey("google_cse");
+      setCseConfig(true);
       updateNavigationSteps(steps, setSteps);
       navigate("#");
     } catch (error) {
@@ -42,6 +44,9 @@ const ConfigureCse = (): JSX.Element => {
         <p>
           Enable CSE from Google Workspace client-side encryption page of the admin console.
         </p>
+        <ImageWrapper>
+          <img src={CseAdmin} alt="Cse Admin interface" style={{ maxWidth: "100%" }} />
+        </ImageWrapper>
         <p>Configuration steps:</p>
         <ul>
           <li>Choose and configure an <b>Identity Provider</b></li>
@@ -60,7 +65,7 @@ const ConfigureCse = (): JSX.Element => {
             python: GOOGLE_CSE_KEY,
           }}
           codeOutputList={
-            key
+            cseConfig
               ? {
                   java: GOOGLE_CSE_KEY_OUTPUT,
                   javascript: GOOGLE_CSE_KEY_OUTPUT,

diff --git a/src/pages/cse/ConfigureDke.tsx b/src/pages/cse/ConfigureDke.tsx
@@ -1,24 +1,27 @@
 import { message } from "antd"
-import { useState } from "react"
 import { Link, useNavigate } from "react-router-dom"
+import DkeAdminScope from "../../assets/label_scope.png"
+import DkeAdminLabel from "../../assets/sensitivity_label.png"
 import Code from "../../component/Code"
+import { ImageWrapper } from "../../component/Layout"
 import Split from "../../component/Split"
-import { useBoundStore } from "../../store/store"
+import { useBoundStore, useCseStore } from "../../store/store"
 import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
 import { Language } from "../../utils/types"
 
+
 const activeLanguageList: Language[] = [];
 
 const ConfigureDke = (): JSX.Element => {
   const { steps, setSteps } = useBoundStore((state) => state);
-  const [key, setKey] = useState<string | undefined>();
+  const { dkeConfig, setDkeConfig } = useCseStore((state) => state);
 
   const navigate = useNavigate();
   const currentItem = findCurrentNavigationItem(steps);
 
   const handleSetup = async (): Promise<void> => {
     try {
-      setKey("dke_key");
+      setDkeConfig(true);
       updateNavigationSteps(steps, setSteps);
       navigate("#");
     } catch (error) {
@@ -46,7 +49,14 @@ const ConfigureDke = (): JSX.Element => {
         <p>The DKE feature is currently only available for the Office Windows clients.</p>
         <p>Configuration steps:</p>
         <ul>
-          <li>Configure Microsoft DKE in Purview and create a sensitivity label for encryption</li>
+          <li>Configure Microsoft DKE in Purview and create a sensitivity label for encryption
+            <ImageWrapper>
+              <img src={DkeAdminLabel} alt="Cse Admin interface" style={{ maxWidth: "100%" }} />
+            </ImageWrapper>
+            <ImageWrapper>
+              <img src={DkeAdminScope} alt="Cse Admin interface" style={{ maxWidth: "100%" }} />
+            </ImageWrapper>
+          </li>
           <li>Instantiate and configure Cosmian <b>Key Management Server</b> (Cosmian KMS)</li>
           <li>Generate <b>RSA key</b> with tag <i>dke_key</i></li>
         </ul>
@@ -60,7 +70,7 @@ const ConfigureDke = (): JSX.Element => {
             python: DKE_KEY,
           }}
           codeOutputList={
-            key
+            dkeConfig
               ? {
                   java: DKE_KEY_OUTPUT,
                   javascript: DKE_KEY_OUTPUT,

diff --git a/src/store/store.tsx b/src/store/store.tsx
@@ -1,8 +1,8 @@
-import { Findex, IndexedEntry, KmsObject, Policy } from "cloudproof_js";
-import { StateCreator, create } from "zustand";
-import { Employee, employees } from "../utils/covercryptConfig";
-import { NavigationConfig, navigationConfig } from "../utils/navigationConfig";
-import { EncryptedResult, KeysUid, Language } from "../utils/types";
+import { Findex, IndexedEntry, KmsObject, Policy } from "cloudproof_js"
+import { StateCreator, create } from "zustand"
+import { Employee, employees } from "../utils/covercryptConfig"
+import { NavigationConfig, navigationConfig } from "../utils/navigationConfig"
+import { EncryptedResult, KeysUid, Language } from "../utils/types"
 
 export const CLIENT_2_TOKEN = import.meta.env.VITE_CLIENT_2_TOKEN as string;
 
@@ -250,14 +250,30 @@ type SummarizeApiResponse = {
   summary: string | undefined;
 };
 interface CseState {
+  cseConfig: boolean,
+  dkeConfig: boolean,
   integrity: boolean;
   summarizeApiResponse: SummarizeApiResponse | undefined;
+  setCseConfig: (cseConfig?: boolean) => void;
+  setDkeConfig: (dkeConfig?: boolean) => void;
   setIntegrity: (integrity?: boolean) => void;
   setSummarizeApiResponse: (summarizeApiResponse?: SummarizeApiResponse) => void;
 }
 export const useCseStore = create<CseState>()((set) => ({
+  cseConfig: false,
+  dkeConfig: false,
   integrity: false,
   summarizeApiResponse: undefined,
+  setCseConfig: (cseConfig?: boolean) =>
+    set((state) => {
+      state.setDkeConfig(false);
+      return { cseConfig };
+    }),
+  setDkeConfig: (dkeConfig?: boolean) =>
+    set((state) => {
+      state.setIntegrity(false);
+      return { dkeConfig };
+    }),
   setIntegrity: (integrity?: boolean) =>
     set((state) => {
       state.setSummarizeApiResponse(undefined);