UI v2 permissions

deepfence_frontend/apps/dashboard/src/components/forms/SearchableCloudAccountsList.tsx

@@ -13,6 +13,7 @@ export type SearchableCloudAccountsListProps = {
   valueKey?: 'nodeId' | 'nodeName';
   active?: boolean;
   triggerVariant?: 'select' | 'button';
+  label?: string;
 };
 
 const PAGE_SIZE = 15;
@@ -24,6 +25,7 @@ export const SearchableCloudAccountsList = ({
   valueKey = 'nodeId',
   active,
   triggerVariant,
+  label,
 }: SearchableCloudAccountsListProps) => {
   const [searchText, setSearchText] = useState('');
 
@@ -74,6 +76,7 @@ export const SearchableCloudAccountsList = ({
         value={selectedAccounts.length}
       />
       <Combobox
+        label={label}
         triggerVariant={triggerVariant}
         startIcon={
           isFetching ? <CircleSpinner size="sm" className="w-3 h-3" /> : undefined

deepfence_frontend/apps/dashboard/src/components/registries-connector/AmazonECRConnectorForm.tsx

@@ -125,8 +125,10 @@ export const AmazonECRConnectorForm = ({
             helperText={fieldErrors?.['aws_region_name']}
           />
         </div>
-        {errorMessage && <p className="dark:text-status-error text-p7">{errorMessage}</p>}
       </div>
+      {errorMessage && (
+        <p className="mt-4 dark:text-status-error text-p7">{errorMessage}</p>
+      )}
     </>
   );
 };

deepfence_frontend/apps/dashboard/src/components/registries-connector/AzureCRConnectorForm.tsx

@@ -73,8 +73,10 @@ export const AzureCRConnectorForm = ({
           color={fieldErrors?.['azure_registry_password'] ? 'error' : 'default'}
           helperText={fieldErrors?.['azure_registry_password']}
         />
-        {errorMessage && <p className="dark:text-status-error text-p7">{errorMessage}</p>}
       </div>
+      {errorMessage && (
+        <p className="mt-4 dark:text-status-error text-p7">{errorMessage}</p>
+      )}
     </>
   );
 };

deepfence_frontend/apps/dashboard/src/components/registries-connector/DockerConnectorForm.tsx

@@ -74,8 +74,10 @@ export const DockerConnectorForm = ({ errorMessage, fieldErrors }: RegistryFormP
         <div className="text-p7 dark:text-text-input-value">
           Supported Versions: API version v2
         </div>
-        {errorMessage && <p className="dark:text-status-error text-p7">{errorMessage}</p>}
       </div>
+      {errorMessage && (
+        <p className="mt-4 dark:text-status-error text-p7">{errorMessage}</p>
+      )}
     </>
   );
 };

deepfence_frontend/apps/dashboard/src/components/registries-connector/DockerPrivateConnectorForm.tsx

@@ -81,10 +81,10 @@ export const DockerPriavateConnectorForm = ({
           <div className="mt-2 text-p7 dark:text-text-input-value">
             Supported Versions: API version v2
           </div>
-          {errorMessage && (
-            <p className="dark:text-status-error text-p7">{errorMessage}</p>
-          )}
         </div>
+        {errorMessage && (
+          <p className="mt-4 dark:text-status-error text-p7">{errorMessage}</p>
+        )}
       </>
     </>
   );

deepfence_frontend/apps/dashboard/src/components/registries-connector/GitLabConnectorForm.tsx

@@ -78,8 +78,10 @@ export const GitLabConnectorForm = ({ errorMessage, fieldErrors }: RegistryFormP
         <div className="mt-2 text-p7 dark:text-text-input-value">
           Supported Versions: 11.8 and above
         </div>
-        {errorMessage && <p className="dark:text-status-error text-p7">{errorMessage}</p>}
       </div>
+      {errorMessage && (
+        <p className="mt-4 dark:text-status-error text-p7">{errorMessage}</p>
+      )}
     </>
   );
 };

deepfence_frontend/apps/dashboard/src/components/registries-connector/GoogleCRConnectorForm.tsx

@@ -60,8 +60,10 @@ export const GoogleCRConnectorForm = ({
           name="service_account_json"
           helperText={fieldErrors?.['service_account_json']}
         />
-        {errorMessage && <p className="dark:text-status-error text-p7">{errorMessage}</p>}
       </div>
+      {errorMessage && (
+        <p className="mt-4 dark:text-status-error text-p7">{errorMessage}</p>
+      )}
     </>
   );
 };

deepfence_frontend/apps/dashboard/src/components/registries-connector/HarborConnectorForm.tsx

@@ -86,8 +86,10 @@ export const HarborConnectorForm = ({ errorMessage, fieldErrors }: RegistryFormP
         <div className="mt-2 text-p7 dark:text-text-input-value">
           Supported Versions: 1.8.2 and above
         </div>
-        {errorMessage && <p className="dark:text-status-error text-p7">{errorMessage}</p>}
       </div>
+      {errorMessage && (
+        <p className="mt-4 dark:text-status-error text-p7">{errorMessage}</p>
+      )}
     </>
   );
 };

deepfence_frontend/apps/dashboard/src/components/registries-connector/JfrogConnectorForm.tsx

@@ -89,8 +89,10 @@ export const JfrogConnectorForm = ({ errorMessage, fieldErrors }: RegistryFormPr
         <div className="mt-2 text-p7 dark:text-text-input-value">
           Supported Versions: 6.19.1 and above
         </div>
-        {errorMessage && <p className="dark:text-status-error text-p7">{errorMessage}</p>}
       </div>
+      {errorMessage && (
+        <p className="mt-4 dark:text-status-error text-p7">{errorMessage}</p>
+      )}
     </>
   );
 };

deepfence_frontend/apps/dashboard/src/components/registries-connector/QuayConnectorForm.tsx

@@ -77,7 +77,9 @@ export const QuayConnectorForm = ({ errorMessage, fieldErrors }: RegistryFormPro
           helperText={fieldErrors?.['quay_access_token']}
         />
 
-        {errorMessage && <p className="dark:text-status-error text-p7">{errorMessage}</p>}
+        {errorMessage && (
+          <p className="mt-4 dark:text-status-error text-p7">{errorMessage}</p>
+        )}
       </div>
     </>
   );

deepfence_frontend/apps/dashboard/src/components/scan-configure-forms/ComplianceScanConfigureForm.tsx

@@ -19,6 +19,7 @@ import { TruncatedText } from '@/components/TruncatedText';
 import { ActionEnumType } from '@/features/postures/data-component/toggleControlApiAction';
 import { invalidateAllQueries, queries } from '@/queries';
 import { ComplianceScanNodeTypeEnum } from '@/types/common';
+import { get403Message } from '@/utils/403';
 import { apiWrapper } from '@/utils/api';
 
 export const complianceType: {
@@ -109,9 +110,10 @@ export const scanPostureApiAction = async ({
         message: startComplianceScanResponse.error.message ?? '',
       };
     } else if (startComplianceScanResponse.error.response.status === 403) {
+      const message = await get403Message(startComplianceScanResponse.error);
       return {
         success: false,
-        message: 'You do not have enough permissions to start scan',
+        message,
       };
     }
     throw startComplianceScanResponse.error;
@@ -431,7 +433,7 @@ export const ComplianceScanConfigureForm = ({
         <input type="text" name="_nodeType" readOnly hidden value={nodeType} />
 
         {fetcherData?.message && (
-          <p className="text-red-500 text-sm py-3">{fetcherData.message}</p>
+          <p className="dark:text-status-error text-p7 py-3">{fetcherData.message}</p>
         )}
         {showAdvancedOptions && (
           <Suspense

deepfence_frontend/apps/dashboard/src/components/scan-configure-forms/MalwareScanConfigureForm.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/api/generated';
 import { invalidateAllQueries } from '@/queries';
 import { MalwareScanNodeTypeEnum } from '@/types/common';
+import { get403Message } from '@/utils/403';
 import { apiWrapper } from '@/utils/api';
 import { isNodeTypeARegistryTagType, isNodeTypeARegistryType } from '@/utils/registry';
 
@@ -112,9 +113,10 @@ export const scanMalwareApiAction = async ({
         message: startMalwareScanResponse.error.message ?? '',
       };
     } else if (startMalwareScanResponse.error.response.status === 403) {
+      const message = await get403Message(startMalwareScanResponse.error);
       return {
         success: false,
-        message: 'You do not have enough permissions to start scan',
+        message,
       };
     }
     throw startMalwareScanResponse.error;
@@ -163,9 +165,6 @@ export const MalwareScanConfigureForm = ({
       {data.nodeType === MalwareScanNodeTypeEnum.image && data.images && (
         <input type="text" name="_images" hidden readOnly value={data.images.join(',')} />
       )}
-      {fetcherData?.message && (
-        <p className="dark:text-status-error text-p7 pb-3">{fetcherData.message}</p>
-      )}
 
       <div className="flex">
         {wantAdvanceOptions &&
@@ -208,6 +207,11 @@ export const MalwareScanConfigureForm = ({
             )}
         </div>
       ) : null}
+
+      {fetcherData?.message && (
+        <p className="dark:text-status-error text-p7 mt-4">{fetcherData.message}</p>
+      )}
+
       <div className="flex gap-3 mt-14">
         <Button disabled={state !== 'idle'} loading={state !== 'idle'} type="submit">
           Start Scan

deepfence_frontend/apps/dashboard/src/components/scan-configure-forms/SecretScanConfigureForm.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/api/generated';
 import { invalidateAllQueries } from '@/queries';
 import { SecretScanNodeTypeEnum } from '@/types/common';
+import { get403Message } from '@/utils/403';
 import { apiWrapper } from '@/utils/api';
 import { isNodeTypeARegistryTagType, isNodeTypeARegistryType } from '@/utils/registry';
 
@@ -111,9 +112,10 @@ export const scanSecretApiAction = async ({
         message: startSecretScanResponse.error.message ?? '',
       };
     } else if (startSecretScanResponse.error.response.status === 403) {
+      const message = await get403Message(startSecretScanResponse.error);
       return {
         success: false,
-        message: 'You do not have enough permissions to start scan',
+        message,
       };
     }
     throw startSecretScanResponse.error;
@@ -162,9 +164,7 @@ export const SecretScanConfigureForm = ({
       {data.nodeType === SecretScanNodeTypeEnum.image && data.images && (
         <input type="text" name="_images" hidden readOnly value={data.images.join(',')} />
       )}
-      {fetcherData?.message && (
-        <p className="dark:text-status-error text-p7 pb-3">{fetcherData.message}</p>
-      )}
+
       <div className="flex">
         {wantAdvanceOptions &&
           isNodeTypeARegistryType(data.nodeType) &&
@@ -206,6 +206,11 @@ export const SecretScanConfigureForm = ({
             )}
         </div>
       ) : null}
+
+      {fetcherData?.message && (
+        <p className="dark:text-status-error text-p7 mt-4">{fetcherData.message}</p>
+      )}
+
       <div className="flex gap-3 mt-14">
         <Button disabled={state !== 'idle'} loading={state !== 'idle'} type="submit">
           Start Scan

deepfence_frontend/apps/dashboard/src/components/scan-configure-forms/VulnerabilityScanConfigureForm.tsx

@@ -11,6 +11,7 @@ import {
 } from '@/api/generated';
 import { invalidateAllQueries } from '@/queries';
 import { VulnerabilityScanNodeTypeEnum } from '@/types/common';
+import { get403Message } from '@/utils/403';
 import { apiWrapper } from '@/utils/api';
 import { isNodeTypeARegistryTagType, isNodeTypeARegistryType } from '@/utils/registry';
 
@@ -174,9 +175,10 @@ export const scanVulnerabilityApiAction = async ({
         message: startVulnerabilityScanResponse.error.message ?? '',
       };
     } else if (startVulnerabilityScanResponse.error.response.status === 403) {
+      const message = await get403Message(startVulnerabilityScanResponse.error);
       return {
         success: false,
-        message: 'You do not have enough permissions to start scan',
+        message,
       };
     }
     throw startVulnerabilityScanResponse.error;
@@ -297,9 +299,6 @@ export const VulnerabilityScanConfigureForm = ({
       {data.nodeType === VulnerabilityScanNodeTypeEnum.image && data.images && (
         <input type="text" name="_images" hidden readOnly value={data.images.join(',')} />
       )}
-      {fetcherData?.message && (
-        <p className="dark:text-status-error text-p7 pb-3">{fetcherData.message}</p>
-      )}
       <h6 className={'text-p3 dark:text-text-text-and-icon'}>Select packages</h6>
       <div className="mt-2">
         <Switch
@@ -332,6 +331,10 @@ export const VulnerabilityScanConfigureForm = ({
         <VulnerabilityScanAdvanceOptionForm nodeType={data.nodeType} />
       )}
 
+      {fetcherData?.message && (
+        <p className="mt-4 dark:text-status-error text-p7">{fetcherData.message}</p>
+      )}
+
       <div className="flex gap-3 mt-14">
         <Button disabled={state !== 'idle'} loading={state !== 'idle'} type="submit">
           Start Scan

deepfence_frontend/apps/dashboard/src/features/auth/actions/registerAction.ts

@@ -2,6 +2,7 @@ import { ActionFunction, redirect } from 'react-router-dom';
 
 import { getUserApiClient } from '@/api/api';
 import { ApiDocsBadRequestResponse } from '@/api/generated';
+import { get403Message } from '@/utils/403';
 import { apiWrapper } from '@/utils/api';
 import storage from '@/utils/storage';
 
@@ -63,8 +64,9 @@ export const registerAction: ActionFunction = async ({
         },
       };
     } else if (registerUserResponse.error.response.status === 403) {
+      const message = await get403Message(registerUserResponse.error);
       return {
-        error: 'You do not have enough permissions to register user',
+        error: message,
       };
     }
     throw registerUserResponse.error;

deepfence_frontend/apps/dashboard/src/features/auth/pages/ForgotPassword.tsx

@@ -4,6 +4,7 @@ import { Button, TextInput } from 'ui-components';
 import { getUserApiClient } from '@/api/api';
 import { ApiDocsBadRequestResponse } from '@/api/generated';
 import { DFLink } from '@/components/DFLink';
+import { get403Message } from '@/utils/403';
 import { apiWrapper } from '@/utils/api';
 
 export type actionReturnType = {
@@ -40,9 +41,10 @@ export const forgotPasswordAction = async ({
         },
       };
     } else if (resetPasswordResponse.error.response.status === 403) {
+      const message = await get403Message(resetPasswordResponse.error);
       return {
         success: false,
-        error: 'You do not have enough permissions to reset password',
+        error: message,
       };
     }
     throw resetPasswordResponse.error;

deepfence_frontend/apps/dashboard/src/features/auth/pages/RegisterWithInvite.tsx

@@ -12,6 +12,7 @@ import { Button, Checkbox, TextInput } from 'ui-components';
 import { getUserApiClient } from '@/api/api';
 import { ApiDocsBadRequestResponse } from '@/api/generated';
 import { DFLink } from '@/components/DFLink';
+import { get403Message } from '@/utils/403';
 import { apiWrapper } from '@/utils/api';
 import storage from '@/utils/storage';
 
@@ -68,10 +69,9 @@ const action = async ({
         },
       };
     } else if (registerInvitedUserResponse.error.response.status === 403) {
-      const resp =
-        (await registerInvitedUserResponse.error.response.json()) as ApiDocsBadRequestResponse;
+      const message = await get403Message(registerInvitedUserResponse.error);
       return {
-        error: resp.message ?? 'You do not have enough permissions to invite user',
+        error: message,
       };
     }
     throw registerInvitedUserResponse.error;

deepfence_frontend/apps/dashboard/src/features/common/data-component/RegistryConnectorForm.tsx

@@ -15,6 +15,7 @@ import { JfrogConnectorForm } from '@/components/registries-connector/JfrogConne
 import { QuayConnectorForm } from '@/components/registries-connector/QuayConnectorForm';
 import { invalidateAllQueries } from '@/queries';
 import { RegistryType } from '@/types/common';
+import { get403Message } from '@/utils/403';
 import { apiWrapper } from '@/utils/api';
 
 type ActionReturnType = {
@@ -98,6 +99,12 @@ export const registryConnectorActionApi = async ({
           message: modelResponse.message ?? '',
           fieldErrors: modelResponse.error_fields ?? {},
         };
+      } else if (response.error.response.status === 403) {
+        const message = await get403Message(response.error);
+        return {
+          success: false,
+          message,
+        };
       }
     }
   } else {
@@ -116,11 +123,17 @@ export const registryConnectorActionApi = async ({
           message: modelResponse.message ?? '',
           fieldErrors: modelResponse.error_fields ?? {},
         };
+      } else if (response.error.response.status === 403) {
+        const message = await get403Message(response.error);
+        return {
+          success: false,
+          message,
+        };
       }
     }
   }
   invalidateAllQueries();
-  toast('Registry added successfully');
+  toast.success('Registry added successfully');
   return {
     success: true,
   };