UI: Jira password deprecated, use Jira API token (#5067)

frontend/interfaces/integration.ts

@@ -1,7 +1,7 @@
 export interface IJiraIntegration {
   url: string;
   username: string;
-  password: string;
+  api_token: string;
   project_key: string;
   enable_software_vulnerabilities?: boolean;
   index?: number;
@@ -14,7 +14,7 @@ export interface IJiraIntegrationIndexed extends IJiraIntegration {
 export interface IJiraIntegrationFormData {
   url: string;
   username: string;
-  password: string;
+  apiToken: string;
   projectKey: string;
   enableSoftwareVulnerabilities?: boolean;
 }
@@ -22,7 +22,7 @@ export interface IJiraIntegrationFormData {
 export interface IJiraIntegrationFormErrors {
   url?: string | null;
   username?: string | null;
-  password?: string | null;
+  apiToken?: string | null;
   projectKey?: string | null;
 }
 

frontend/pages/admin/IntegrationsPage/IntegrationsTableConfig.tsx

@@ -66,7 +66,7 @@ const generateTableHeaders = (
       Header: "",
       disableSortBy: true,
       sortType: "caseInsensitive",
-      accessor: "hosts",
+      accessor: "logo",
       Cell: () => <img src={JiraIcon} alt="jira-icon" />,
     },
     {
@@ -76,7 +76,7 @@ const generateTableHeaders = (
       sortType: "caseInsensitive",
       accessor: "name",
       Cell: (cellProps: ICellProps) => (
-        <TextCell value={cellProps.cell.value} />
+        <TextCell value={cellProps.cell.value} classes="w400" />
       ),
     },
     {
@@ -120,7 +120,7 @@ const enhanceIntegrationData = (
     return {
       url: integration.url,
       username: integration.username,
-      password: integration.password,
+      api_token: integration.api_token,
       project_key: integration.project_key,
       actions: generateActionDropdownOptions(),
       enable_software_vulnerabilities:

frontend/pages/admin/IntegrationsPage/_styles.scss

@@ -8,23 +8,6 @@
   }
 }
 
-.team-details__team-details {
-  .form-field--dropdown {
-    margin-bottom: 0;
-  }
-}
-
-.team-details.team-select-open {
-  .component__tabs-wrapper {
-    position: relative;
-    z-index: 2;
-  }
-  .members {
-    position: relative;
-    z-index: 1;
-  }
-}
-
 .no-integrations {
   display: flex;
   flex-direction: column;
@@ -109,7 +92,12 @@
     width: 350px;
   }
 }
-.hosts__cell {
+
+.logo__header {
+  width: 24px;
+}
+
+.logo__cell {
   img {
     width: 24px;
   }

frontend/pages/admin/IntegrationsPage/components/IntegrationForm/IntegrationForm.tsx

@@ -34,13 +34,13 @@ const IntegrationForm = ({
   const [formData, setFormData] = useState<IJiraIntegrationFormData>({
     url: integrationEditing?.url || "",
     username: integrationEditing?.username || "",
-    password: integrationEditing?.password || "",
+    apiToken: integrationEditing?.api_token || "",
     projectKey: integrationEditing?.project_key || "",
     enableSoftwareVulnerabilities:
       integrationEditing?.enable_software_vulnerabilities || false,
   });
 
-  const { url, username, password, projectKey } = formData;
+  const { url, username, apiToken, projectKey } = formData;
 
   const onInputChange = ({ name, value }: IFormField) => {
     setFormData({ ...formData, [name]: value });
@@ -55,7 +55,7 @@ const IntegrationForm = ({
       jiraIntegrationSubmitData.splice(integrationEditing.index, 1, {
         url,
         username,
-        password,
+        api_token: apiToken,
         project_key: projectKey,
       });
     } else {
@@ -65,7 +65,7 @@ const IntegrationForm = ({
         {
           url,
           username,
-          password,
+          api_token: apiToken,
           project_key: projectKey,
         },
       ];
@@ -110,11 +110,11 @@ const IntegrationForm = ({
         }
       />
       <InputField
-        name="password"
+        name="apiToken"
         onChange={onInputChange}
-        label="Jira password"
+        label="Jira API token"
         parseTarget
-        value={password}
+        value={apiToken}
       />
       <InputField
         name="projectKey"
@@ -140,7 +140,7 @@ const IntegrationForm = ({
             !(
               formData.url === "" ||
               formData.username === "" ||
-              formData.password === "" ||
+              formData.apiToken === "" ||
               formData.projectKey === ""
             )
           }
@@ -152,7 +152,7 @@ const IntegrationForm = ({
             disabled={
               formData.url === "" ||
               formData.username === "" ||
-              formData.password === "" ||
+              formData.apiToken === "" ||
               formData.projectKey === ""
             }
           >