Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FEAT: Optimize List View Components with Table Design and Sorting Across Project Pages #819

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

tahierhussain
Copy link
Contributor

What

This PR optimizes and enhances the list view components across multiple pages (workflow, prompt studio, LLM, vector DB, embedding, and x2text). The improvements include transitioning to a table-based design and implementing a sorting feature.

Why

Enhancing the list view components was necessary to:

  1. Streamline Code Structure: Increase modularity by making the list view reusable across all pages, simplifying maintenance and scalability.
  2. Improve Usability: Provide users with a cleaner, more consistent table view for viewing and managing project data.
  3. Enable Data Interaction: Introduce sorting functionality to allow users to efficiently organize data by attributes such as Name, Owner By, Created At, and Modified At.

How

  1. Component Optimization and Reusability: Refactored the list view structure to be modular, enabling its reuse across multiple pages, reducing redundant code.
  2. Table Design Update: Implemented a table-based format to enhance readability and data organization, providing a better user experience.
  3. Sorting Feature: Added sorting functionality for key columns, enabling efficient data management on each page where the list view is used.

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

Yes, there are some substantial refactorings of the existing components in this PR, so there is a possibility of breaking existing features.

Database Migrations

NA

Env Config

NA

Relevant Docs

NA

Related Issues or PRs

NA

Dependencies Versions

NA

Notes on Testing

NA

Screenshots

Workflow Projects Page:

Screenshot from 2024-10-25 09-13-13

Prompt Studio Projects Page:

Screenshot from 2024-10-25 09-13-21

LLM Adapters Page:

Screenshot from 2024-10-25 09-13-28

VectorDB Adapters Page:

Screenshot from 2024-10-25 09-13-34

Embedding Adapters Page:

Screenshot from 2024-10-25 09-13-39

X2Text Adapters Page:

Screenshot from 2024-10-25 09-13-44

Checklist

I have read and understood the Contribution Guidelines.

Copy link
Contributor

@vishnuszipstack vishnuszipstack left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few comments on repeated url usage, pls address those. everything else looks fine.

Copy link

sonarcloud bot commented Nov 4, 2024

Copy link
Contributor

github-actions bot commented Nov 4, 2024

filepath function $$\textcolor{#23d18b}{\tt{passed}}$$ SUBTOTAL
$$\textcolor{#23d18b}{\tt{worker/src/unstract/worker/clients/test\_docker.py}}$$ $$\textcolor{#23d18b}{\tt{test\_logs}}$$ $$\textcolor{#23d18b}{\tt{1}}$$ $$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{worker/src/unstract/worker/clients/test\_docker.py}}$$ $$\textcolor{#23d18b}{\tt{test\_cleanup}}$$ $$\textcolor{#23d18b}{\tt{1}}$$ $$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{worker/src/unstract/worker/clients/test\_docker.py}}$$ $$\textcolor{#23d18b}{\tt{test\_cleanup\_skip}}$$ $$\textcolor{#23d18b}{\tt{1}}$$ $$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{worker/src/unstract/worker/clients/test\_docker.py}}$$ $$\textcolor{#23d18b}{\tt{test\_client\_init}}$$ $$\textcolor{#23d18b}{\tt{1}}$$ $$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{worker/src/unstract/worker/clients/test\_docker.py}}$$ $$\textcolor{#23d18b}{\tt{test\_get\_image\_exists}}$$ $$\textcolor{#23d18b}{\tt{1}}$$ $$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{worker/src/unstract/worker/clients/test\_docker.py}}$$ $$\textcolor{#23d18b}{\tt{test\_get\_image}}$$ $$\textcolor{#23d18b}{\tt{1}}$$ $$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{worker/src/unstract/worker/clients/test\_docker.py}}$$ $$\textcolor{#23d18b}{\tt{test\_get\_container\_run\_config}}$$ $$\textcolor{#23d18b}{\tt{1}}$$ $$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{worker/src/unstract/worker/clients/test\_docker.py}}$$ $$\textcolor{#23d18b}{\tt{test\_get\_container\_run\_config\_without\_mount}}$$ $$\textcolor{#23d18b}{\tt{1}}$$ $$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{worker/src/unstract/worker/clients/test\_docker.py}}$$ $$\textcolor{#23d18b}{\tt{test\_run\_container}}$$ $$\textcolor{#23d18b}{\tt{1}}$$ $$\textcolor{#23d18b}{\tt{1}}$$
$$\textcolor{#23d18b}{\tt{TOTAL}}$$ $$\textcolor{#23d18b}{\tt{9}}$$ $$\textcolor{#23d18b}{\tt{9}}$$

Comment on lines 10 to 26
function ViewTools({
isLoading,
isEmpty,
listOfTools,
setOpenAddTool,
listOfTools = [],
setOpenAddTool = () => {},
handleEdit,
handleDelete,
titleProp,
descriptionProp,
iconProp,
descriptionProp = "",
iconProp = "",
idProp,
centered,
centered = false,
isClickable = true,
handleShare,
showOwner,
type,
handleShare = null,
showOwner = false,
type = "",
}) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NIT: Move props with default values to bottom for better code readability.

Comment on lines +129 to +130
id: user.id,
email: user.email,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why optional chaining got removed here?

(adapter, isEdit) => {
const requestOptions = {
method: "GET",
url: `${adapterBaseUrl}/users/${adapter.id}/`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add optional chaining where ever necessary.

);

const renderDateColumn = useCallback(
(text) => (text ? moment(text).format("YYYY-MM-DD HH:mm:ss") : "-"),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move the data formatter to static func? Are they reuseable?

const { setPostHogCustomEvent } = usePostHogEvents();

const { setAlertDetails } = useAlertStore();
const axiosPrivate = useAxiosPrivate();
const getBaseUrl = (sessionDetails) =>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getBaseUrl naming is bit miss leading since we provide more than baseUrl also can we move this function to static functions where we actually provide base url (till org Id) when we pass sessionDetails?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants