Merge branch 'release/0.9.0'

saeloun · Jan 24, 2023 · a579548 · a579548
2 parents 9a92163 + 74eb841
commit a579548
Show file tree

Hide file tree

Showing 56 changed files with 2,291 additions and 502 deletions.
diff --git a/Gemfile b/Gemfile
@@ -215,7 +215,7 @@ group :test do
   gem "rspec-retry"
 
   # BuildKite Test Collector
-  gem "buildkite-test_collector", git: "https://github.com/buildkite/test-collector-ruby.git", branch: "main"
+  # gem "buildkite-test_collector", git: "https://github.com/buildkite/test-collector-ruby.git", branch: "main"
 end
 
 # https://github.com/ankane/strong_migrations

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -11,15 +11,6 @@ GIT
       rubocop
       smart_properties
 
-GIT
-  remote: https://github.com/buildkite/test-collector-ruby.git
-  revision: 58577eac6208a11b7a1198a5ab2c75cb0d40ba9f
-  branch: main
-  specs:
-    buildkite-test_collector (1.4.1)
-      activesupport (>= 4.2)
-      websocket (~> 1.2)
-
 GIT
   remote: https://github.com/heartcombo/devise
   revision: 6d32d2447cc0f3739d9732246b5a5bde98d9e032
@@ -575,7 +566,6 @@ DEPENDENCIES
   annotate
   aws-sdk-s3
   bootsnap (>= 1.4.4)
-  buildkite-test_collector!
   bullet
   bundler-audit
   capybara (>= 3.26)

diff --git a/app/controllers/internal_api/v1/projects_controller.rb b/app/controllers/internal_api/v1/projects_controller.rb
@@ -3,7 +3,7 @@
 class InternalApi::V1::ProjectsController < InternalApi::V1::ApplicationController
   def index
     authorize Project
-    render :index, locals: ProjectsFetchService.new(current_company, params).process, status: :ok
+    render :index, locals: Projects::IndexService.new(current_company, params).process, status: :ok
   end
 
   def show

diff --git a/app/javascript/src/StyledComponents/MoreOptions.tsx b/app/javascript/src/StyledComponents/MoreOptions.tsx
@@ -1,29 +1,26 @@
-import React, { useRef } from "react";
+import React from "react";
 
 import classnames from "classnames";
 import { useOutsideClick } from "helpers";
 
 const DEFAULT_STYLE =
-  "absolute right-20 rounded-lg border-2 border-miru-gray-200 bg-white py-2 drop-shadow";
+  "absolute right-20 rounded-lg border-miru-gray-200 bg-white py-2 shadow-c1 text-sm w-34";
 type MoreOptionsProps = {
   children?: any;
   className?: string;
   setVisibilty;
+  wrapperRef: any;
 };
 
 const MoreOptions = ({
   children,
   className,
   setVisibilty,
+  wrapperRef,
 }: MoreOptionsProps) => {
-  const wrapperRef = useRef(null);
   useOutsideClick(wrapperRef, () => setVisibilty(false));
 
-  return (
-    <ul className={classnames(DEFAULT_STYLE, className)} ref={wrapperRef}>
-      {children}
-    </ul>
-  );
+  return <ul className={classnames(DEFAULT_STYLE, className)}>{children}</ul>;
 };
 
 export default MoreOptions;
diff --git a/app/javascript/src/StyledComponents/SidePanel/Body.tsx b/app/javascript/src/StyledComponents/SidePanel/Body.tsx
@@ -5,11 +5,10 @@ import classnames from "classnames";
 type BodyProps = {
   children: any;
   className: string;
-  hasFooter: boolean;
 };
 
-const Body = ({ children, className, hasFooter = true }: BodyProps) => (
-  <div className={classnames({ hasFooter, className })}>{children}</div>
+const Body = ({ children, className }: BodyProps) => (
+  <div className={classnames(className)}>{children}</div>
 );
 
 export default Body;
diff --git a/app/javascript/src/StyledComponents/SidePanel/index.tsx b/app/javascript/src/StyledComponents/SidePanel/index.tsx
@@ -26,7 +26,7 @@ const SidePanel = ({
     <div
       ref={wrapperRef}
       className={classnames(
-        "sidebar__container z-50 flex w-full flex-col lg:w-1/5",
+        "sidebar__container flex w-full flex-col lg:w-1/5",
         WrapperClassname
       )}
     >

diff --git a/app/javascript/src/StyledComponents/Tooltip.tsx b/app/javascript/src/StyledComponents/Tooltip.tsx
@@ -5,6 +5,7 @@ import classnames from "classnames";
 type TooltipProps = {
   content?: string;
   placeBottom?: boolean;
+  show?: boolean;
   delay?: number;
   className?: string;
   children?: object;
@@ -15,12 +16,13 @@ const Tooltip = ({
   placeBottom = false,
   delay = 400,
   className,
+  show = true,
   ...restprops
 }: TooltipProps) => {
   let timeout;
   const [active, setActive] = useState<boolean>(false);
   const DEFAULT_STYLE = `before:h-0 before:w-0 before:absolute before:pointer-events-none before:border-4 before:mr-4 before:content-none before:left-1/2
-                        absolute left-1/2 z-10 rounded-md p-2 text-miru-dark-purple-1000 bg-miru-gray-1000 text-sm leading-none whitespace-nowrap ${
+                        absolute left-1/2 z-10 rounded-full py-2 px-4 text-miru-dark-purple-1000 bg-miru-gray-1000 text-sm leading-none whitespace-nowrap ${
                           placeBottom ? "top-full mt-2" : "bottom-full mb-2"
                         }`;
 
@@ -42,7 +44,7 @@ const Tooltip = ({
       onMouseLeave={hideTip}
     >
       {restprops.children}
-      {active && (
+      {active && show && (
         <div className={classnames(DEFAULT_STYLE, className)}>{content}</div>
       )}
     </div>

diff --git a/app/javascript/src/common/CustomCheckbox.tsx b/app/javascript/src/common/CustomCheckbox.tsx
@@ -8,9 +8,11 @@ const CustomCheckbox = ({
   checkboxValue,
   id,
   handleCheck,
+  hanldeOnClick,
   name = "",
   wrapperClassName = "",
   labelClassName = "",
+  isUpdatedDesign,
 }) => (
   <div className={classnames(wrapperClassName)}>
     <div
@@ -20,30 +22,62 @@ const CustomCheckbox = ({
     >
       <input
         checked={isChecked}
-        className="custom__checkbox col-start-1 row-start-1 grid h-5 w-5 cursor-pointer opacity-0"
         data-cy="select-all-checkbox"
         id={id}
         name={name}
         type="checkbox"
         value={checkboxValue}
+        className={`custom__checkbox col-start-1 row-start-1 grid ${
+          isUpdatedDesign ? "h-4 w-4" : "h-5 w-5"
+        } cursor-pointer opacity-0`}
         onChange={handleCheck}
+        onClick={hanldeOnClick}
       />
-      <div className="col-start-1 row-start-1 mr-2 grid h-5 w-5 flex-shrink-0 content-center justify-items-center border-2 border-miru-han-purple-1000 bg-white focus-within:border-blue-500">
-        <svg
-          version="1.1"
-          viewBox="0 0 17 12"
-          xmlns="http://www.w3.org/2000/svg"
-          className={classnames(
-            "pointer-events-none h-2 w-2 fill-current text-miru-han-purple-1000",
-            { hidden: !isChecked }
-          )}
-        >
-          <g fill="none" fillRule="evenodd">
-            <g fill="#5B34EA" fillRule="nonzero" transform="translate(-9 -11)">
-              <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
+      <div
+        className={`col-start-1 row-start-1 ${
+          isUpdatedDesign ? "mr-0 h-4 w-4" : "mr-2 h-5 w-5"
+        } grid flex-shrink-0 content-center justify-items-center rounded-sm border-2 border-miru-han-purple-1000 bg-white focus-within:border-blue-500`}
+      >
+        {!isUpdatedDesign ? (
+          <svg
+            version="1.1"
+            viewBox="0 0 17 12"
+            xmlns="http://www.w3.org/2000/svg"
+            className={classnames(
+              "pointer-events-none h-2 w-2 fill-current text-miru-han-purple-1000",
+              { hidden: !isChecked }
+            )}
+          >
+            <g fill="none" fillRule="evenodd">
+              <g
+                fill="#5B34EA"
+                fillRule="nonzero"
+                transform="translate(-9 -11)"
+              >
+                <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
+              </g>
             </g>
-          </g>
-        </svg>
+          </svg>
+        ) : (
+          <svg
+            fill="none"
+            height="7"
+            viewBox="2 -4 10 15"
+            width="10"
+            xmlns="http://www.w3.org/2000/svg"
+            className={classnames(
+              "bold pointer-events-none h-4 w-4 fill-current text-miru-han-purple-1000",
+              { hidden: !isChecked }
+            )}
+          >
+            <path
+              clipRule="evenodd"
+              d="M9.11565 0.477682C9.47315 0.852213 9.45935 1.44564 9.08482 1.80315L4.50146 6.17815C4.13919 6.52395 3.56909 6.52395 3.20682 6.17814L0.915177 3.99064C0.540649 3.63314 0.526852 3.0397 0.884359 2.66518C1.24187 2.29065 1.8353 2.27685 2.20983 2.63436L3.85415 4.20396L7.79018 0.446854C8.16471 0.0893495 8.75815 0.103152 9.11565 0.477682Z"
+              fill="#5B34EA"
+              fillRule="evenodd"
+            />
+          </svg>
+        )}
       </div>
     </div>
     {text !== "" && (
@@ -57,4 +91,9 @@ const CustomCheckbox = ({
   </div>
 );
 
+CustomCheckbox.defaultProps = {
+  hanldeOnClick: () => {}, //eslint-disable-line
+  isUpdatedDesign: false,
+};
+
 export default CustomCheckbox;
diff --git a/app/javascript/src/components/DisplayView.tsx b/app/javascript/src/components/DisplayView.tsx
@@ -8,7 +8,7 @@ import Navigation from "./Navbar/Mobile/Navigation";
 const DisplayView = props => {
   const { isAdminUser, user } = props;
   const [isDesktop, setIsDesktop] = useState<boolean>(window.innerWidth > 1025);
-  const [selectedTab, setSelectedTab] = useState<string>("Invoices");
+  const [selectedTab, setSelectedTab] = useState<string>(null);
 
   window.addEventListener("resize", () =>
     setIsDesktop(window.innerWidth > 1025)

diff --git a/app/javascript/src/components/Invoices/InvoiceSummary/index.tsx b/app/javascript/src/components/Invoices/InvoiceSummary/index.tsx
@@ -16,7 +16,7 @@ const InvoiceSummary = ({
   };
 
   return (
-    <div className="mt-6 overflow-x-auto rounded-2xl bg-miru-han-purple-1000 px-10 py-10 text-white">
+    <div className="mt-6 overflow-x-auto rounded-2xl bg-miru-han-purple-1000 px-10 py-6 text-white">
       <ul className="page-display__wrap mt-0 border-t-0">
         <li
           className="page-display__box mt-6 flex cursor-pointer items-center lg:mt-0 lg:items-start"

diff --git a/app/javascript/src/components/Invoices/List/BulkActionsWrapper/BulkActions.tsx b/app/javascript/src/components/Invoices/List/BulkActionsWrapper/BulkActions.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { CaretDownIcon, XIcon } from "miruIcons";
 
@@ -9,36 +9,48 @@ const BulkActions = ({
   downloading,
   selectedInvoiceCount,
   setIsMoreOptionsOpen,
-}) =>
-  isInvoiceSelected && (
-    <div className="flex items-center justify-end">
-      <span className="text-sm font-semibold leading-4 text-miru-dark-purple-1000">
-        {selectedInvoiceCount > 1
-          ? `${selectedInvoiceCount} invoices selected`
-          : `${selectedInvoiceCount} invoice selected`}
-      </span>
-      <button className="ml-4" onClick={clearCheckboxes}>
-        <XIcon color="#5b34ea" size={16} weight="bold" />
-      </button>
-      <div
-        className="ml-4 cursor-pointer rounded px-6 py-2"
-        style={{
-          background: "rgba(205,214,223, 0.2)",
-          border: "1px solid rgba(91, 52, 234, .2)",
-        }}
-      >
+}) => {
+  const [hover, setHover] = useState(false);
+  const handleMouseEnter = () => setHover(true);
+  const handleMouseLeave = () => setHover(false);
+
+  return (
+    isInvoiceSelected && (
+      <div className="flex items-center justify-end">
+        <span className="text-sm font-semibold leading-4 text-miru-dark-purple-1000">
+          {selectedInvoiceCount > 1
+            ? `${selectedInvoiceCount} invoices selected`
+            : `${selectedInvoiceCount} invoice selected`}
+        </span>
         <button
-          disabled={downloading}
-          className={`flex items-center text-base font-bold leading-5 opacity-100 ${
-            downloading ? "text-miru-gray-1000" : "text-miru-han-purple-1000"
-          }`}
-          onClick={() => setIsMoreOptionsOpen(!isMoreOptionsOpen)}
+          className="ml-4 p-1 hover:bg-miru-gray-100"
+          onClick={clearCheckboxes}
         >
-          <span className="mr-2.5">Actions</span>
-          <CaretDownIcon className="font-bold" size={18} />
+          <XIcon color="#5b34ea" size={16} weight="bold" />
         </button>
+        <div
+          className="ml-4 cursor-pointer rounded px-6 py-2"
+          style={{
+            background: hover && "rgba(205,214,223, 0.2)",
+            border: "1px solid rgba(91, 52, 234, .2)",
+          }}
+          onMouseEnter={handleMouseEnter} // Or onMouseOver
+          onMouseLeave={handleMouseLeave}
+        >
+          <button
+            disabled={downloading}
+            className={`flex items-center text-base font-bold leading-5 opacity-100 ${
+              downloading ? "text-miru-gray-1000" : "text-miru-han-purple-1000"
+            }`}
+            onClick={() => setIsMoreOptionsOpen(!isMoreOptionsOpen)}
+          >
+            <span className="mr-2.5">Actions</span>
+            <CaretDownIcon className="font-bold" size={18} weight="bold" />
+          </button>
+        </div>
       </div>
-    </div>
+    )
   );
+};
 
 export default BulkActions;
diff --git a/app/javascript/src/components/Invoices/List/BulkActionsWrapper/index.tsx b/app/javascript/src/components/Invoices/List/BulkActionsWrapper/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 
 import { DeleteIcon, DownloadSimpleIcon } from "miruIcons";
 import { MoreOptions } from "StyledComponents";
@@ -19,6 +19,7 @@ const BulkActionsWrapper = ({
   setShowBulkDownloadDialog,
 }) => {
   const [isMoreOptionsOpen, setIsMoreOptionsOpen] = useState<boolean>(false);
+  const wrapperRef = useRef(null);
 
   return (
     <div className="mb-4 flex w-full flex-wrap items-center justify-between">
@@ -33,7 +34,7 @@ const BulkActionsWrapper = ({
           setFilterParams={setFilterParams}
         />
       </div>
-      <div>
+      <div ref={wrapperRef}>
         <BulkActions
           clearCheckboxes={clearCheckboxes}
           downloading={downloading}
@@ -43,23 +44,27 @@ const BulkActionsWrapper = ({
           setIsMoreOptionsOpen={setIsMoreOptionsOpen}
         />
         {isMoreOptionsOpen && (
-          <MoreOptions setVisibilty={setIsMoreOptionsOpen}>
+          <MoreOptions
+            setVisibilty={setIsMoreOptionsOpen}
+            wrapperRef={wrapperRef}
+          >
             <li
               className="flex cursor-pointer items-center py-2.5 px-4 text-miru-han-purple-1000 hover:bg-miru-gray-100"
               onClick={() => {
                 setShowBulkDownloadDialog(true);
                 setIsMoreOptionsOpen(false);
               }}
             >
-              <DownloadSimpleIcon className="mr-4" size={16} /> Download
+              <DownloadSimpleIcon className="mr-2" size={16} weight="bold" />{" "}
+              Download
             </li>
             <li
               className="flex cursor-pointer items-center py-2.5 px-4 text-miru-red-400 hover:bg-miru-gray-100"
               onClick={() => {
                 setShowBulkDeleteDialog(true);
               }}
             >
-              <DeleteIcon className="mr-4" size={16} /> Delete
+              <DeleteIcon className="mr-2" size={16} weight="bold" /> Delete
             </li>
           </MoreOptions>
         )}