Add tests for case Gitlab workspace is nested subgroup

Signed-off-by: Tuan Anh Tran <me@tuananh.org>

plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx

@@ -43,6 +43,11 @@ describe('RepoUrlPicker', () => {
           type: 'bitbucketServer',
           title: 'server.bitbucket.org',
         },
+        {
+          host: 'gitlab.example.com',
+          type: 'gitlab',
+          title: 'gitlab.example.com',
+        },
       ],
     }),
   };
@@ -184,6 +189,59 @@ describe('RepoUrlPicker', () => {
         secrets: { testKey: 'abc123' },
       });
     });
+    it('should call the scmAuthApi with the correct params if workspace is nested', async () => {
+      const SecretsComponent = () => {
+        const { secrets } = useTemplateSecrets();
+        return (
+          <div data-testid="current-secrets">{JSON.stringify({ secrets })}</div>
+        );
+      };
+      const { getAllByRole, getByTestId } = await renderInTestApp(
+        <TestApiProvider
+          apis={[
+            [scmIntegrationsApiRef, mockIntegrationsApi],
+            [scmAuthApiRef, mockScmAuthApi],
+            [scaffolderApiRef, mockScaffolderApi],
+          ]}
+        >
+          <SecretsContextProvider>
+            <Form
+              schema={{ type: 'string' }}
+              uiSchema={{
+                'ui:field': 'RepoUrlPicker',
+                'ui:options': {
+                  allowedHosts: ['gitlab.example.com'],
+                  requestUserCredentials: {
+                    secretsKey: 'testKey',
+                  },
+                },
+              }}
+              fields={{ RepoUrlPicker: RepoUrlPicker }}
+            />
+            <SecretsComponent />
+          </SecretsContextProvider>
+        </TestApiProvider>,
+      );
+
+      const [projectInput, repoInput] = getAllByRole('textbox');
+
+      await act(async () => {
+        fireEvent.change(projectInput, {
+          target: { value: 'backstage/mysubgroup' },
+        });
+        fireEvent.change(repoInput, { target: { value: 'repo123' } });
+
+        // need to wait for the debounce to finish
+        await new Promise(resolve => setTimeout(resolve, 600));
+      });
+
+      expect(mockScmAuthApi.getCredentials).toHaveBeenCalledWith({
+        url: 'https://gitlab.example.com/backstage/mysubgroup/repo123',
+        additionalScope: {
+          repoWrite: true,
+        },
+      });
+    });
     it('should call the scmAuthApi with the correct params if only a project is set', async () => {
       const SecretsComponent = () => {
         const { secrets } = useTemplateSecrets();

plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx

@@ -132,15 +132,15 @@ export const RepoUrlPicker = (props: RepoUrlPickerProps) => {
       // That created an issue where GitLab workspace can be nested like groupA/subgroupB
       // when we encodeURi separately and then join, the URL will be malformed and
       // resulting in 400 request error from GitLab API
-      const url = encodeURIComponent(
-        [state.host, workspace, state.repoName].join(),
+      const [encodedHost, encodedRepoName] = [state.host, state.repoName].map(
+        encodeURIComponent,
       );
 
       // user has requested that we use the users credentials
       // so lets grab them using the scmAuthApi and pass through
       // any additional scopes from the ui:options
       const { token } = await scmAuthApi.getCredentials({
-        url,
+        url: `https://${encodedHost}/${workspace}/${encodedRepoName}`,
         additionalScope: {
           repoWrite: true,
           customScopes: requestUserCredentials.additionalScopes,