feat: Enhance insights project form and widget configuration

- Update insights project form to handle empty repositories
- Add placeholder for empty repositories in repository tab
- Modify default widgets to focus on development-related metrics
- Improve form validation and error handling
- Refactor code for better null safety and readability

Signed-off-by: Sameh16 <[email protected]>

Author: Sameh16

frontend/src/modules/admin/modules/insights-projects/components/lf-insights-project-add-repository-tab.vue

@@ -11,10 +11,15 @@
       }"
     >
       <div class="flex items-center w-3/5">
-        <lf-svg name="git-repository" class="!block w-5 h-5 text-gray-900 mr-3" />
+        <lf-svg
+          name="git-repository"
+          class="!block w-5 h-5 text-gray-900 mr-3"
+        />
         <span class="text-gray-900 text-sm">{{ repository.url }}</span>
       </div>
-      <div class="flex items-center gap-2 border border-gray-200 rounded-[100px] px-2 ml-3">
+      <div
+        class="flex items-center gap-2 border border-gray-200 rounded-[100px] px-2 ml-3"
+      >
         <template v-for="platform of repository.platforms" :key="platform">
           <lf-icon
             v-if="platform === 'github'"
@@ -23,8 +28,18 @@
             class="text-[#24292F]"
             type="brands"
           />
-          <lf-icon v-if="platform === 'git'" name="git-alt" :size="25" class="text-[#F05133]" type="brands" />
-          <lf-svg v-if="platform === 'gitlab'" name="gitlab" class="!block w-4 h-4" />
+          <lf-icon
+            v-if="platform === 'git'"
+            name="git-alt"
+            :size="25"
+            class="text-[#F05133]"
+            type="brands"
+          />
+          <lf-svg
+            v-if="platform === 'gitlab'"
+            name="gitlab"
+            class="!block w-4 h-4"
+          />
           <img
             v-if="platform === 'gerrit'"
             src="/images/integrations/gerrit.png"
@@ -35,6 +50,14 @@
       </div>
       <lf-switch v-model="repository.enabled" class="ml-auto" :size="'small'" />
     </div>
+    <div
+      v-if="cForm.repositories.length === 0"
+      class="flex items-center justify-center pt-14"
+    >
+      <span class="text-gray-500 text-sm">
+        There are no repositories connected to this project
+      </span>
+    </div>
   </div>
 </template>
 
@@ -46,11 +69,10 @@ import { reactive } from 'vue';
 import { InsightsProjectAddFormModel } from '../models/insights-project-add-form.model';
 
 const props = defineProps<{
-    form: InsightsProjectAddFormModel;
+  form: InsightsProjectAddFormModel;
 }>();
 
 const cForm = reactive(props.form);
-
 </script>
 
 <script lang="ts">

frontend/src/modules/admin/modules/insights-projects/components/lf-insights-project-add.vue

@@ -177,9 +177,6 @@ const rules = {
   description: { required: (value: string) => value.trim().length },
   logoUrl: { required: (value: string) => value.trim().length },
   website: { required: (value: string) => value.trim().length },
-  repositories: {
-    required: (value: any) => value.some((repository: any) => repository.enabled),
-  },
   widgets: {
     required: (widgets: any) => Object.keys(widgets).some((key: any) => widgets[key]),
   },

frontend/src/modules/admin/modules/insights-projects/insight-project-helper.ts

@@ -13,12 +13,13 @@ export const buildRequest = (form: InsightsProjectAddFormModel) => ({
   github: form.github,
   twitter: form.twitter,
   linkedin: form.linkedin,
-  repositories: form.repositories
-    .filter((repository: any) => repository.enabled)
-    .map((repository: any) => ({
-      url: repository.url,
-      platforms: repository.platforms,
-    })),
+  repositories:
+    form.repositories
+      ?.filter((repository: any) => repository.enabled)
+      ?.map((repository: any) => ({
+        url: repository.url,
+        platforms: repository.platforms,
+      })) || [],
   widgets: Object.keys(form.widgets).filter((key: string) => form.widgets[key]),
 });
 
@@ -29,12 +30,13 @@ export const buildForm = (
   ...result,
   organizationId: result.organization.id,
   collectionsIds: result.collections.map((collection: any) => collection.id),
-  repositories: repositories?.map((repository: any) => ({
-    ...repository,
-    enabled: result.repositories?.some(
-      (repo: any) => repo.url === repository.url,
-    ),
-  })),
+  repositories:
+    repositories?.map((repository: any) => ({
+      ...repository,
+      enabled: result.repositories?.some(
+        (repo: any) => repo.url === repository.url,
+      ),
+    })) || [],
   widgets: Object.keys(defaultWidgetsValues).reduce(
     (acc, key: string) => ({
       ...acc,

frontend/src/modules/admin/modules/insights-projects/widgets.ts

@@ -49,10 +49,14 @@ export const defaultWidgetsValues = {
   organizationDependency: true,
   retention: true,
   geographicalDistribution: true,
-  industryDistribution: true,
   stars: true,
   forks: true,
-  socialMentions: true,
-  githubMentions: true,
-  pressMentions: true,
+  issuesResolution: true,
+  pullRequests: true,
+  contributionsOutsideWorkHours: true,
+  mergeLeadTime: true,
+  reviewTimeByPullRequestSize: true,
+  averageTimeToMerge: true,
+  waitTimeFor1stReview: true,
+  codeReviewEngagement: true,
 };