WEB: Add templated while account creation and fixes minor ui changes

[nxtCoder19]

Summary by Sourcery

Improve the account creation process by ensuring the default environment is set up and errors are handled. Enhance UI components by updating the avatar border style and fixing the cluster status badge display.

Bug Fixes:

• Fix the display of the cluster status badge to correctly show 'Cluster Offline' when the cluster is not online.

Enhancements:

• Update the avatar component to use a dashed border for template avatars.
• Ensure account creation process sets up the default environment and handles errors appropriately.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request implements UI improvements and functionality enhancements for the console application. The changes focus on updating the display of managed resources and apps, improving the account creation process, and refining the visual representation of environments and avatars.

Class diagram for updated ListView component

classDiagram
    class ListView {
        +items: IResource[]
        +onAction: function
        +templates: IResource
        +environment: IEnvironmentContext
        +clusters: ClusterStatusV2
        +isClusterOnline: boolean
    }
    class IEnvironmentContext {
        +clusterName: string
    }
    class ClusterStatusV2 {
        +findClusterStatus(clusterName: string): boolean
    }
    ListView --> IEnvironmentContext
    ListView --> ClusterStatusV2

Loading

Class diagram for NewAccount component

classDiagram
    class NewAccount {
        +ensureAccountClientSide(account: string)
        +setupDefaultEnvironment(): Promise
    }
    class API {
        +setupDefaultEnvironment(): Promise
    }
    NewAccount --> API

Loading

Class diagram for AvatarBase component

classDiagram
    class AvatarBase {
        +isTemplate: boolean
        +size: string
        +border: string
    }

Loading

File-Level Changes

Change	Details	Files
Enhanced cluster status display in managed resources and apps views	Added logic to show cluster offline status Implemented isClusterOnline check using findClusterStatus function Added conditional rendering for empty cluster name	src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx src/apps/console/routes/_main+/$account+/env+/$environment+/apps/apps-resources-v2.tsx
Improved account creation process	Added setupDefaultEnvironment API call after account creation Implemented ensureAccountClientSide function call Updated navigation after successful account creation	src/apps/console/routes/_a+/new-team.tsx
Updated visual elements in environment and avatar components	Modified TemplateAvatar appearance in environment resources view Updated AvatarBase component to use dashed border for template avatars	src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx src/design-system/components/atoms/avatar.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @nxtCoder19 - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider explaining the reasoning behind the changes in the account creation process, particularly the addition of environment setup. This could help future maintainers understand the context of these modifications.
• There seems to be some code duplication in the ListView components across different files. Consider abstracting common logic into a shared function or component to improve maintainability and reduce redundancy.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

suggestion: Consider extracting cluster status check into a reusable function

The findClusterStatus(clusters[environment.clusterName]) pattern is repeated in multiple files. Consider creating a custom hook or utility function to encapsulate this logic, which would improve code reusability and maintainability.

const useClusterStatus = () => {
  const environment = useEnvironment();
  const clusters = useClusters();
  return useCallback(() => 
    findClusterStatus(clusters[environment.clusterName]),
    [clusters, environment.clusterName]
  );
};

// In the component:
const getClusterStatus = useClusterStatus();
const isClusterOnline = getClusterStatus();