feat(dashboard): Improve error handling for missing permissions when …

…creating repositories

frontend/dashboard/components/NewApplicationForm/NewApplicationForm.tsx

@@ -1,4 +1,4 @@
-import React, { type FormEvent, type ChangeEvent } from 'react';
+import React, { type FormEvent, type ChangeEvent, useState } from 'react';
 import classes from './NewApplicationForm.module.css';
 import { StudioButton, StudioSpinner } from '@studio/components';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +11,7 @@ import { SelectedContextType } from 'dashboard/context/HeaderContext';
 import { type NewAppForm } from '../../types/NewAppForm';
 import { useCreateAppFormValidation } from './hooks/useCreateAppFormValidation';
 import { Link } from 'react-router-dom';
+import { useUserOrgPermissionQuery } from '../../hooks/queries/useUserOrgPermissionsQuery';
 
 type CancelButton = {
   onClick: () => void;
@@ -47,11 +48,14 @@ export const NewApplicationForm = ({
   const { t } = useTranslation();
   const selectedContext = useSelectedContext();
   const { validateRepoOwnerName, validateRepoName } = useCreateAppFormValidation();
-
   const defaultSelectedOrgOrUser: string =
     selectedContext === SelectedContextType.Self || selectedContext === SelectedContextType.All
       ? user.login
       : selectedContext;
+  const [currentSelectedOrg, setCurrentSelectedOrg] = useState<string>(defaultSelectedOrgOrUser);
+  const { data: userOrgPermission, isFetching } = useUserOrgPermissionQuery(currentSelectedOrg, {
+    enabled: Boolean(currentSelectedOrg),
+  });
 
   const validateTextValue = (event: ChangeEvent<HTMLInputElement>) => {
     const { errorMessage: repoNameErrorMessage, isValid: isRepoNameValid } = validateRepoName(
@@ -96,14 +100,22 @@ export const NewApplicationForm = ({
     return isOrgValid && isRepoNameValid;
   };
 
+  const createRepoAccessError =
+    !userOrgPermission?.canCreateOrgRepo && !isFetching
+      ? t('dashboard.missing_service_owner_rights_error_message')
+      : '';
+
+  const hasCreateRepoAccessError = Boolean(createRepoAccessError);
+
   return (
     <form onSubmit={handleSubmit} className={classes.form}>
       <ServiceOwnerSelector
         name='org'
         user={user}
         organizations={organizations}
-        errorMessage={formError.org}
+        errorMessage={formError.org || createRepoAccessError}
         selectedOrgOrUser={defaultSelectedOrgOrUser}
+        onChange={setCurrentSelectedOrg}
       />
       <RepoNameInput
         name='repoName'
@@ -115,7 +127,7 @@ export const NewApplicationForm = ({
           <StudioSpinner showSpinnerTitle spinnerTitle={t('dashboard.creating_your_service')} />
         ) : (
           <>
-            <StudioButton type='submit' variant='primary'>
+            <StudioButton type='submit' variant='primary' disabled={hasCreateRepoAccessError}>
               {submitButtonText}
             </StudioButton>
             <CancelComponent actionableElement={actionableElement} />

frontend/dashboard/components/ServiceOwnerSelector/ServiceOwnerSelector.tsx

@@ -10,6 +10,7 @@ export type ServiceOwnerSelectorProps = {
   organizations: Organization[];
   errorMessage?: string;
   name?: string;
+  onChange?: (org: string) => void;
 };
 
 export const ServiceOwnerSelector = ({
@@ -18,6 +19,7 @@ export const ServiceOwnerSelector = ({
   organizations,
   errorMessage,
   name,
+  onChange,
 }: ServiceOwnerSelectorProps) => {
   const { t } = useTranslation();
   const serviceOwnerId: string = useId();
@@ -38,6 +40,7 @@ export const ServiceOwnerSelector = ({
       name={name}
       id={serviceOwnerId}
       defaultValue={defaultValue}
+      onChange={(event) => onChange(event.target.value)}
     >
       {selectableOptions.map(({ value, label }) => (
         <option key={value} value={value}>

frontend/dashboard/hooks/queries/useUserOrgPermissionsQuery.ts

@@ -0,0 +1,20 @@
+import { useServicesContext } from 'app-shared/contexts/ServicesContext';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import { QueryKey } from 'app-shared/types/QueryKey';
+
+type UserOrgPermission = {
+  canCreateOrgRepo: boolean;
+};
+
+export const useUserOrgPermissionQuery = (
+  org: string,
+  options?: { enabled: boolean },
+): UseQueryResult<UserOrgPermission> => {
+  const { getUserOrgPermissions } = useServicesContext();
+  return useQuery({
+    queryKey: [QueryKey.UserOrgPermissions, org],
+    queryFn: () => getUserOrgPermissions(org),
+    ...options,
+  });
+};

frontend/language/src/nb.json

@@ -182,6 +182,7 @@
   "dashboard.loading": "Laster inn dashboardet",
   "dashboard.loading_resource_list": "Laster inn ressursliste",
   "dashboard.make_copy": "Lag kopi",
+  "dashboard.missing_service_owner_rights_error_message": "Du mangler tilgang til å opprette en ny applikasjon i valgt organisasjon.",
   "dashboard.my_apps": "Mine apper",
   "dashboard.my_data_models": "Mine datamodeller",
   "dashboard.my_resources": "Mine ressurser",

frontend/packages/shared/src/api/paths.js

@@ -17,6 +17,9 @@ export const appMetadataAttachmentPath = (org, app) => `${basePath}/${org}/${app
 // App version
 export const appVersionPath = (org, app) => `${basePath}/${org}/${app}/app-development/app-version`; // Get
 
+// UserOrgPermissions
+export const userOrgPermissionsPath = (org) => `${basePath}/user/org-permissions/${org}`;
+
 // Config
 export const serviceConfigPath = (org, app) => `${basePath}/${org}/${app}/config`; // Get, Post
 

frontend/packages/shared/src/api/queries.ts

@@ -59,6 +59,7 @@ import {
   resourceAccessPackageServicesPath,
   optionListPath,
   optionListReferencesPath,
+  userOrgPermissionsPath,
 } from './paths';
 
 import type { AppReleasesResponse, DataModelMetadataResponse, SearchRepoFilterParams, SearchRepositoryResponse } from 'app-shared/types/api';
@@ -134,6 +135,7 @@ export const getTextLanguages = (owner: string, app: string): Promise<string[]>
 export const getTextResources = (owner: string, app: string, lang: string) => get<ITextResourcesWithLanguage>(textResourcesPath(owner, app, lang));
 export const getUser = () => get<User>(userCurrentPath());
 export const getWidgetSettings = (owner: string, app: string) => get<WidgetSettingsResponse | null>(widgetSettingsPath(owner, app));
+export const getUserOrgPermissions = (org: string) => get(userOrgPermissionsPath(org));
 export const searchRepos = (filter: SearchRepoFilterParams) => get<SearchRepositoryResponse>(`${repoSearchPath()}${buildQueryParams(filter)}`);
 export const validateImageFromExternalUrl = (owner: string, app: string, url: string) => get<ExternalImageUrlValidationResponse>(validateImageFromExternalUrlPath(owner, app, url));
 

frontend/packages/shared/src/mocks/queriesMock.ts

@@ -141,6 +141,7 @@ export const queriesMock: ServicesContextProps = {
   validateImageFromExternalUrl: jest
     .fn()
     .mockImplementation(() => Promise.resolve<ExternalImageUrlValidationResponse>('Ok')),
+  getUserOrgPermissions: jest.fn().mockImplementation(() => Promise.resolve({})),
 
   // Queries - Settings modal
   getAppConfig: jest.fn().mockImplementation(() => Promise.resolve<AppConfig>(appConfig)),

frontend/packages/shared/src/types/QueryKey.ts

@@ -50,6 +50,7 @@ export enum QueryKey {
   IsLoggedInWithAnsattporten = 'IsLoggedInWithAnsattporten',
   AppScopes = 'AppScopes',
   SelectedAppScopes = 'SelectedAppScopes',
+  UserOrgPermissions = 'UserOrgPermissions',
 
   // Resourceadm
   ResourceList = 'ResourceList',