Page MenuHomePhabricator
Differential D9905

[web] introduce keyserver pill component
ClosedPublic
Actions

Authored by ginsu on Nov 15 2023, 1:25 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 9, 2:42 PM
Unknown Object (File)
Wed, Apr 9, 1:18 PM
Unknown Object (File)
Wed, Apr 9, 10:10 AM
Unknown Object (File)
Wed, Apr 9, 4:48 AM
Unknown Object (File)
Mon, Apr 7, 8:46 PM
Unknown Object (File)
Sun, Apr 6, 7:51 PM
Unknown Object (File)
Mon, Mar 24, 5:13 AM
Unknown Object (File)
Mar 4 2025, 12:07 AM
View All Files
Subscribers
ashoat
tomek

Details

Reviewers
inka
michal
rohan
Commits
rCOMM02d9845ea208: [web] introduce keyserver pill component
Summary

This UI element will be repeated in several places in the keyserver selection list ui. Rather than copy + paste this logic a bunch of times, we should factor out this into a seperate + reusable component.

This is mainly a move diff; however, I did update the color variable names to follow our new color design system + made one change to the spacing between the two elements which I left a comment inline explaining

Test Plan

Confirmed that there were no regressions with the create community modal

Screenshot 2023-11-16 at 4.08.07 PM.png (1×3 px, 601 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu created this revision.Nov 15 2023, 1:25 PM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptNov 15 2023, 1:25 PM
ginsu added a child revision: D9891: [web] introduce keyserver selection list item.Nov 15 2023, 1:25 PM
ginsu added inline comments.Nov 15 2023, 1:30 PM
web/components/keyserver-pill.css
8 ↗(On Diff #33301)

Updated this from 6px => 4px based on the designs:

Screenshot 2023-11-15 at 4.30.02 PM.png (316×616 px, 140 KB)

ginsu attached a referenced file: F880181: Screenshot 2023-11-15 at 4.30.02 PM.png. (Show Details)Nov 15 2023, 1:30 PM
ginsu edited the summary of this revision. (Show Details)
ginsu added reviewers: inka, michal, rohan.Nov 15 2023, 1:37 PM
Harbormaster completed remote builds in B24183: Diff 33301.Nov 15 2023, 4:12 PM
ginsu requested review of this revision.Nov 15 2023, 4:12 PM
ashoat added a comment.Nov 16 2023, 5:47 AM

Can you share a screenshot of the UI that was changed? Not just the pill, but the pill in the context of where it's used

ginsu edited the test plan for this revision. (Show Details)Nov 16 2023, 1:08 PM
ginsu added a comment.Nov 16 2023, 1:10 PM

Can you share a screenshot of the UI that was changed? Not just the pill, but the pill in the context of where it's used

amended the test plan to show all the places this element is used in the web app

inka accepted this revision.Nov 22 2023, 3:43 AM
This revision is now accepted and ready to land.Nov 22 2023, 3:43 AM
ginsu updated this revision to Diff 33610.Nov 26 2023, 6:05 PM

rebase before landing

Harbormaster completed remote builds in B24411: Diff 33610.Nov 26 2023, 7:01 PM
Closed by commit rCOMM02d9845ea208: [web] introduce keyserver pill component (authored by ginsu). · Explain WhyNov 26 2023, 8:18 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMM02d9845ea208: [web] introduce keyserver pill component.

Revision Contents
Changeset List

Diff 33614

View Options

web/components/keyserver-pill.css

import ExpoModulesCore import ExpoModulesCore
import CryptoKit
public class AESCryptoModule: Module { public class AESCryptoModule: Module {
public func definition() -> ModuleDefinition { public func definition() -> ModuleDefinition {
Name("AESCrypto") Name("AESCrypto")
Function("hello") { () -> String in Function("generateKey", generateKey)
return "Hello world! 👋"
} }
} }
// MARK: - Function implementations
private func generateKey(destination: Uint8Array) throws {
let key = SymmetricKey(size: .bits256)
guard destination.byteLength * 8 == key.bitCount else {
throw InvalidKeyLengthException()
}
atulUnsubmitted
Not Done
Inline Actions

Before we even generate key via SymmetricKey, should we check that destination.byteLength is 32 and throw InvalidDestinationSizeException() if not?

It seems like destination is the input that we want to validate, so we should just do that directly? It's not really so much that SymmetricKey is giving us incorrect size key since it's (I'm assuming) always going to give us exactly the size we're asking for?

Feel free to re-request review if there's something I'm missing here.

atul: Before we even generate `key` via `SymmetricKey`, should we check that `destination.byteLength`…
bartekAuthorUnsubmitted
Done
Inline Actions

The only reason the guard is below SymmetricKey is that I wanted to use its bitCount property to get the desired destination length, but you're right that it can be done this way:

guard destination.byteLength == KEY_SIZE else {
  throw InvalidKeyLengthException()
}
let key = SymmetricKey(size: .bits256)

I'll refactor this as it is more clear solution

bartek: The only reason the guard is below `SymmetricKey` is that I wanted to use its `bitCount`…
key.withUnsafeBytes { bytes in
let _ = bytes.copyBytes(to: destination.rawBufferPtr())
}
}
// MARK: - Utilities
extension TypedArray {
func rawBufferPtr() -> UnsafeMutableRawBufferPointer {
UnsafeMutableRawBufferPointer(start: self.rawPointer,
count: self.byteLength)
}
}
// MARK: - Exception definitions
private class InvalidKeyLengthException: Exception {
override var reason: String {
"The AES key has invalid length"
}
} }
View Options

web/components/keyserver-pill.react.js

import ExpoModulesCore import ExpoModulesCore
import CryptoKit
public class AESCryptoModule: Module { public class AESCryptoModule: Module {
public func definition() -> ModuleDefinition { public func definition() -> ModuleDefinition {
Name("AESCrypto") Name("AESCrypto")
Function("hello") { () -> String in Function("generateKey", generateKey)
return "Hello world! 👋"
} }
} }
// MARK: - Function implementations
private func generateKey(destination: Uint8Array) throws {
let key = SymmetricKey(size: .bits256)
guard destination.byteLength * 8 == key.bitCount else {
throw InvalidKeyLengthException()
}
atulUnsubmitted
Not Done
Inline Actions

Before we even generate key via SymmetricKey, should we check that destination.byteLength is 32 and throw InvalidDestinationSizeException() if not?

It seems like destination is the input that we want to validate, so we should just do that directly? It's not really so much that SymmetricKey is giving us incorrect size key since it's (I'm assuming) always going to give us exactly the size we're asking for?

Feel free to re-request review if there's something I'm missing here.

atul: Before we even generate `key` via `SymmetricKey`, should we check that `destination.byteLength`…
bartekAuthorUnsubmitted
Done
Inline Actions

The only reason the guard is below SymmetricKey is that I wanted to use its bitCount property to get the desired destination length, but you're right that it can be done this way:

guard destination.byteLength == KEY_SIZE else {
  throw InvalidKeyLengthException()
}
let key = SymmetricKey(size: .bits256)

I'll refactor this as it is more clear solution

bartek: The only reason the guard is below `SymmetricKey` is that I wanted to use its `bitCount`…
key.withUnsafeBytes { bytes in
let _ = bytes.copyBytes(to: destination.rawBufferPtr())
}
}
// MARK: - Utilities
extension TypedArray {
func rawBufferPtr() -> UnsafeMutableRawBufferPointer {
UnsafeMutableRawBufferPointer(start: self.rawPointer,
count: self.byteLength)
}
}
// MARK: - Exception definitions
private class InvalidKeyLengthException: Exception {
override var reason: String {
"The AES key has invalid length"
}
} }
View Options

web/sidebar/community-creation/community-creation-keyserver-label.css

import ExpoModulesCore import ExpoModulesCore
import CryptoKit
public class AESCryptoModule: Module { public class AESCryptoModule: Module {
public func definition() -> ModuleDefinition { public func definition() -> ModuleDefinition {
Name("AESCrypto") Name("AESCrypto")
Function("hello") { () -> String in Function("generateKey", generateKey)
return "Hello world! 👋"
} }
} }
// MARK: - Function implementations
private func generateKey(destination: Uint8Array) throws {
let key = SymmetricKey(size: .bits256)
guard destination.byteLength * 8 == key.bitCount else {
throw InvalidKeyLengthException()
}
atulUnsubmitted
Not Done
Inline Actions

Before we even generate key via SymmetricKey, should we check that destination.byteLength is 32 and throw InvalidDestinationSizeException() if not?

It seems like destination is the input that we want to validate, so we should just do that directly? It's not really so much that SymmetricKey is giving us incorrect size key since it's (I'm assuming) always going to give us exactly the size we're asking for?

Feel free to re-request review if there's something I'm missing here.

atul: Before we even generate `key` via `SymmetricKey`, should we check that `destination.byteLength`…
bartekAuthorUnsubmitted
Done
Inline Actions

The only reason the guard is below SymmetricKey is that I wanted to use its bitCount property to get the desired destination length, but you're right that it can be done this way:

guard destination.byteLength == KEY_SIZE else {
  throw InvalidKeyLengthException()
}
let key = SymmetricKey(size: .bits256)

I'll refactor this as it is more clear solution

bartek: The only reason the guard is below `SymmetricKey` is that I wanted to use its `bitCount`…
key.withUnsafeBytes { bytes in
let _ = bytes.copyBytes(to: destination.rawBufferPtr())
}
}
// MARK: - Utilities
extension TypedArray {
func rawBufferPtr() -> UnsafeMutableRawBufferPointer {
UnsafeMutableRawBufferPointer(start: self.rawPointer,
count: self.byteLength)
}
}
// MARK: - Exception definitions
private class InvalidKeyLengthException: Exception {
override var reason: String {
"The AES key has invalid length"
}
} }
View Options

web/sidebar/community-creation/community-creation-keyserver-label.react.js

import ExpoModulesCore import ExpoModulesCore
import CryptoKit
public class AESCryptoModule: Module { public class AESCryptoModule: Module {
public func definition() -> ModuleDefinition { public func definition() -> ModuleDefinition {
Name("AESCrypto") Name("AESCrypto")
Function("hello") { () -> String in Function("generateKey", generateKey)
return "Hello world! 👋"
} }
} }
// MARK: - Function implementations
private func generateKey(destination: Uint8Array) throws {
let key = SymmetricKey(size: .bits256)
guard destination.byteLength * 8 == key.bitCount else {
throw InvalidKeyLengthException()
}
atulUnsubmitted
Not Done
Inline Actions

Before we even generate key via SymmetricKey, should we check that destination.byteLength is 32 and throw InvalidDestinationSizeException() if not?

It seems like destination is the input that we want to validate, so we should just do that directly? It's not really so much that SymmetricKey is giving us incorrect size key since it's (I'm assuming) always going to give us exactly the size we're asking for?

Feel free to re-request review if there's something I'm missing here.

atul: Before we even generate `key` via `SymmetricKey`, should we check that `destination.byteLength`…
bartekAuthorUnsubmitted
Done
Inline Actions

The only reason the guard is below SymmetricKey is that I wanted to use its bitCount property to get the desired destination length, but you're right that it can be done this way:

guard destination.byteLength == KEY_SIZE else {
  throw InvalidKeyLengthException()
}
let key = SymmetricKey(size: .bits256)

I'll refactor this as it is more clear solution

bartek: The only reason the guard is below `SymmetricKey` is that I wanted to use its `bitCount`…
key.withUnsafeBytes { bytes in
let _ = bytes.copyBytes(to: destination.rawBufferPtr())
}
}
// MARK: - Utilities
extension TypedArray {
func rawBufferPtr() -> UnsafeMutableRawBufferPointer {
UnsafeMutableRawBufferPointer(start: self.rawPointer,
count: self.byteLength)
}
}
// MARK: - Exception definitions
private class InvalidKeyLengthException: Exception {
override var reason: String {
"The AES key has invalid length"
}
} }