Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/updated GitHub integration UI #1754

Merged
merged 5 commits into from
Nov 10, 2023
Merged

Fix/updated GitHub integration UI #1754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9eb24d8
Merge branch 'develop' of https://github.com/ever-co/ever-teams into …
badalkhatri0924 Nov 9, 2023
6115622
Updated github integration UI
badalkhatri0924 Nov 9, 2023
5950610
Updated Text
badalkhatri0924 Nov 10, 2023
c78e925
Merge branch 'develop' of https://github.com/ever-co/ever-teams into …
badalkhatri0924 Nov 10, 2023
4feca76
fix: Build issue
badalkhatri0924 Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 117 additions & 98 deletions apps/web/lib/settings/integration-setting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
import { useGitHubIntegration, useIntegrationTenant, useIntegrationTypes, useOrganizationTeams } from '@app/hooks';
import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
import { GITHUB_APP_NAME } from '@app/constants';
import Link from 'next/link';
import { useOrganizationProjects } from '@app/hooks';
import { TrashIcon } from 'lib/components/svgs';
import { Button, InputField, Text } from 'lib/components';
import { Button, InputField } from 'lib/components';
import { getActiveProjectIdCookie } from '@app/helpers';
import { Switch } from '@headlessui/react';
import debounce from 'lodash/debounce';
import Link from 'next/link';

export const IntegrationSetting = () => {
const { t } = useTranslation();
Expand Down Expand Up @@ -164,37 +164,128 @@ export const IntegrationSetting = () => {
}, [integrationTenant, deleteIntegrationTenant, getIntegrationTenant]);

return (
<div className="flex flex-col gap-2">
<div className="flex justify-between items-center mt-8">
<div className="flex items-start w-full gap-5 justify-between">
<div className="flex flex-row items-center gap-2 w-1/5">
<div className="flex flex-col gap-5 mt-5">
<>
<div className="flex flex-row items-center gap-2 w-full justify-between">
<div className="flex flex-row items-center gap-2">
<div className="border-2 border-black p-0.5 rounded-lg bg-black dark:bg-white">
<GitHubLogoIcon width={40} height={40} className="text-white dark:text-black" />
</div>

<div className="flex flex-row">
{/* Divider */}
<div className="h-0.5 bg-[#FFFFFF14]"></div>

<div className="flex flex-col">
<div className="font-medium text-black dark:text-light--theme-light">
{t('pages.settingsTeam.GITHUB')}
</div>
{integrationGithubRepositories?.total_count === 0 && (

<div className="flex flex-col">
{integrationGithubRepositories?.total_count === 0 && (
<div className="text-black dark:text-light--theme-light">
{t('pages.settingsTeam.GITHUB_INTEGRATION_DESCRIPTION')}
</div>
)}

<div className="text-black dark:text-light--theme-light">
{t('pages.settingsTeam.GITHUB_INTEGRATION_DESCRIPTION')}
{t('common.GITHUB_INTEGRATION_SUBTITLE_TEXT')}
</div>
)}
</div>
</div>
</div>

<div className="flex flex-col w-4/5 gap-2">
{integrationGithubRepositories && integrationGithubRepositories?.total_count > 0 && (
<div className="flex flex-row">
{integrationGithubRepositories && integrationGithubRepositories?.total_count > 0 && (
<Button
variant="outline-danger"
onClick={handleDeleteIntegrationTenant}
className="w-28 h-8 min-w-0"
>
Remove
</Button>
)}

{(!integrationGithubRepositories || integrationGithubRepositories?.total_count === 0) && (
<Link
href={url}
className="min-w-0 w-24 bg-primary dark:bg-primary-light text-white text-sm flex flex-row items-center justify-center py-3 px-4 gap-3 rounded-md"
>
{t('pages.settingsTeam.INSTALL')}
</Link>
)}
</div>

{integrationGithubRepositories && integrationGithubRepositories?.total_count > 0 && (
<div className="flex flex-col gap-5">
<div className="flex flex-row items-center justify-between">
<div className="flex flex-col gap-1">
<p className="font-semibold text-black">Auto Synk Tasks</p>
<p>{t('common.GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT')}</p>
</div>
<div>
<Switch
checked={isTasksAutoSync}
onChange={() => {
handleEditOrganizationProject({
autoSync: !isTasksAutoSync
});
setIsTasksAutoSync(!isTasksAutoSync);
}}
className={`${isTasksAutoSync ? 'bg-[#DBD3FA]' : 'bg-[#80808061]'}
relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={`${
isTasksAutoSync ? 'translate-x-9 bg-[#3826A6]' : 'bg-white translate-x-1'
}
pointer-events-none inline-block h-[30px] w-[30px] mt-[2.5px] transform rounded-full bg-[#3826A6] shadow-lg ring-0 transition duration-200 ease-in-out`}
/>
</Switch>
</div>
</div>

<div className="flex flex-row items-center justify-between gap-2">
<div className="flex flex-col gap-1">
<p className="font-semibold text-black">Sync Tasks with specific Label</p>
<p>{t('common.GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT')}</p>
</div>
<div>
<Switch
checked={isTasksAutoSyncOnLabel}
onChange={() => {
handleEditOrganizationProject({
autoSyncOnLabel: !isTasksAutoSyncOnLabel
});
setIsTasksAutoSyncOnLabel(!isTasksAutoSyncOnLabel);
}}
className={`${isTasksAutoSyncOnLabel ? 'bg-[#DBD3FA]' : 'bg-[#80808061]'}
relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={`${
isTasksAutoSyncOnLabel
? 'translate-x-9 bg-[#3826A6]'
: 'bg-white translate-x-1'
}
pointer-events-none inline-block h-[30px] w-[30px] mt-[2.5px] transform rounded-full bg-[#3826A6] shadow-lg ring-0 transition duration-200 ease-in-out`}
/>
</Switch>
</div>
</div>

<div className="w-full flex flex-row h-10 justify-end">
<div className="flex flex-row items-center gap-2 w-1/2">
<Select value={selectedRepo || undefined} onValueChange={handleSelectRepo}>
<SelectTrigger className="w-80 overflow-hidden text-ellipsis whitespace-nowrap h-full border-[#00000014] dark:border-[#7B8089] dark:bg-dark--theme-light dark:text-white focus:ring-0">
<SelectTrigger className="w-96 overflow-hidden text-ellipsis whitespace-nowrap h-full border-[#00000014] dark:border-[#7B8089] dark:bg-dark--theme-light dark:text-white focus:ring-0">
<SelectValue
placeholder={t('pages.settingsTeam.SELECT_REPOSITORY')}
className="dark:bg-dark--theme-light"
/>
</SelectTrigger>
<SelectContent className="w-80">
<SelectContent className="w-96">
{integrationGithubRepositories?.repositories?.map((item) => (
<SelectItem
key={item.id}
Expand All @@ -212,94 +303,22 @@ export const IntegrationSetting = () => {
<TrashIcon />
</Button>
)}
<Button variant="outline-danger" onClick={handleDeleteIntegrationTenant}>
Delete GitHub Integration
</Button>
</div>
)}
<div className="flex flex-row items-center gap-3">
{integrationGithubRepositories?.total_count &&
integrationGithubRepositories.total_count > 0 && (
<div className="flex flex-col w-full">
<div className="flex flex-row items-center justify-between gap-2">
<div className="w-1/4">
<Switch
checked={isTasksAutoSync}
onChange={() => {
handleEditOrganizationProject({
autoSync: !isTasksAutoSync
});
setIsTasksAutoSync(!isTasksAutoSync);
}}
className={`${isTasksAutoSync ? 'bg-[#DBD3FA]' : 'bg-[#80808061]'}
relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={`${
isTasksAutoSync
? 'translate-x-9 bg-[#3826A6]'
: 'bg-white translate-x-1'
}
pointer-events-none inline-block h-[30px] w-[30px] mt-[2.5px] transform rounded-full bg-[#3826A6] shadow-lg ring-0 transition duration-200 ease-in-out`}
/>
</Switch>
<Text className="text-gray-400 ">Auto Sync Tasks</Text>
</div>

<div className="w-1/4">
<Switch
checked={isTasksAutoSyncOnLabel}
onChange={() => {
handleEditOrganizationProject({
autoSyncOnLabel: !isTasksAutoSyncOnLabel
});
setIsTasksAutoSyncOnLabel(!isTasksAutoSyncOnLabel);
}}
className={`${
isTasksAutoSyncOnLabel ? 'bg-[#DBD3FA]' : 'bg-[#80808061]'
}
relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={`${
isTasksAutoSyncOnLabel
? 'translate-x-9 bg-[#3826A6]'
: 'bg-white translate-x-1'
}
pointer-events-none inline-block h-[30px] w-[30px] mt-[2.5px] transform rounded-full bg-[#3826A6] shadow-lg ring-0 transition duration-200 ease-in-out`}
/>
</Switch>
<Text className="text-gray-400 ">Auto-sync Tasks On Label</Text>
</div>

<div className="w-2/4">
<InputField
onChange={debounce(handleEditSyncTag, 1000)}
defaultValue={syncTag}
placeholder="Select Auto-sync Label"
className="h-10"
/>
</div>
</div>
</div>
)}

{(!integrationGithubRepositories || integrationGithubRepositories?.total_count === 0) && (
<Link
href={url}
className="min-w-0 w-24 bg-primary dark:bg-primary-light text-white text-sm flex flex-row items-center justify-center py-3 px-4 gap-3 rounded-md"
>
{t('pages.settingsTeam.INSTALL')}
</Link>
{integrationGithubRepositories?.total_count > 0 && (
<div className="flex flex-row items-center gap-2 w-1/2">
<InputField
onChange={debounce(handleEditSyncTag, 1000)}
defaultValue={syncTag}
placeholder={t('common.GITHUB_AUTO_SYNC_LABEL')}
className="h-10"
/>
</div>
)}
</div>
</div>
</div>
</div>
)}
</>
</div>
);
};
2 changes: 1 addition & 1 deletion apps/web/pages/settings/team.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const Team = () => {
const [user] = useRecoilState(userState);
const { isTeamMember, activeTeam } = useOrganizationTeams();
const { isTeamManager } = useIsMemberManager(user);
const breadcrumb = [...t('pages.settings.BREADCRUMB', { returnObjects: true })];
const breadcrumb = [...(t('pages.settings.BREADCRUMB', { returnObjects: true }) as any)];
return (
<>
{!user ? (
Expand Down
5 changes: 4 additions & 1 deletion apps/web/public/locales/ar/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,10 @@
"FILTER_UNSUBSCRIBE": "إلغاء الاشتراك",

"KEYBOARD_SHORTCUTS": "اختصارات لوحة المفاتيح",
"GITHUB_LOADING_TEXT": "نحن الآن في عملية تثبيت التكامل الخاص بك على GitHub، توكّل."
"GITHUB_LOADING_TEXT": "نحن الآن في عملية تثبيت التكامل الخاص بك على GitHub، توكّل.",
"GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT": "قم بمزامنة المهام تلقائيًا في تطبيقك لتحديثات سلسة وفعّالة.",
"GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT": "تزامن المهام بشكل انتقائي عن طريق ربطها بتصنيف معين.",
"GITHUB_AUTO_SYNC_LABEL": "اختر تسمية التزامن التلقائي"
},
"alerts": {
"ALERT_DELETE_ACCOUNT": "سيتم إزالة الحساب من جميع الفرق، باستثناء حيث أنت المدير فقط",
Expand Down
5 changes: 4 additions & 1 deletion apps/web/public/locales/bg/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,10 @@
"FILTER_UNSUBSCRIBE": "Отпиши се",

"KEYBOARD_SHORTCUTS": "Клавишни комбинации",
"GITHUB_LOADING_TEXT": "В момента инсталираме вашия GitHub интеграция, изчакайте..."
"GITHUB_LOADING_TEXT": "В момента инсталираме вашия GitHub интеграция, изчакайте...",
"GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT": "Автоматично синхронизирайте задачите в приложението си за безпроблемни и ефективни актуализации.",
"GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT": "Синхронизирайте задачите избирателно, като ги свържете с конкретен етикет.",
"GITHUB_AUTO_SYNC_LABEL": "Изберете етикет за автоматична синхронизация"
},
"alerts": {
"ALERT_DELETE_ACCOUNT": "Профилът ще бъде премахнат от всички отбори, освен където сте само мениджър",
Expand Down
5 changes: 4 additions & 1 deletion apps/web/public/locales/de/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,10 @@

"KEYBOARD_SHORTCUTS": "Tastenkombinationen",

"GITHUB_LOADING_TEXT": "Wir installieren jetzt Ihre GitHub-Integration, warten Sie..."
"GITHUB_LOADING_TEXT": "Wir installieren jetzt Ihre GitHub-Integration, warten Sie...",
"GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT": "Synchronisieren Sie Aufgaben in Ihrer Anwendung automatisch für nahtlose und effiziente Aktualisierungen.",
"GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT": "Synchronisieren Sie Aufgaben selektiv, indem Sie sie mit einem bestimmten Label verknüpfen.",
"GITHUB_AUTO_SYNC_LABEL": "Auto-Sync-Label auswählen"
},
"alerts": {
"ALERT_DELETE_ACCOUNT": "Das Konto wird von allen Teams entfernt, außer wo Sie nur Manager sind",
Expand Down
6 changes: 5 additions & 1 deletion apps/web/public/locales/en/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,11 @@

"KEYBOARD_SHORTCUTS": "Keyboard Shortcuts",

"GITHUB_LOADING_TEXT": "We are now installing your GitHub Integration, hold on..."
"GITHUB_LOADING_TEXT": "We are now installing your GitHub Integration, hold on...",
"GITHUB_INTEGRATION_SUBTITLE_TEXT": "Activate GitHub integration for project & repository sync",
"GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT": "Automatically synchronize tasks in your application for seamless and efficient updates.",
"GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT": "Synchronize tasks selectively by associating them with specific label.",
"GITHUB_AUTO_SYNC_LABEL": "Select Auto-Sync Label"
},
"alerts": {
"ALERT_DELETE_ACCOUNT": "Account will be removed from all teams, except where you are only the manager",
Expand Down
5 changes: 4 additions & 1 deletion apps/web/public/locales/es/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,10 @@
"FILTER_HISTORY": "Historial",
"FILTER_UNSUBSCRIBE": "Darse de baja",
"KEYBOARD_SHORTCUTS": "Atajos de teclado",
"GITHUB_LOADING_TEXT": "Estamos instalando su integración de GitHub, espere..."
"GITHUB_LOADING_TEXT": "Estamos instalando su integración de GitHub, espere...",
"GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT": "Sincronice automáticamente tareas en su aplicación para actualizaciones fluidas y eficientes.",
"GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT": "Sincronice tareas de manera selectiva asociándolas con una etiqueta específica.",
"GITHUB_AUTO_SYNC_LABEL": "Seleccionar etiqueta de sincronización automática"
},
"alerts": {
"ALERT_DELETE_ACCOUNT": "La cuenta será eliminada de todos los equipos, excepto donde eres sólo el administrador",
Expand Down
5 changes: 4 additions & 1 deletion apps/web/public/locales/fr/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,10 @@
"FILTER_UNSUBSCRIBE": "Se désabonner",

"KEYBOARD_SHORTCUTS": "Raccourcis clavier",
"GITHUB_LOADING_TEXT": "Nous installons actuellement votre intégration GitHub, veuillez patienter..."
"GITHUB_LOADING_TEXT": "Nous installons actuellement votre intégration GitHub, veuillez patienter...",
"GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT": "Synchronisez automatiquement les tâches dans votre application pour des mises à jour fluides et efficaces.",
"GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT": "Synchronisez sélectivement les tâches en les associant à une étiquette spécifique.",
"GITHUB_AUTO_SYNC_LABEL": "Sélectionner l'étiquette de synchronisation automatique"
},
"alerts": {
"ALERT_DELETE_ACCOUNT": "Le compte sera supprimé de toutes les équipes, sauf si vous êtes uniquement le gestionnaire",
Expand Down
5 changes: 4 additions & 1 deletion apps/web/public/locales/he/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,10 @@

"KEYBOARD_SHORTCUTS": "קיצורי מקלדת",

"GITHUB_LOADING_TEXT": "אנו מתקינים כעת את אינטגרציית ה-GitHub שלך, המתינו."
"GITHUB_LOADING_TEXT": "אנו מתקינים כעת את אינטגרציית ה-GitHub שלך, המתינו.",
"GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT": "סנכרן משימות באופן אוטומטי באפליקציה שלך לעדכונים חלקים ויעילים.",
"GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT": "סנכרן משימות באופן בררני על ידי הקשרתן לתג מסוים.",
"GITHUB_AUTO_SYNC_LABEL": "בחר תגית אוטומטית לסנכרון"
},
"alerts": {
"ALERT_DELETE_ACCOUNT": "החשבון יוסר מכל הצוותים, למעט היכן שאתה רק המנהל",
Expand Down
5 changes: 4 additions & 1 deletion apps/web/public/locales/it/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,10 @@

"KEYBOARD_SHORTCUTS": "Keyboard Shortcuts",

"GITHUB_LOADING_TEXT": "Stiamo installando la tua integrazione GitHub, attendi..."
"GITHUB_LOADING_TEXT": "Stiamo installando la tua integrazione GitHub, attendi...",
"GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT": "Sincronizza automaticamente le attività nella tua applicazione per aggiornamenti senza intoppi ed efficienti.",
"GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT": "Sincronizza le attività in modo selettivo associandole a un'etichetta specifica.",
"GITHUB_AUTO_SYNC_LABEL": "Seleziona etichetta di sincronizzazione automatica"
},
"alerts": {
"ALERT_DELETE_ACCOUNT": "Account will be removed from all teams, except where you are only the manager",
Expand Down
5 changes: 4 additions & 1 deletion apps/web/public/locales/nl/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,10 @@

"KEYBOARD_SHORTCUTS": "Sneltoetsen",

"GITHUB_LOADING_TEXT": "We zijn nu uw GitHub-integratie aan het installeren, even geduld..."
"GITHUB_LOADING_TEXT": "We zijn nu uw GitHub-integratie aan het installeren, even geduld...",
"GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT": "Synchroniseer taken automatisch in uw applicatie voor naadloze en efficiënte updates.",
"GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT": "Synchroniseer taken selectief door ze te koppelen aan een specifiek label.",
"GITHUB_AUTO_SYNC_LABEL": "Selecteer Auto-Sync-label"
},
"alerts": {
"ALERT_DELETE_ACCOUNT": "Account wordt verwijderd van alle teams, behalve waar u alleen manager bent",
Expand Down
5 changes: 4 additions & 1 deletion apps/web/public/locales/pl/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,10 @@

"KEYBOARD_SHORTCUTS": "Keyboard Shortcuts",

"GITHUB_LOADING_TEXT": "Aktualnie instalujemy integrację GitHub, proszę czekać..."
"GITHUB_LOADING_TEXT": "Aktualnie instalujemy integrację GitHub, proszę czekać...",
"GITHUB_INTEGRATION_AUTO_SYNC_TASK_TEXT": "Automatycznie synchronizuj zadania w swojej aplikacji, aby uzyskać płynne i efektywne aktualizacje.",
"GITHUB_INTEGRATION_LABEL_SYNC_TASK_TEXT": "Synchronizuj zadania selektywnie, łącząc je z konkretną etykietą.",
"GITHUB_AUTO_SYNC_LABEL": "Wybierz etykietę automatycznej synchronizacji"
},
"alerts": {
"ALERT_DELETE_ACCOUNT": "Account will be removed from all teams, except where you are only the manager",
Expand Down
Loading
Loading