release: bug-fixes and ui/ux improvements for 23 Feb 2023

apiserver/plane/api/urls.py

@@ -733,7 +733,7 @@
         name="workspace-integrations",
     ),
     path(
-        "workspaces/<str:slug>/workspace-integrations/<uuid:pk>/",
+        "workspaces/<str:slug>/workspace-integrations/<uuid:pk>/provider/",
         WorkspaceIntegrationViewSet.as_view(
             {
                 "get": "retrieve",

apiserver/plane/api/views/integration/base.py

@@ -21,7 +21,10 @@
     APIToken,
 )
 from plane.api.serializers import IntegrationSerializer, WorkspaceIntegrationSerializer
-from plane.utils.integrations.github import get_github_metadata
+from plane.utils.integrations.github import (
+    get_github_metadata,
+    delete_github_installation,
+)
 
 
 class IntegrationViewSet(BaseViewSet):
@@ -77,6 +80,14 @@ class WorkspaceIntegrationViewSet(BaseViewSet):
     serializer_class = WorkspaceIntegrationSerializer
     model = WorkspaceIntegration
 
+    def get_queryset(self):
+        return (
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related("integration")
+        )
+
     def create(self, request, slug, provider):
         try:
             installation_id = request.data.get("installation_id", None)
@@ -157,3 +168,31 @@ def create(self, request, slug, provider):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+    def destroy(self, request, slug, pk):
+        try:
+            workspace_integration = WorkspaceIntegration.objects.get(
+                pk=pk, workspace__slug=slug
+            )
+
+            if workspace_integration.integration.provider == "github":
+                installation_id = workspace_integration.config.get(
+                    "installation_id", False
+                )
+                if installation_id:
+                    delete_github_installation(installation_id=installation_id)
+
+            workspace_integration.delete()
+            return Response(status=status.HTTP_204_NO_CONTENT)
+
+        except WorkspaceIntegration.DoesNotExist:
+            return Response(
+                {"error": "Workspace Integration Does not exists"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )

apiserver/plane/api/views/integration/github.py

@@ -46,6 +46,14 @@ class GithubRepositorySyncViewSet(BaseViewSet):
     def perform_create(self, serializer):
         serializer.save(project_id=self.kwargs.get("project_id"))
 
+    def get_queryset(self):
+        return (
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(project_id=self.kwargs.get("project_id"))
+        )
+
     def create(self, request, slug, project_id, workspace_integration_id):
         try:
             name = request.data.get("name", False)
@@ -60,6 +68,23 @@ def create(self, request, slug, project_id, workspace_integration_id):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
+            # Get the workspace integration
+            workspace_integration = WorkspaceIntegration.objects.get(
+                pk=workspace_integration_id
+            )
+
+            # Delete the old repository object
+            GithubRepositorySync.objects.filter(
+                project_id=project_id, workspace__slug=slug
+            ).delete()
+            GithubRepository.objects.filter(
+                project_id=project_id, workspace__slug=slug
+            ).delete()
+            # Project member delete
+            ProjectMember.objects.filter(
+                member=workspace_integration.actor, role=20, project_id=project_id
+            ).delete()
+
             # Create repository
             repo = GithubRepository.objects.create(
                 name=name,
@@ -70,11 +95,6 @@ def create(self, request, slug, project_id, workspace_integration_id):
                 project_id=project_id,
             )
 
-            # Get the workspace integration
-            workspace_integration = WorkspaceIntegration.objects.get(
-                pk=workspace_integration_id
-            )
-
             # Create a Label for github
             label = Label.objects.filter(
                 name="GitHub",

apiserver/plane/utils/integrations/github.py

@@ -60,3 +60,15 @@ def get_github_repos(access_tokens_url, repositories_url):
         headers=headers,
     ).json()
     return response
+
+
+def delete_github_installation(installation_id):
+    token = get_jwt_token()
+
+    url = f"https://api.github.com/app/installations/{installation_id}"
+    headers = {
+        "Authorization": "Bearer " + token,
+        "Accept": "application/vnd.github+json",
+    }
+    response = requests.delete(url, headers=headers)
+    return response

apps/app/.env.example

@@ -1,5 +1,6 @@
-NEXT_PUBLIC_API_BASE_URL = "localhost/"
+NEXT_PUBLIC_API_BASE_URL = "http://localhost"
 NEXT_PUBLIC_GOOGLE_CLIENTID="<-- google client id -->"
+NEXT_PUBLIC_GITHUB_APP_NAME="<-- github app name -->"
 NEXT_PUBLIC_GITHUB_ID="<-- github client id -->"
 NEXT_PUBLIC_SENTRY_DSN="<-- sentry dns -->"
 NEXT_PUBLIC_ENABLE_OAUTH=0

apps/app/components/breadcrumbs/index.tsx

@@ -15,7 +15,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
     <>
       <div className="flex items-center">
         <div
-          className="grid h-8 w-8 cursor-pointer place-items-center rounded border border-gray-300 text-center text-sm hover:bg-gray-100"
+          className="grid h-8 w-8 cursor-pointer place-items-center flex-shrink-0 rounded border border-gray-300 text-center text-sm hover:bg-gray-100"
           onClick={() => router.back()}
         >
           <ArrowLeftIcon className="h-3 w-3" />

apps/app/components/core/board-view/single-board.tsx

@@ -72,7 +72,7 @@ export const SingleBoard: React.FC<Props> = ({
 
   return (
     <div className={`h-full flex-shrink-0 rounded ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}>
-      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}>
+      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
         <BoardHeader
           addIssueToState={addIssueToState}
           bgColor={bgColor}
@@ -86,7 +86,7 @@ export const SingleBoard: React.FC<Props> = ({
         <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
           {(provided, snapshot) => (
             <div
-              className={`relative mt-3 h-full px-3 pb-3 ${
+              className={`relative mt-3 h-full px-3 pb-3 overflow-y-auto  ${
                 snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
               } ${!isCollapsed ? "hidden" : "block"}`}
               ref={provided.innerRef}

apps/app/components/core/board-view/single-issue.tsx

@@ -226,19 +226,21 @@ export const SingleBoardIssue: React.FC<Props> = ({
             </h5>
           </a>
         </Link>
-        <div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
+        <div className="relative flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
           {properties.priority && selectedGroup !== "priority" && (
             <ViewPrioritySelect
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
               isNotAllowed={isNotAllowed}
+              selfPositioned
             />
           )}
           {properties.state && selectedGroup !== "state_detail.name" && (
             <ViewStateSelect
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
               isNotAllowed={isNotAllowed}
+              selfPositioned
             />
           )}
           {properties.due_date && (
@@ -276,6 +278,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
               isNotAllowed={isNotAllowed}
+              tooltipPosition="left"
+              selfPositioned
             />
           )}
         </div>

apps/app/components/core/index.ts

@@ -8,3 +8,4 @@ export * from "./issues-view-filter";
 export * from "./issues-view";
 export * from "./link-modal";
 export * from "./not-authorized-view";
+export * from "./multi-level-select";

apps/app/components/core/multi-level-select.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from "react";
+
+import { Listbox, Transition } from "@headlessui/react";
+
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+
+type TSelectOption = {
+  id: string;
+  label: string;
+  value: any;
+  children?:
+    | (TSelectOption & {
+        children?: null;
+      })[]
+    | null;
+};
+
+type TMultipleSelectProps = {
+  options: TSelectOption[];
+  selected: TSelectOption | null;
+  setSelected: (value: any) => void;
+  label: string;
+  direction?: "left" | "right";
+};
+
+export const MultiLevelSelect: React.FC<TMultipleSelectProps> = (props) => {
+  const { options, selected, setSelected, label, direction = "right" } = props;
+
+  const [openChildFor, setOpenChildFor] = useState<TSelectOption | null>(null);
+
+  return (
+    <div className="fixed top-16 w-72">
+      <Listbox
+        value={selected}
+        onChange={(value) => {
+          if (value?.children === null) {
+            setSelected(value);
+            setOpenChildFor(null);
+          } else setOpenChildFor(value);
+        }}
+      >
+        {({ open }) => (
+          <div className="relative mt-1">
+            <Listbox.Button
+              onClick={() => setOpenChildFor(null)}
+              className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md sm:text-sm"
+            >
+              <span className="block truncate">{selected?.label ?? label}</span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </Listbox.Button>
+            <Transition
+              as={React.Fragment}
+              show={open}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Listbox.Options
+                static
+                className="absolute mt-1 max-h-60 w-full rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+              >
+                {options.map((option) => (
+                  <Listbox.Option
+                    key={option.id}
+                    className={
+                      "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-gray-100 hover:text-gray-900"
+                    }
+                    onClick={(e: any) => {
+                      if (option.children !== null) {
+                        e.preventDefault();
+                        setOpenChildFor(option);
+                      }
+                      if (option.id === openChildFor?.id) {
+                        e.preventDefault();
+                        setOpenChildFor(null);
+                      }
+                    }}
+                    value={option}
+                  >
+                    {({ selected }) => (
+                      <>
+                        {openChildFor?.id === option.id && (
+                          <div
+                            className={`w-72 h-auto max-h-72 bg-white border border-gray-200 absolute rounded-lg ${
+                              direction === "right"
+                                ? "rounded-tl-none shadow-md left-full translate-x-2"
+                                : "rounded-tr-none shadow-md right-full -translate-x-2"
+                            }`}
+                          >
+                            {option.children?.map((child) => (
+                              <Listbox.Option
+                                key={child.id}
+                                className={
+                                  "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-gray-100 hover:text-gray-900"
+                                }
+                                as="div"
+                                value={child}
+                              >
+                                {({ selected }) => (
+                                  <>
+                                    <span
+                                      className={`block truncate ${
+                                        selected ? "font-medium" : "font-normal"
+                                      }`}
+                                    >
+                                      {child.label}
+                                    </span>
+                                    {selected ? (
+                                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
+                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                      </span>
+                                    ) : null}
+                                  </>
+                                )}
+                              </Listbox.Option>
+                            ))}
+
+                            <div
+                              className={`w-0 h-0 absolute border-t-8 border-gray-300 ${
+                                direction === "right"
+                                  ? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
+                                  : "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"
+                              }`}
+                            />
+                          </div>
+                        )}
+                        <span
+                          className={`block truncate ${selected ? "font-medium" : "font-normal"}`}
+                        >
+                          {option.label}
+                        </span>
+                        {selected ? (
+                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
+                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                        ) : null}
+                      </>
+                    )}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </Transition>
+          </div>
+        )}
+      </Listbox>
+    </div>
+  );
+};

apps/app/components/core/sidebar/links-list.tsx

@@ -29,7 +29,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
       {links.map((link) => (
         <div key={link.id} className="relative">
           {!isNotAllowed && (
-            <div className="absolute top-1.5 right-1.5 z-10 flex items-center gap-1">
+            <div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
               <Link href={link.url}>
                 <a
                   className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 outline-none"
@@ -56,8 +56,8 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
                 <h5 className="w-4/5">{link.title}</h5>
                 <p className="mt-0.5 text-gray-500">
                   Added {timeAgo(link.created_at)}
-                  <br />
-                  by {link.created_by_detail.email}
+                  {/* <br />
+                  by {link.created_by_detail.email} */}
                 </p>
               </div>
             </a>

apps/app/components/cycles/single-cycle-card.tsx

@@ -87,7 +87,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
       <div className="rounded-md border bg-white p-3">
         <div className="grid grid-cols-9 gap-2 divide-x">
           <div className="col-span-3 flex flex-col space-y-3">
-            <div className="flex items-center justify-between gap-2">
+            <div className="flex items-start justify-between gap-2">
               <Link href={`/${workspaceSlug}/projects/${projectId as string}/cycles/${cycle.id}`}>
                 <a>
                   <h2 className="font-medium w-full max-w-[175px] lg:max-w-[225px] xl:max-w-[300px]  text-ellipsis overflow-hidden">

apps/app/components/emoji-icon-picker/index.tsx

@@ -59,7 +59,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
         leaveTo="transform opacity-0 scale-95"
       >
         <Popover.Panel className="absolute z-10 mt-2 w-80 rounded-md bg-white shadow-lg">
-          <div className="h-80 w-80 overflow-auto rounded border bg-white p-2 shadow-2xl">
+          <div className="h-72 w-80 overflow-auto rounded border bg-white p-2 shadow-2xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 rounded border-b p-1">
                 {tabOptions.map((tab) => (