Merge pull request #7 from Cosmian/feat/wrap_for_release

Feat/wrap for release

.gitignore

@@ -33,4 +33,5 @@ cypress/screenshots
 /storybook-static
 
 # npx tsc compilation
-/dist-tsc
+/dist-tsc
+/dist

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:19
+
+RUN mkdir -p /app
+
+WORKDIR /app
+COPY . /app
+
+RUN npm install
+RUN npm run build
+
+CMD ["npm", "run", "preview", "--", "--host"]

README.md

@@ -2,10 +2,20 @@ This is the main UI for Cosmian CipherCompute and ZeroTrust
 
 # Cosmian Anonymization Configuration tool
 
-## Start application
+## Start application locally
 
 ```
 npm run dev
 ```
 
-Then open [http://localhost:3001](http://localhost:3001) to view it in the browser.
+Then open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+
+## Start application using Docker
+
+```
+docker build -t anonymization-tool .
+docker run -p 4173:4173 anonymization-tool
+```
+
+Then open [http://localhost:4173](http://localhost:4173) to view it in the browser.

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "antd": "^4.24.7",
     "cloudproof_js": "^9.0.0",
-    "cosmian_ui": "^0.0.44",
+    "cosmian_ui": "^0.0.49",
     "eslint-plugin-react": "^7.32.2",
     "joi": "^17.9.1",
     "less": "^4.1.3",

src/Views/Edit.tsx

@@ -1,5 +1,5 @@
 import { DownloadOutlined, EditOutlined } from "@ant-design/icons"
-import { Skeleton, Table, Tag, Typography, notification } from "antd"
+import { Skeleton, Space, Table, Tag, Typography, notification } from "antd"
 import { BackArrow, Button, RoundedFrame } from "cosmian_ui"
 import localForage from "localforage"
 import { Key, useEffect, useState } from "react"
@@ -29,7 +29,6 @@ const Edit = (): JSX.Element => {
   const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([])
   const [configurationInfo, setConfigurationInfo] = useState<ConfigurationInfo>()
   const [fileMetadata, setFileMetadata] = useState<MetaData[] | undefined>(undefined)
-  const [screenHeight, setScreenHeight] = useState(getTableHeight(window.innerHeight))
 
   useEffect(() => {
     const fetchConfig = async (): Promise<void> => {
@@ -42,10 +41,6 @@ const Edit = (): JSX.Element => {
     fetchConfig()
   }, [])
 
-  addEventListener("resize", (_event) => {
-    setScreenHeight(getTableHeight(window.innerHeight))
-  })
-
   const columns = [
     {
       title: "Column name",
@@ -185,7 +180,12 @@ const Edit = (): JSX.Element => {
         >
           {configurationInfo?.name}
         </Typography.Title>
-        <p>Select column(s) and define method to apply.</p>
+        <Space style={{ marginTop: "2em", marginBottom: "2em", width: "100%", justifyContent: "space-between" }}>
+          <p style={{ margin: 0 }}>Select column(s) and define method to apply.</p>
+          <Button onClick={() => downloadConfiguration(configurationInfo?.uuid)} icon={<DownloadOutlined />}>
+            Download configuration
+          </Button>
+        </Space>
         <RoundedFrame>
           <Table
             rowKey={"key"}
@@ -194,14 +194,9 @@ const Edit = (): JSX.Element => {
             pagination={false}
             rowSelection={rowSelection}
             tableLayout="auto"
-            scroll={{ x: 800, y: screenHeight }}
+            scroll={{ x: 800 }}
           />
         </RoundedFrame>
-        <div style={{ marginTop: "2em", width: "100%", textAlign: "right" }}>
-          <Button onClick={() => downloadConfiguration(configurationInfo?.uuid)} icon={<DownloadOutlined />}>
-            Download configuration
-          </Button>
-        </div>
       </div>
       <EditMethodBox
         selectedRowKeys={selectedRowKeys}
@@ -214,7 +209,3 @@ const Edit = (): JSX.Element => {
 }
 
 export default Edit
-
-const getTableHeight = (windowHeight: number): number => {
-  return windowHeight - 500 > 200 ? windowHeight - 500 : 200
-}

src/utils/utils.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Anonymization, Fpe } from "cloudproof_js"
+// import { Anonymization, Fpe } from "cloudproof_js"
 
 import { notification } from "antd"
 import { DefaultOptionType } from "antd/lib/select"
+import { Anonymization, Fpe } from "cloudproof_js"
 import localForage from "localforage"
 
 export type MetaData = {
@@ -117,10 +118,48 @@ export const getCommonMethods = (types: DataType[]): DefaultOptionType[] => {
   return []
 }
 
-const FPE = await Fpe()
-const anonymization = await Anonymization()
-const key = crypto.getRandomValues(new Uint8Array(32))
-const tweak = crypto.getRandomValues(new Uint8Array(1024))
+const key = new Uint8Array([
+  156, 161, 173, 90, 39, 41, 113, 3, 99, 144, 48, 69, 70, 3, 86, 154, 39, 215, 6, 55, 242, 50, 149, 176, 242, 31, 123, 180, 97, 129, 141,
+  232,
+])
+const tweak = new Uint8Array([
+  27, 195, 246, 165, 228, 175, 100, 67, 97, 148, 12, 138, 27, 120, 179, 58, 55, 186, 239, 236, 5, 177, 11, 14, 164, 148, 244, 103, 182, 156,
+  178, 227, 68, 16, 226, 200, 44, 163, 93, 250, 175, 101, 3, 146, 88, 44, 163, 37, 107, 150, 110, 246, 252, 170, 237, 158, 170, 11, 88, 34,
+  113, 91, 159, 16, 37, 171, 254, 177, 157, 87, 219, 214, 243, 58, 47, 195, 131, 133, 215, 22, 178, 0, 237, 246, 204, 118, 206, 170, 152,
+  121, 184, 38, 203, 109, 178, 131, 173, 74, 185, 132, 58, 26, 3, 58, 124, 198, 242, 1, 244, 245, 154, 198, 178, 139, 238, 253, 206, 236,
+  111, 78, 219, 1, 91, 237, 171, 235, 54, 229, 209, 119, 2, 113, 75, 84, 94, 25, 214, 87, 239, 79, 48, 56, 35, 150, 159, 207, 246, 200, 15,
+  23, 226, 4, 80, 178, 115, 233, 175, 249, 220, 94, 129, 100, 79, 28, 118, 183, 222, 48, 192, 4, 224, 30, 108, 32, 160, 225, 2, 21, 58, 230,
+  206, 230, 87, 60, 22, 174, 5, 181, 161, 200, 216, 80, 5, 5, 123, 59, 146, 88, 223, 48, 22, 34, 195, 141, 225, 74, 180, 228, 101, 82, 106,
+  86, 144, 106, 27, 123, 119, 147, 46, 125, 134, 89, 161, 153, 77, 99, 209, 116, 152, 114, 191, 141, 119, 244, 176, 88, 252, 208, 151, 37,
+  186, 98, 147, 144, 42, 180, 51, 32, 239, 36, 30, 184, 11, 58, 70, 116, 132, 215, 172, 66, 58, 210, 105, 3, 220, 130, 149, 14, 63, 91, 63,
+  143, 175, 21, 78, 80, 8, 183, 166, 227, 241, 28, 206, 177, 223, 81, 68, 136, 156, 229, 33, 142, 3, 228, 201, 109, 61, 11, 100, 50, 216,
+  164, 158, 36, 92, 112, 213, 108, 181, 23, 122, 34, 208, 242, 194, 159, 72, 172, 107, 173, 48, 254, 122, 9, 202, 164, 156, 163, 9, 38, 91,
+  137, 133, 102, 98, 37, 179, 81, 44, 69, 18, 249, 244, 247, 28, 42, 195, 252, 147, 202, 254, 215, 215, 235, 100, 176, 123, 255, 78, 111,
+  97, 27, 159, 119, 37, 122, 96, 93, 25, 136, 183, 76, 101, 112, 22, 224, 230, 178, 137, 195, 157, 154, 20, 231, 148, 133, 163, 67, 148,
+  154, 201, 203, 60, 33, 229, 98, 34, 112, 91, 77, 193, 81, 202, 33, 230, 124, 76, 54, 167, 6, 33, 170, 203, 17, 149, 171, 14, 55, 249, 217,
+  32, 235, 66, 9, 148, 156, 181, 182, 89, 216, 122, 103, 198, 25, 170, 112, 154, 149, 121, 125, 11, 180, 157, 160, 243, 205, 110, 81, 190,
+  3, 176, 13, 0, 197, 254, 9, 134, 119, 26, 163, 235, 119, 63, 224, 210, 174, 130, 163, 153, 106, 19, 53, 11, 7, 1, 252, 122, 133, 245, 225,
+  71, 76, 172, 34, 39, 103, 109, 88, 90, 25, 103, 238, 231, 167, 198, 187, 118, 104, 17, 204, 15, 247, 223, 7, 231, 100, 0, 5, 121, 124,
+  248, 69, 4, 242, 165, 249, 71, 147, 163, 45, 169, 35, 78, 180, 125, 16, 127, 17, 230, 47, 221, 249, 246, 36, 114, 253, 2, 40, 54, 61, 167,
+  50, 86, 238, 1, 123, 129, 101, 167, 111, 23, 231, 13, 207, 229, 235, 116, 16, 151, 36, 142, 149, 141, 132, 12, 140, 206, 32, 157, 195, 79,
+  30, 54, 149, 178, 223, 91, 56, 110, 243, 0, 216, 118, 203, 2, 241, 14, 108, 108, 116, 40, 255, 136, 249, 218, 241, 130, 124, 49, 95, 99,
+  42, 86, 50, 165, 244, 134, 98, 141, 69, 168, 50, 149, 29, 84, 151, 194, 87, 26, 30, 18, 217, 200, 109, 168, 109, 100, 211, 136, 87, 60,
+  242, 142, 213, 12, 168, 158, 148, 54, 184, 72, 144, 88, 11, 138, 83, 232, 4, 89, 63, 229, 86, 63, 151, 198, 215, 211, 194, 146, 123, 252,
+  24, 156, 65, 13, 218, 101, 45, 64, 39, 164, 235, 161, 19, 115, 175, 198, 194, 156, 59, 68, 10, 148, 0, 75, 130, 123, 192, 86, 158, 188,
+  226, 238, 233, 208, 63, 229, 90, 239, 95, 16, 20, 136, 50, 30, 47, 106, 200, 100, 184, 251, 230, 244, 156, 4, 78, 149, 250, 7, 47, 24,
+  163, 63, 99, 217, 39, 70, 239, 92, 66, 8, 155, 211, 228, 242, 153, 236, 238, 175, 210, 241, 1, 231, 159, 31, 6, 83, 22, 36, 213, 139, 71,
+  241, 187, 41, 94, 137, 241, 228, 190, 159, 175, 103, 98, 28, 92, 156, 220, 229, 34, 232, 185, 209, 86, 108, 149, 187, 105, 237, 93, 194,
+  246, 61, 57, 164, 31, 17, 255, 37, 166, 167, 70, 213, 226, 156, 12, 125, 155, 28, 222, 96, 199, 220, 122, 245, 56, 184, 55, 161, 88, 208,
+  207, 228, 110, 116, 111, 86, 195, 179, 200, 153, 156, 47, 11, 63, 67, 209, 217, 245, 235, 233, 28, 8, 184, 149, 206, 130, 95, 195, 41, 3,
+  2, 214, 22, 24, 10, 164, 245, 216, 66, 65, 1, 215, 178, 188, 187, 213, 228, 46, 220, 228, 104, 237, 92, 120, 224, 69, 103, 44, 109, 101,
+  254, 60, 25, 77, 138, 29, 220, 195, 105, 133, 160, 195, 108, 26, 218, 255, 111, 251, 12, 148, 172, 217, 86, 206, 143, 12, 227, 16, 17,
+  176, 67, 86, 0, 188, 151, 140, 70, 91, 157, 137, 53, 68, 107, 66, 155, 83, 147, 164, 102, 116, 69, 10, 50, 156, 212, 251, 199, 12, 135,
+  91, 49, 151, 171, 236, 253, 44, 120, 193, 211, 115, 1, 223, 59, 188, 11, 118, 91, 199, 68, 107, 150, 235, 184, 173, 31, 33, 21, 19, 221,
+  228, 150, 46, 129, 237, 215, 32, 149, 53, 58, 208, 52, 114, 43, 210, 81, 187, 197, 148, 193, 106, 115, 64, 214, 107, 130, 21, 84, 254,
+  165, 84, 132, 94, 242, 194, 246, 130, 216, 50, 193, 146, 96, 67, 101, 135, 52, 125, 76, 59, 81, 199, 38, 48, 241, 252, 209, 205, 114, 110,
+  62, 0, 238, 226, 76,
+])
+
 interface FpeOptions {
   alphabet?: string
   additionalCharacters?: string
@@ -129,6 +168,8 @@ interface FpeOptions {
 }
 
 export const applyMethod = async (clearInput: string | number, method: MethodType, methodOptions: any): Promise<any> => {
+  const FPE = await Fpe()
+  const anonymization = await Anonymization()
   if (!methodOptions) return undefined
   switch (method) {
     case "FpeString": {