feat: update models list ui/ux #1136
Conversation
orangecoloured
requested review from
EiffelFly,
pinglin and
xiaofei-du
as code owners
orangecoloured
changed the title
|
@orangecoloured There is a pagination component in https://ui.shadcn.com/docs/components/pagination. I would suggest that we use their implementation due to it's more lean toward the "Composition Component" |
|
@EiffelFly we can't jump to pages and their component doesn't seem to have the "1 of 2" indicator. For me it feels like replacing a couple of elements and the rest of the component will stay the same. Basically I will just replace the |
@orangecoloured Fair point, in this case we don't need to put it into design-system due to it's not universal enough. If we still want to put it into design-system then we need to think in long-term.
That is the reason I mentioned the shacdn/ui's pagination 🦈 I think it's on your call. We can definitely let it stay in toolkit as a small component, or we implement shacdn/ui's component in design-system and adapt it in the model list page |
|
@EiffelFly refactored the Pagination component. |
|
@orangecoloured Hi Alex, please make sure the PR is at least buildable 🦈 So I can test the functionality on my machine ~ |
orangecoloured
force-pushed
the
alexpetcoglo/ins-4472-update-models-list-uiux
branch
from
40d46a1
to
fd98e97
Compare
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (1 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
There was a problem hiding this comment.
@orangecoloured It seems like the feature is not ready, so I comment some code that I think it's worth discussing
packages/toolkit/src/lib/react-query-service/model/useModels.ts
Outdated
Show resolved
Hide resolved
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (1 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (1 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
3 similar comments
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (1 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (1 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (1 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
orangecoloured
force-pushed
the
alexpetcoglo/ins-4472-update-models-list-uiux
branch
from
616d668
to
170d38b
Compare
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (1 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
There was a problem hiding this comment.
@orangecoloured I think generally speaking the code quality is nice, I left some minor stuff in the comment, please check them
packages/toolkit/src/lib/react-query-service/model/useModels.ts
Outdated
Show resolved
Hide resolved
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (1 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
There was a problem hiding this comment.
@orangecoloured I think the code wise it's good now, I left some comment and I will begin to review the functionality
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (1 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (2 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
There was a problem hiding this comment.
@orangecoloured I left some comments please check them. Once Heiru merged his PR into main I will begin to review the functionality and style
packages/toolkit/src/lib/react-query-service/model/useCreateUserModel.ts
Outdated
Show resolved
Hide resolved
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
77.63 KB (2 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
orangecoloured
force-pushed
the
alexpetcoglo/ins-4472-update-models-list-uiux
branch
from
e046465
to
755fd45
Compare
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
…as initial value (#1207) Because - fix model trigger can not get into auto-gen-form as initial value This commit - fix model trigger can not get into auto-gen-form as initial value --------- Co-authored-by: Alexander Petcoglo <mail@rckt.cc>
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
1 similar comment
📦 Next.js Bundle Analysis for instillai-consoleThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
🤖 I have created a release *beep* *boop* --- <details><summary>0.48.0-beta</summary> ## [0.48.0-beta](v0.47.2-beta...v0.48.0-beta) (2024-06-06) ### Features * **pipeline-builder:** replace trigger node with variable node ([#1197](#1197)) ([8a6f06d](8a6f06d)) * update models list ui/ux ([#1136](#1136)) ([88944b4](88944b4)) ### Miscellaneous * update demanded pnpm version to 9.1.4 ([#1188](#1188)) ([bfa6544](bfa6544)) </details> <details><summary>@instill-ai/design-system: 0.70.0</summary> ## [0.70.0](https://github.com/instill-ai/console/compare/@instill-ai/design-system-v0.69.2...@instill-ai/design-system-v0.70.0) (2024-06-06) ### Features * **pipeline-builder:** replace trigger node with variable node ([#1197](#1197)) ([8a6f06d](8a6f06d)) * update models list ui/ux ([#1136](#1136)) ([88944b4](88944b4)) ### Miscellaneous * update demanded pnpm version to 9.1.4 ([#1188](#1188)) ([bfa6544](bfa6544)) </details> <details><summary>@instill-ai/design-tokens: 0.6.0</summary> ## [0.6.0](https://github.com/instill-ai/console/compare/@instill-ai/design-tokens-v0.5.4...@instill-ai/design-tokens-v0.6.0) (2024-06-06) ### Features * update models list ui/ux ([#1136](#1136)) ([88944b4](88944b4)) </details> <details><summary>@instill-ai/toolkit: 0.93.0</summary> ## [0.93.0](https://github.com/instill-ai/console/compare/@instill-ai/toolkit-v0.92.0...@instill-ai/toolkit-v0.93.0) (2024-06-06) ### Features * adapt the new run on version pipeline recipe in console ([#1191](#1191)) ([935bd7c](935bd7c)) * **auto-gen-form:** adapt special model trigger data format ([#1206](#1206)) ([5183d22](5183d22)) * change style of Latest Changes card ([#1196](#1196)) ([45bca1b](45bca1b)) * **hub:** let the total number follow the user filter on hub page ([#1208](#1208)) ([4bdb6b5](4bdb6b5)) * **pipeline-builder:** replace connection with setup in the pipeline recipe ([#1200](#1200)) ([d647392](d647392)) * **pipeline-builder:** replace trigger node with variable node ([#1197](#1197)) ([8a6f06d](8a6f06d)) * **pipeline-builder:** revamp the style of select component dialog ([#1199](#1199)) ([d49de44](d49de44)) * update models list ui/ux ([#1136](#1136)) ([88944b4](88944b4)) ### Bug Fixes * **auto-gen-form:** fix auto gen form didn't support Images field issue ([#1205](#1205)) ([50af828](50af828)) * **auto-gen-form:** fix bug that output markdown not correctly wrapped, cause text hard to read ([#1195](#1195)) ([06540b9](06540b9)) * fix auto-gen-form required field didn't show * sign ([#1193](#1193)) ([cbd2c6a](cbd2c6a)) * fix missing notification title when delete api token ([#1194](#1194)) ([5f40aa8](5f40aa8)) * fix wording of upgrade to starter plan button ([#1198](#1198)) ([6999f38](6999f38)) * **pipeline-builder:** fix the outdated trigger api path in the builder's toolkit ([#1201](#1201)) ([a4e6a18](a4e6a18)) * **subscription:** fix wrongly display upgrade button on the user profile dropdown ([#1202](#1202)) ([5f64c2a](5f64c2a)) ### Documentation * **license:** update repo license ([#1203](#1203)) ([11c21d7](11c21d7)) </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).
Figma
Eraser
It's a bit dirty. But most of the changes related to the models list.