modified: highlight access token button

CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Modified
 - Notification and Webhook models
 - edit form of notifications and webhooks
+- highlight access token button
+- frontend folders structure
 
 ## [1.8.0] - 2024-07-04
 ### Added

app/javascript/application.jsx

@@ -9,10 +9,11 @@ import {
   FeedbackForm,
   Repository,
   RepositoryForm,
-  Dropdown,
-  Flash,
   ProfileConfiguration,
 } from './components';
+import {
+  Flash,
+} from './atoms';
 
 const components = {
   Company,
@@ -21,7 +22,6 @@ const components = {
   FeedbackForm,
   Repository,
   RepositoryForm,
-  Dropdown,
   Flash,
   ProfileConfiguration,
 };

app/javascript/components/Dropdown/Dropdown.jsx → app/javascript/atoms/Dropdown.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Chevron } from '../../svg';
+import { Chevron } from '../assets';
 
 export const Dropdown = ({ convertChildren = true, title, children }) => {
   const [pageState, setPageState] = useState({

app/javascript/components/Company/Select.jsx → app/javascript/atoms/Select.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Chevron } from '../../svg';
+import { Chevron } from '../assets';
 
 export const Select = ({ items, onSelect, selectedValue }) => {
   const [isOpen, setIsOpen] = useState(false);

app/javascript/atoms/index.jsx

@@ -1,4 +1,5 @@
-export * from './Insights/Insights';
-export * from './Insights/RepositoryInsights';
-export * from './Modal';
 export * from './Checkbox';
+export * from './Dropdown';
+export * from './Flash';
+export * from './Modal';
+export * from './Select';

app/javascript/components/Company/Company.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 
-import { Insights } from '../../atoms';
-import { Chevron, Delete, Edit, Key } from '../../svg';
+import { Insights } from '../../components';
+import { Chevron, Delete, Edit, Key } from '../../assets';
 
 import { insightsRequest } from './requests/insightsRequest';
 
@@ -78,41 +78,46 @@ export const Company = ({
         <div className="pr-4">
           <h2 className="sm:flex sm:flex-row sm:items-center">
             <div>{title}</div>
+            {is_private ? (
+              <span className="badge ml-4">
+                Private
+              </span>
+            ) : null}
             {unaccessable ? (
               <span className="badge mt-4 sm:mt-0 sm:ml-4">
                 Company has repositories with access error
               </span>
             ) : null}
+          </h2>
+          <span onClick={(event) => event.stopPropagation()}>
+            Repositories count -{' '}
+            <a href={repositories_url} className="underline text-orange-500">
+              {repositories_count}
+            </a>
             {repositories_count === 0 ? (
               <a
                 href={repositories_url}
-                className="badge mt-4 sm:mt-0 sm:ml-4"
+                className="badge sm:ml-4"
                 onClick={(event) => event.stopPropagation()}
               >
                 Need to create repository
               </a>
             ) : null}
-          </h2>
-          <span onClick={(event) => event.stopPropagation()}>
-            Repositories count -{' '}
-            <a href={repositories_url} className="underline text-orange-500">
-              {repositories_count}
-            </a>
           </span>
         </div>
         <Chevron rotated={pageState.expanded} />
         {edit_links ? (
           <div className="absolute top-4 right-4 sm:top-8 sm:right-20 flex items-center">
-            {is_private ? (
+            {edit_links.need_access_token ? (
               <span className="badge mr-4">
-                Private
+                Need to add access token
               </span>
             ) : null}
             {edit_links.access_token ? (
               <a
                 href={edit_links.access_token}
                 onClick={(event) => event.stopPropagation()}
-                className="mr-2"
+                className={`mr-2 ${edit_links.need_access_token ? 'p-0.5 bg-orange-300 rounded-lg text-white' : ''}`}
               >
                 <Key />
               </a>

app/javascript/components/Company/CompanyConfiguration.jsx

@@ -1,9 +1,6 @@
 import React, { useState, useMemo } from 'react';
 
-import { Dropdown } from '../../components';
-import { Select } from './Select';
-
-import { Modal } from '../../atoms';
+import { Dropdown, Modal, Select } from '../../atoms';
 import { apiRequest, csrfToken } from '../../helpers';
 
 const NOTIFICATION_TYPES = {

app/javascript/components/Company/CompanyForm.jsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 
-import { Select } from './Select';
-
-import { Modal } from '../../atoms';
+import { Modal, Select } from '../../atoms';
 import { apiRequest, csrfToken } from '../../helpers';
 
 export const CompanyForm = ({

app/javascript/atoms/Insights/Insights.jsx → app/javascript/components/Insights/Insights.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
 
-import { Arrow } from '../../svg';
+import { Arrow } from '../../assets';
 
 const SHORT_INSIGHT_NAMES = {
   required_reviews_count: 'Req reviews',

app/javascript/components/Profile/ProfileConfiguration.jsx

@@ -1,9 +1,6 @@
 import React, { useState } from 'react';
 
-import { Dropdown } from '../../components';
-import { Select } from '../Company/Select';
-
-import { Modal } from '../../atoms';
+import { Dropdown, Modal, Select } from '../../atoms';
 import { apiRequest, csrfToken, convertDate } from '../../helpers';
 
 const INVITE_ACCESS_TARGETS = {

app/javascript/components/Repository/Repository.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useRef } from 'react';
 
+import { Insights, RepositoryInsights } from '../../components';
 import { convertDate, convertTime } from '../../helpers';
-import { Insights, RepositoryInsights } from '../../atoms';
-import { Chevron, Delete, Github, Gitlab, Key } from '../../svg';
+import { Chevron, Delete, Github, Gitlab, Key } from '../../assets';
 
 import { insightsRequest } from './requests/insightsRequest';
 import { repositoryInsightsRequest } from './requests/repositoryInsightsRequest';
@@ -118,23 +118,14 @@ export const Repository = ({
             </div>
             {access_token_status === 'valid' && !accessable ? (
               <span className="badge mt-4 sm:mt-0 sm:ml-4">
-                Access token does not include this repository or expired, refresh it
+                Access token's update is required
               </span>
             ) : null}
             {access_token_status === 'invalid' ? (
               <span className="badge mt-4 sm:mt-0 sm:ml-4">
-                Access token is invalid, refresh it
+                Access token's update is required
               </span>
             ) : null}
-            {access_token_status === 'empty' && edit_links ? (
-              <a
-                href={edit_links.access_token}
-                className="badge mt-4 sm:mt-0 sm:ml-4"
-                onClick={(event) => event.stopPropagation()}
-              >
-                Need to add access token
-              </a>
-            ) : null}
           </h2>
           <p className="flex items center">
             <a
@@ -153,11 +144,20 @@ export const Repository = ({
         <Chevron rotated={pageState.expanded} />
         {edit_links ? (
           <div className="absolute top-4 right-4 sm:top-8 sm:right-20 flex items-center">
+            {access_token_status === 'empty' && edit_links ? (
+              <a
+                href={edit_links.access_token}
+                className="badge mt-4 sm:mt-0 sm:mr-4"
+                onClick={(event) => event.stopPropagation()}
+              >
+                Need to add access token
+              </a>
+            ) : null}
             {edit_links.access_token ? (
               <a
                 href={edit_links.access_token}
                 onClick={(event) => event.stopPropagation()}
-                className="mr-2"
+                className={`mr-2 ${access_token_status === 'empty' && edit_links ? 'p-0.5 bg-orange-300 rounded-lg text-white' : ''}`}
               >
                 <Key />
               </a>

app/javascript/components/index.jsx

@@ -2,8 +2,8 @@ export * from './Company/Company';
 export * from './Company/CompanyForm';
 export * from './Company/CompanyConfiguration';
 export * from './Feedback/FeedbackForm';
-export * from './Dropdown/Dropdown';
+export * from './Insights/Insights';
+export * from './Insights/RepositoryInsights';
 export * from './Repository/Repository';
 export * from './Repository/RepositoryForm';
-export * from './Flash/Flash';
 export * from './Profile/ProfileConfiguration';

app/models/company.rb

@@ -29,4 +29,11 @@ def user_ids
         .pluck('identities.user_id')
     end
   end
+
+  def all_access_tokens
+    AccessToken.where(tokenable_id: id, tokenable_type: 'Company')
+      .or(
+        AccessToken.where(tokenable_id: repositories.select(:id), tokenable_type: 'Repository')
+      )
+  end
 end

app/views/controllers/companies/index.html.erb

@@ -26,6 +26,7 @@
           is_private: !!company.configuration.private,
           main_attribute: company.configuration.main_attribute,
           edit_links: allowed_to?(:update?, company) ? {
+            need_access_token: !company.all_access_tokens.exists?,
             access_token: new_company_access_token_path(company.uuid),
             configuration: edit_company_configuration_path(company.uuid),
             destroy: company_path(company.uuid)