Release v1.0.8 merged to main #322
Conversation
Web/devdoc
WEB: Update ui related changes of console
WEB: Add templated while account creation and fixes minor ui changes
WEB: Console changes and ui fixes
⚡ Improved cluster-status
fixed error that occured while removing the user form the team.
🐛 Fixed issue with user management
WEB: Discard changes working fine when switching tab of app settings
WEB: User Acess management changes
intercept app cli api updated
Add no logs and metrics banner when cluster is offline
* fixed profile dropdown menu not closing issue, upgraded react-select and fixed react-select issue for disabled option
Remove delete option for local cluster
Update changes in image discovery and infra cluster listing
Reviewer's Guide by SourceryThis pull request implements several significant changes across multiple files in the Kloudlite project. The changes include updates to the user interface, improvements in functionality, and modifications to the project structure. Key areas affected include the console application, authentication, development documentation, and various components and utilities. Sequence diagram for Registry Image InstructionsequenceDiagram
actor User
participant RegistryImageInstruction
participant Popup
participant CodeView
participant Banner
User->>RegistryImageInstruction: Open Instruction
RegistryImageInstruction->>Popup: Show Popup
Popup->>CodeView: Display URL/Script
CodeView-->>User: Copy URL/Script
Popup->>Banner: Show Info Banner
Banner-->>User: Display Metadata Info
Class diagram for updated icon componentsclassDiagram
class AvatarNotification {
+size: number
}
class EnvIconComponent {
+size: number
}
class EnvTemplateIconComponent {
+size: number
}
AvatarNotification --> EnvIconComponent : uses
AvatarNotification --> EnvTemplateIconComponent : uses
Class diagram for updated Popup FormclassDiagram
class PopupForm {
+onSubmit(e)
}
class PopupContent {
}
class PopupFooter {
}
class LocalDeviceClusterInstructions {
+show: boolean
+onClose()
}
PopupForm --> PopupContent
PopupForm --> PopupFooter
PopupForm --> LocalDeviceClusterInstructions : uses
Class diagram for new DragResize componentclassDiagram
class DragResize {
+isMouseDown: boolean
+onMouseMove(e)
+onMouseDown()
+onMouseUp()
}
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @nxtcoder19 - I've reviewed your changes and found some issues that need to be addressed.
Blocking issues:
- Hard-coded RECAPTCHA_SITE_KEY found. (link)
- Hard-coded RECAPTCHA_SITE_KEY found in environment file. (link)
- Hard-coded RECAPTCHA_SITE_KEY found in environment file. (link)
Overall Comments:
- The new ClusterStatusProvider and useClusterStatusV3 hook look like good improvements to cluster status management. Consider adding some unit tests to ensure their reliability.
- The updates to environment and app handling with respect to cluster status are a nice enhancement. It might be helpful to add some comments in the code explaining the logic behind these changes for future maintainers.
- The refinements to user management and permissions are good. Consider creating a separate utility function for checking owner status to reduce code duplication.
Here's what I looked at during the review
- 🟡 General issues: 2 issues found
- 🔴 Security: 3 blocking issues, 3 other issues
- 🟡 Testing: 1 issue found
- 🟢 Complexity: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| <div className="flex flex-row gap-lg"> | ||
| <span className="bodySm-semibold text-sm py-md"> | ||
| Copy your Webhook Token: | ||
| </span> | ||
| <Chip | ||
| item={{ name: 'web token' }} | ||
| label={ | ||
| <CopyContentToClipboard | ||
| content={data.klWebhookAuthToken} | ||
| toastMessage="Webhook token copied successfully." | ||
| /> | ||
| } | ||
| /> | ||
| </div> | ||
| <ExtendedFilledTab | ||
| value={active} | ||
| onChange={setActive} | ||
| items={[ | ||
| { | ||
| label: 'Script', | ||
| to: 'script-url', | ||
| value: 'script-url', | ||
| }, | ||
| { label: 'cURL Command', to: 'url', value: 'url' }, | ||
| ]} | ||
| /> | ||
|
|
||
| {/* {data.url} */} | ||
| {active === 'script-url' && ( | ||
| <div className="flex flex-col gap-3xl"> | ||
| {data.scriptUrl && | ||
| data.scriptUrl.map((u) => ( | ||
| <CodeView | ||
| key={u} | ||
| preClassName="!overflow-none text-wrap break-words" | ||
| copy={false} | ||
| data={u} | ||
| language="sh" | ||
| /> | ||
| ))} | ||
| <Banner | ||
| type="info" | ||
| body={ | ||
| <div className="flex flex-col gap-md"> | ||
| <span className="bodyMd-medium"> | ||
| Shell Script Example with Image and Meta | ||
| Information: | ||
| </span> | ||
| {data.scriptUrlExample && | ||
| data.scriptUrlExample.map((d) => ( | ||
| <span | ||
| className="font-mono text-text-default" | ||
| key={d} | ||
| > | ||
| {d} | ||
| </span> | ||
| ))} | ||
| </div> | ||
| } | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
🚨 suggestion (security): Added UI for displaying and copying webhook token
The new UI for webhook token management improves user experience. Ensure that the token is properly secured and that its exposure in the UI doesn't pose any security risks.
<div className="flex flex-row gap-lg">
<span className="bodySm-semibold text-sm py-md">Webhook Token:</span>
<Chip
item={{ name: 'web token' }}
label={
<CopyContentToClipboard
content={data.klWebhookAuthToken}
toastMessage="Webhook token copied securely."
/>
}
/>
</div>
<ProtectedContent>
<ExtendedFilledTab
value={active}
onChange={setActive}
items={[
{ label: 'Script', to: 'script-url', value: 'script-url' },
{ label: 'cURL Command', to: 'url', value: 'url' },
]}
/>
{/* Rest of the code remains unchanged */}
</ProtectedContent>
| ]} | ||
| onChange={({ value }) => { | ||
| handleChange('clusterName')(dummyEvent(value)); | ||
| <Radio.Root |
There was a problem hiding this comment.
suggestion (testing): New feature for Environment/Template selection added
A new radio button selection for Environment vs Environment Template has been added. Ensure that this new feature is thoroughly tested and that it integrates well with existing functionality.
<Radio.Root
direction="horizontal"
value={values.radioType}
onValueChange={(value) => handleChange('radioType')(dummyEvent(value))}
aria-label="Select environment type"
>
<Radio.Item value="environment" label="Environment" />
<Radio.Item value="template" label="Environment Template" />
</Radio.Root>
| @@ -101,7 +120,8 @@ | |||
| metadata: { | |||
| name: val.name, | |||
| }, | |||
| clusterName: val.clusterName || '', | |||
| clusterName: | |||
There was a problem hiding this comment.
suggestion: Conditional cluster selection based on radioType
The clusterName is now conditionally set based on the new radioType field. Verify that this logic works as intended and doesn't introduce any edge cases or bugs.
clusterName:
val.radioType === 'template'
? ''
: val.clusterName || '',
| /> | ||
| ), | ||
| render: () => { | ||
| if (item.role === 'account_owner') return null; |
There was a problem hiding this comment.
🚨 suggestion (security): New check for account owner role
A new check for the account_owner role has been added. Ensure that this properly restricts actions for account owners and doesn't introduce any security vulnerabilities.
| <script | ||
| async | ||
| defer | ||
| src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || ''}`} |
There was a problem hiding this comment.
🚨 suggestion (security): Consider error handling for missing reCAPTCHA key
While using an empty string as a fallback is safe, it might be better to throw an error if the NEXT_PUBLIC_RECAPTCHA_SITE_KEY is not set. This would prevent the application from running without proper reCAPTCHA configuration, which could lead to unexpected behavior.
| src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || ''}`} | |
| src={`https://www.google.com/recaptcha/enterprise.js?render=${ | |
| process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || | |
| (() => { | |
| throw new Error('NEXT_PUBLIC_RECAPTCHA_SITE_KEY is not set'); | |
| })() | |
| }`} |
| const resp = clusterNames.reduce((acc, curr) => { | ||
| if (!curr) { | ||
| return acc; | ||
| } | ||
|
|
||
| if (acc[curr] && acc[curr] >= 1) { | ||
| acc[curr] -= acc[curr]; | ||
| } | ||
|
|
||
| if (acc[curr] === 0) { | ||
| delete acc[curr]; | ||
| } | ||
|
|
||
| return acc; | ||
| }, s); | ||
|
|
||
| return resp; |
There was a problem hiding this comment.
suggestion (code-quality): Inline variable that is immediately returned (inline-immediately-returned-variable)
| const resp = clusterNames.reduce((acc, curr) => { | |
| if (!curr) { | |
| return acc; | |
| } | |
| if (acc[curr] && acc[curr] >= 1) { | |
| acc[curr] -= acc[curr]; | |
| } | |
| if (acc[curr] === 0) { | |
| delete acc[curr]; | |
| } | |
| return acc; | |
| }, s); | |
| return resp; | |
| return clusterNames.reduce((acc, curr) => { | |
| if (!curr) { | |
| return acc; | |
| } | |
| if (acc[curr] && acc[curr] >= 1) { | |
| acc[curr] -= acc[curr]; | |
| } | |
| if (acc[curr] === 0) { | |
| delete acc[curr]; | |
| } | |
| return acc; | |
| }, s); | |
Explanation
Something that we often see in people's code is assigning to a result variableand then immediately returning it.
Returning the result directly shortens the code and removes an unnecessary
variable, reducing the mental load of reading the function.
Where intermediate variables can be useful is if they then get used as a
parameter or a condition, and the name can act like a comment on what the
variable represents. In the case where you're returning it from a function, the
function name is there to tell you what the result is, so the variable name
is unnecessary.
| ); | ||
|
|
||
| const isOwner = useCallback(() => { | ||
| if (!teamMembers || !currentUser) return false; |
There was a problem hiding this comment.
suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)
| if (!teamMembers || !currentUser) return false; | |
| if (!teamMembers || !currentUser) { |
Explanation
It is recommended to always use braces and create explicit statement blocks.Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).
| @@ -72,6 +74,12 @@ const SettingGeneral = () => { | |||
| }, | |||
| }); | |||
|
|
|||
| const isOwner = useMemo(() => { | |||
| if (!teamMembers || !currentUser) return false; | |||
There was a problem hiding this comment.
suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)
| if (!teamMembers || !currentUser) return false; | |
| if (!teamMembers || !currentUser) { |
Explanation
It is recommended to always use braces and create explicit statement blocks.Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).
| } | ||
| ); | ||
| const isOwner = useMemo(() => { | ||
| if (!teamMembers || !currentUser) return false; |
There was a problem hiding this comment.
suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)
| if (!teamMembers || !currentUser) return false; | |
| if (!teamMembers || !currentUser) { |
Explanation
It is recommended to always use braces and create explicit statement blocks.Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).
| /> | ||
| ), | ||
| render: () => { | ||
| if (item.role === 'account_owner') return null; |
There was a problem hiding this comment.
suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)
| if (item.role === 'account_owner') return null; | |
| if (item.role === 'account_owner') { |
Explanation
It is recommended to always use braces and create explicit statement blocks.Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).
Summary by Sourcery
Merge release v1.0.8 into the main branch, introducing new features like local cluster attachment instructions and video components, enhancing existing GraphQL queries with additional parameters and fields, and fixing issues related to authentication mutations. The build system is updated with new video handling dependencies, and unused IoT console queries are removed.
New Features:
consoleSetupDefaultEnvironmentto set up a default environment.EnvIconComponentandEnvTemplateIconComponentfor rendering environment-related icons.LocalDeviceClusterInstructionscomponent to guide users on attaching local clusters.PopupVideocomponent for displaying video content in a popup format.VideoSectioncomponent to showcase Kloudlite in action with video content.NoLogsAndMetricsBannercomponent to display messages when logs and metrics are unavailable.Bug Fixes:
authRequestResetPasswordmutation by adding acaptchaTokenparameter.authSignUpWithEmailmutation to include acaptchaTokenparameter.authLoginmutation by adding atokenparameter for reCAPTCHA verification.Enhancements:
consoleListClusterStatusquery to include asearchparameter for more flexible querying.consoleGetRegistryImageUrlquery to include additional fields likeurlExampleandklWebhookAuthToken.consoleListMembershipsForAccountquery to include theidfield for user details.consoleListRegistryImagesquery to support more detailed image data retrieval.consoleListBYOKClustersquery to support searching and pagination.consoleListGlobalVPNDevicesquery to include more detailed device information.Build:
pnpm-lock.yamlto include new dependencies likevideo.jsand related packages for video handling.Chores:
Taskfile.yamlto include a new task for pushing dashboard containers.