Multi level repos doesn't work

[4integration]

We typlically have multi level repos like <project>/<team>/<image> and in this case we get an error in Backstage. It works when having single level repos

Error
TypeError

Message
Cannot read properties of undefined (reading 'repoUrl')

Stack Trace
TypeError: Cannot read properties of undefined (reading 'repoUrl')
    at HarborRepository (webpack-internal:///../../node_modules/@bestsellerit/backstage-plugin-harbor/dist/index.esm.js:247:25)
    at renderWithHooks (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:14804:18)
    at updateFunctionComponent (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:17035:20)
    at beginWork (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:18611:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:189:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:238:16)
    at invokeGuardedCallback (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:293:31)
    at beginWork$1 (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:23204:7)
    at performUnitOfWork (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:22158:12)
    at workLoopSync (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:22131:22)

[4integration]

https://github.com/BESTSELLER/backstage-plugin-harbor/issues/57

[4integration]

Frontend: v0.1.11 Backend: v0.1.0

For the image in harbor myproject/myteam/myimage when testing with debug logging I can see the request: GET /api/harbor/artifacts?project=myproject&repository=myteam i.e. missing the /myimage so no hit

According to Harbor API spec it says:

So as workaround I tested with myproject/myteam%252Fmyimage but that resulted in another error

[1] 2021-10-11T08:34:36.378Z backstage error response.map is not a function type=errorHandler stack=TypeError: response.map is not a function
[1]     at getArtifacts (/home/myuserid/projects/devexp/playbook-backstage/mysite/node_modules/@bestsellerit/backstage-plugin-harbor-backend/dist/index.cjs.js:26:30)
[1]     at processTicksAndRejections (internal/process/task_queues.js:95:5)
[1]     at async /home/myuserid/projects/devexp/playbook-backstage/mysite/node_modules/@bestsellerit/backstage-plugin-harbor-backend/dist/index.cjs.js:68:23

When testing with "one level" image like mirrors/python it works as expected

[wrighbr]

I've created a new release which will support goharbor.io/repository-slug: myproject/myteam%252Fmyimage https://github.com/BESTSELLER/backstage-plugin-harbor-backend/tree/0.1.1

[4integration]

Thanks @wrighbr I can confirm that myproject/myteam%252Fmyimage works

It would be nice to have the "encoder" in the plugin to be able to use myproject/myteam/myimage But to me it looks like the code should do that?! https://github.com/BESTSELLER/backstage-plugin-harbor-backend/blob/master/src/service/artifact.ts#L15

Would be good to replace all slashes if multiple

repo = repository.replace(/\//g, "%252F");

[johanhammar]

The problem is in the https://github.com/BESTSELLER/backstage-plugin-harbor project in the HarborWidget and the HarborDashboardPage where the repository slug is splitted like this const info = repositorySlug.split("/"); If the repository slug contains more than one /, i.e myproject/myteam/myimage the resulting info array contains three items. The project is set correctly but the repository will just contain the first part (myteam) and the last part (myimage) will be lost.

The info array is used in the HarborRepository component (see the repository getting only the partial repository below)

<HarborRepository project={info[0]} repository={info[1]} widget />

This can be fixed by something like

const project = info.shift() as "string";
const repository = info.join("/");

I'll prepare and submit a PR to https://github.com/BESTSELLER/backstage-plugin-harbor