Hi everyone, • I'm working on a top-level UI extension and was wondering — is it possible to create an API extension or backend extension to support it? If so, do you have any examples or documentation you could share? • Is there any way to get cluster list from Top-level product without token? currently I'm getting through (v3/clusters) api (which needs a token). • How can I access/create my token from Top-level product? TIA

you can. https://github.com/rancher/elemental-operator is the backend for Elemental. Since my area is frontend, I don’t know of any documentation about this part. As for the top level product, If you’re logged into Rancher and use: https://github.com/rancher/dashboard/blob/master/shell/pages/home.vue#L258-L260 you’ll get the list of clusters without the need for tokens, if I am not mistaken. Tokens can be managed via the UI on the

user menu

-

account and api keys

https://github.com/rancher/dashboard/blob/master/shell/edit/token.vue#L120-L124 it does a request to

v3/tokens

with the appropriate payload. Theoretically you could do something like:

this.$store.dispatch(`rancher/create`, {
        type:                NORMAN.TOKEN,
        .... where this the payload needed
      }));

just cross-check to what’s going on with the network request

@busy-ability-54059 Is it possible to write a golang http API server for the UI extensions?

the part that I technically know more of is the frontend, so I don’t know the reply to your question

@busy-ability-54059 Thanks for your support so far. Could you suggest some channels where I can ask questions or get help with my queries related to GoLang HTTP servers for UI extensions?

No worries. I wish I could help more. Try the #C3ASABBD1 channel, saying that you want to build a backend piece (operator) for a UI extension on Rancher. The folks from Elemental might also help, but that’s more of a long shot #C028DVCAYLD

Hey @busy-ability-54059, I’m running into a strange issue while installing a custom package from our GitHub repo (not from the npm registry). When I run

npm install

, it says the package is added successfully. However: • I don't see a `node_modules`folder in the project. • Despite that, I can import the package and use its functions (that function uses Vuex dispatch). • Ctrl+clicking on the import takes me only to the specific file I used—not the full package or structure. • The same goes for Axios, where I also don't see

node_modules

, but Ctrl+click takes me inside the Axios file. But I can use Axios without any issue. The real issue: A function from this custom package tries to dispatch a Vuex action, but I get this runtime error:

TypeError: Cannot read properties of undefined (reading 'dispatch')

It seems like something is off with the package resolution or context. Any idea what might be going wrong here and how to fix it? NB: The package from GitHub is widely used in our repos and well tested and working.

First, you should use

yarn

instead of

npm

as it’s the package manager that we use with Rancher Dashboard/Extensions. you can’t see

node_modules

folder because we hide it with

gitignore

: https://github.com/rancher/dashboard/blob/master/creators/extension/app/files/gitignore#L50 As for the

dispatch

, most likely is the context that is wrong… Meaning that’s not the correct way to use the vuex action

dispatch

given the context of the file in which you’re trying to use it. There are quite a few official extensions https://github.com/rancher/ui-plugin-charts/blob/main/manifest.json or https://github.com/rancher/ui-plugin-examples Take some time to browse through their code and get familiar with the patterns. Unless your really in a very unique situation, I am quite confident you’ll find your usecase/code already developed somewhere in these extensions

Hi @busy-ability-54059, Thank you for your response so far! I'm currently working on building an extension and would like to use your design system. However, I'm not sure how to properly integrate it. I’ve looked through your Storybook documentation, but it seems like it's not fully complete. Could you please share any available documentation or guidance on how to use your design system? Thanks in advance!

Best way to proceed: • Run rancher Dashboard project locally (you run it the same way as an extension) and browse through the UI and see the components we offer there. Look at the creation screen for everything under Workloads (Jobs, Deployments, etc). Those forms use a lot of different components. After you find something that is useful, search for it on the codebase and see the usage. Cross-check it with storybook because it might be there and explain it a bit better. That’s how I would do it

Hey, @busy-ability-54059! I saw that you guys have a *`wizard`*component. Do you have any docs on how to use it? I would love to check it out and see how to work with it. TIA

no docs @breezy-airplane-74201… We are behind on that chapter, I know 😢 The gist of it: • https://github.com/rancher/dashboard/blob/master/shell/pages/c/_cluster/apps/charts/install.vue#L1295-L1307 there’s a prop called

steps

, where you configure all of the different steps of the Wizard -> config here: https://github.com/rancher/dashboard/blob/master/shell/pages/c/_cluster/apps/charts/install.vue#L414-L445 • the

name

property on the configuration needs to match the

template

identifier: https://github.com/rancher/dashboard/blob/master/shell/pages/c/_cluster/apps/charts/install.vue#L1466 vs https://github.com/rancher/dashboard/blob/master/shell/pages/c/_cluster/apps/charts/install.vue#L423 • each

template

part is a different ui for each step. Inside that

template

you put the UI elements you want to render each “page” of the wizard The rest you’ll need to go through the wizard component and dig around a bit…

Hi @busy-ability-54059, I followed your suggestion and started building extensions using components from the rancher Dashboard project. I used

Accordion

,

RcButton

,

LabeledInput

,

LabeledSelect

,

Radio

,

TextArea

,

StringList

and

ToggleSwitch

by copying them into my package and using them as usual. Everything works fine in local development—no errors or warnings in the console. However, when I try to build the package for developer load using:

yarn build-pkg my-app

I run into a large number of TypeScript errors. I'm placing the copied components in this path:

/pkg/app-name/design-system/components

I know I'm missing some related type definitions, but I’m not sure where to find them or where exactly they should go in the package. Any guidance on how to properly set this up would be greatly appreciated. Here’s a snippet of the error log I’m seeing:

Building UI Package myapp
  Package name:    myapp-0.1.0
  Package version: 0.1.0
  Output formats:  umd-min
  Output directory: /home/tahsin/go/src/go.bytebuilders.dev/myapp/dist-pkg/myapp-0.1.0
~/go/src/go.bytebuilders.dev/myapp/pkg/myapp 
~/go/src/go.bytebuilders.dev/myapp
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


⠏  Building for production as library (umd-min)...

 ERROR  Failed to compile with 430 errors                                                                                                                                           4:39:59 PM

 error  in ../../node_modules/@rancher/shell/components/form/labeled-select-utils/labeled-select-pagination.ts:3:48

TS2307: Cannot find module 'vue/types/v3-component-options' or its corresponding type declarations.
    1 | import { debounce } from 'lodash';
    2 | import { PropType, defineComponent } from 'vue';
  > 3 | import { ComputedOptions, MethodOptions } from 'vue/types/v3-component-options';
      |                                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 | import { LabelSelectPaginateFn, LABEL_SELECT_NOT_OPTION_KINDS, LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
    5 |
    6 | interface Props {

 error  in ../../node_modules/@rancher/shell/components/form/labeled-select-utils/labeled-select-pagination.ts:43:44

TS2344: Type 'Data' does not satisfy the constraint 'string'.
    41 |  * 'mixin' to provide pagination support to LabeledSelect
    42 |  */
  > 43 | export default defineComponent<Props, any, Data, Computed, Methods>({
       |                                            ^^^^
    44 |   props: {
    45 |     paginate: {
    46 |       default: null,

 error  in ../../node_modules/@rancher/shell/components/form/labeled-select-utils/labeled-select-pagination.ts:72:49

TS2339: Property 'requestPagination' does not exist on type '(props: Props, ctx: { attrs: Data; slots: Readonly<{}>; emit: ((event: unknown, ...args: any[]) => void) | ((event: string, ...args: any[]) => void); expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed | undefined) => void; }) => RenderFunction | Promise<...>'.
    70 |       pages:       0,
    71 |
  > 72 |       debouncedRequestPagination: debounce(this.requestPagination, 700),
       |                                                 ^^^^^^^^^^^^^^^^^
    73 |
    74 |       // External
    75 |       page:         [],

 error  in ../../node_modules/@rancher/shell/components/form/labeled-select-utils/labeled-select-pagination.ts:82:14

I simply copied those components into my p