KLO-152 : fix(web) update ui changes in router screen

[nxtcoder19]

Resolves kloudlite/kloudlite/issues/39

• make domain as href in router listing
• add rewrite switch case in route ui
• change path with "/" while updating route path

Attachment:

[sourcery-ai]

PR Type: Enhancement

PR Summary: This pull request introduces several UI enhancements to the router screen, including making domain names clickable as hyperlinks, adding a rewrite switch case in the route UI, and ensuring that route paths start with '/'. These changes aim to improve the user experience by providing more intuitive interactions and clearer information presentation.

Decision: Comment

📝 Type: 'Enhancement' - not supported yet.

• Sourcery currently only approves 'Typo fix' PRs.

✅ Issue addressed: this change correctly addresses the issue or implements the desired feature.

No details provided.

📝 Complexity: the changes are too large or complex for Sourcery to approve.

• Big diff: the diff is too large to approve with confidence.

General suggestions:

• Ensure that new UI elements like the rewrite switch are well-integrated with existing functionality and that their state is managed correctly across component re-renders.
• Consider the impact of removing clipboard functionality on user experience. Users who frequently need to copy domain names might miss the previous feature.
• Communicate significant UX changes, such as opening domain names in a new tab instead of copying them to the clipboard, clearly to users through UI hints or documentation.
• Maintain visual cues for interactivity, especially for elements like domain names that have changed functionality from copying to opening in a new tab.

src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/handle-route.tsx: The code change introduces added complexity due to a new feature and layout adjustments; consider simplifying by abstracting reusable parts and streamlining state management.

The recent changes introduce additional complexity, primarily due to the introduction of a new Switch component for the "Rewrite" functionality, increased form complexity with an additional field to manage, and more intricate layout adjustments to accommodate the new UI element. While these changes add new features, they also increase the cognitive load required to understand and maintain this component.

To simplify, consider abstracting the Switch component and its layout into a reusable component if this pattern is common across the application. Additionally, streamlining the state management for the new reWrite field could reduce complexity. Extracting form submission and validation logic into utility functions or hooks could also make the main component more readable and maintainable.

Here's a simplified approach for integrating the Switch component, focusing on reducing verbosity and simplifying state management:

const Root = (props: IDialog) => {
  const { values, errors, handleSubmit, handleChange } = useForm({
    initialValues: {
      // Other initial values
      reWrite: false, // Simplified handling of the new field
    },
    // Validation schema and onSubmit logic
  });

  return (
    <Popup.Form onSubmit={handleSubmit}>
      <Popup.Content className="flex flex-col gap-3xl">
        {/* Other form fields */}
        <div className="flex items-center">
          <label htmlFor="reWrite">Rewrite</label>
          <Switch
            id="reWrite"
            checked={values.reWrite}
            onChange={(e) => handleChange('reWrite')(e.target.checked)}
          />
        </div>
      </Popup.Content>
      {/* Footer */}
    </Popup.Form>
  );
};

This approach aims to maintain the functionality while reducing the overall complexity, making the component easier to understand and maintain.

Thanks for using Sourcery. We offer it for free for open source projects and would be very grateful if you could help us grow. If you like it, would you consider sharing Sourcery on your favourite social media? ✨

Share Sourcery

• X
• Mastodon
• LinkedIn
• Facebook

---

Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.

[sourcery-ai]

issue (llm): The implementation of a toggle to show more domains is a thoughtful UI enhancement. However, ensure that this state is reset appropriately when the component is re-rendered with new items to avoid displaying incorrect information.

[sourcery-ai]

nitpick (llm): Preventing the default event on a div element's click event is unusual unless it's part of a larger interactive element. Ensure this is the intended behavior, as it might interfere with accessibility if not handled correctly.

[sourcery-ai]

issue (llm): Removing the toast notification for successful clipboard actions changes the user feedback mechanism. Ensure that this aligns with the UX design principles adopted for the application, as users might expect some form of acknowledgment when they perform actions.

[sourcery-ai]

suggestion (llm): Changing the action from copying to clipboard to opening the domain in a new tab is a significant UX change. This should be clearly communicated to users, possibly through UI hints or documentation, to set the correct expectations.

[sourcery-ai]

suggestion (llm): The removal of the cursor-pointer class along with the copy functionality might reduce the discoverability of the new 'open in new tab' feature. Consider keeping visual cues that suggest interactivity to the user.

[sourcery-ai]

praise (llm): The addition of the Switch component is a good move for enhancing the UI. It's important to ensure that its state management is properly integrated with the form's submission logic, especially since it's a new field (reWrite) being introduced.