Font fixes (#377)

Co-authored-by: mnida <[email protected]>
Co-authored-by: Diego Escobedo <[email protected]>
Co-authored-by: Hardik Agarwal <[email protected]>
Co-authored-by: Hardik Agarwal <[email protected]>

backend/metering_billing/demos.py

@@ -89,21 +89,21 @@ def setup_demo_3(company_name, username=None, email=None, password=None, mode="c
     for _ in range(1):
         customer = Customer.objects.create(
             organization=organization,
-            customer_name="BigCompany " + str(uuid.uuid4())[:6],
+            customer_name="BigCompany " + str(uuid.uuid4().hex)[:6],
         )
         big_customers.append(customer)
     medium_customers = []
     for _ in range(2):
         customer = Customer.objects.create(
             organization=organization,
-            customer_name="MediumCompany " + str(uuid.uuid4())[:6],
+            customer_name="MediumCompany " + str(uuid.uuid4().hex)[:6],
         )
         medium_customers.append(customer)
     small_customers = []
     for _ in range(5):
         customer = Customer.objects.create(
             organization=organization,
-            customer_name="SmallCompany " + str(uuid.uuid4())[:6],
+            customer_name="SmallCompany " + str(uuid.uuid4().hex)[:6],
         )
         small_customers.append(customer)
     calls, sum_words, sum_compute, unique_lang, unique_subsections = baker.make(
@@ -484,7 +484,7 @@ def setup_demo_3(company_name, username=None, email=None, password=None, mode="c
                         customer=customer,
                         event_name="generate_text",
                         time_created=tc,
-                        idempotency_id=uuid.uuid4(),
+                        idempotency_id=str(uuid.uuid4().hex),
                         properties={
                             "language": language,
                             "subsection": subsection,
@@ -497,7 +497,7 @@ def setup_demo_3(company_name, username=None, email=None, password=None, mode="c
                         customer=customer,
                         event_name="computation",
                         time_created=tc,
-                        idempotency_id=uuid.uuid4(),
+                        idempotency_id=str(uuid.uuid4().hex),
                         properties={
                             "cost": abs(compute_time * random.gauss(ct_mean, ct_sd)),
                         },
@@ -517,7 +517,7 @@ def setup_demo_3(company_name, username=None, email=None, password=None, mode="c
                     event_name="log_num_seats",
                     properties=gaussian_users(n, users_mean, users_sd, max_users),
                     time_created=random_date(sub.start_date, sub.end_date, n),
-                    idempotency_id=uuid.uuid4,
+                    idempotency_id=str(uuid.uuid4().hex),
                     _quantity=n,
                 )
 
@@ -590,21 +590,21 @@ def setup_paas_demo(
     for _ in range(1):
         customer = Customer.objects.create(
             organization=organization,
-            customer_name="BigCompany " + str(uuid.uuid4())[:6],
+            customer_name="BigCompany " + str(uuid.uuid4().hex)[:6],
         )
         big_customers.append(customer)
     medium_customers = []
     for _ in range(2):
         customer = Customer.objects.create(
             organization=organization,
-            customer_name="MediumCompany " + str(uuid.uuid4())[:6],
+            customer_name="MediumCompany " + str(uuid.uuid4().hex)[:6],
         )
         medium_customers.append(customer)
     small_customers = []
     for _ in range(5):
         customer = Customer.objects.create(
             organization=organization,
-            customer_name="SmallCompany " + str(uuid.uuid4())[:6],
+            customer_name="SmallCompany " + str(uuid.uuid4().hex)[:6],
         )
         small_customers.append(customer)
     (

frontend/src/components/Customers/CustomerDetail.tsx

@@ -26,6 +26,7 @@ import CustomerInfoView from "./CustomerInfo";
 // @ts-ignore
 import dayjs from "dayjs";
 import { toast } from "react-toastify";
+import CopyText from "../base/CopytoClipboard";
 
 function CustomerDetail(props: {
   visible: boolean;
@@ -190,9 +191,11 @@ function CustomerDetail(props: {
         <div className="flex justify-between flex-col max-w mx-3">
           <div className="text-left	">
             <h1 className="mb-4">{data?.customer_name}</h1>
-            <div className="flex flex-row">
+            <div className="flex flex-row items-center">
               <div className="plansDetailLabel">ID:&nbsp; </div>
-              <div className="plansDetailValue">{props.customer_id}</div>
+              <div className="plansDetailValue font-menlo">
+                  <CopyText showIcon textToCopy={data?.customer_id}/>
+              </div>
             </div>
           </div>
           <div

frontend/src/components/Customers/CustomerInfo.tsx

@@ -10,6 +10,7 @@ import LoadingSpinner from "../LoadingSpinner";
 import { useMutation } from "react-query";
 import { Customer } from "../../api/api";
 import { toast } from "react-toastify";
+import CopyText from "../base/CopytoClipboard";
 
 const CustomerInfoView: FC<any> = ({ data, cost_data, onDateChange }) => {
   const [transformedGraphData, setTransformedGraphData] = React.useState<any>(
@@ -128,7 +129,7 @@ const CustomerInfoView: FC<any> = ({ data, cost_data, onDateChange }) => {
             <b>Customer Name:</b> {data.customer_name ?? "N/A"}
           </p>
           <p>
-            <b>Customer ID:</b> {data.customer_id ?? "N/A"}
+            <b>Customer ID:</b> {<span class="font-menlo">{data.customer_id}</span> ?? "N/A"}
           </p>
           <p>
             <b>Email:</b> {data.email ?? "N/A"}

frontend/src/components/EventPreview.tsx

@@ -9,6 +9,7 @@ import LoadingSpinner from "./LoadingSpinner";
 import dayjs from "dayjs";
 import "./EventPreview.css";
 import CustomPagination from "./CustomPagination/CustomPagination";
+import CopyText from "./base/CopytoClipboard";
 
 const { Panel } = Collapse;
 
@@ -121,7 +122,7 @@ const EventPreview: FC = () => {
                     </div>
                     <div className="flex align-middle text-[16px]">
                       <p className="leading-[24px]">customer_id: </p>
-                      <p className="infoValue"> {event.customer_id}</p>
+                      <p className="infoValue"> <CopyText showIcon textToCopy={event.customer_id}/></p>
                     </div>
                   </div>
                 }
@@ -132,7 +133,7 @@ const EventPreview: FC = () => {
                   <div className="grid grid-cols-2">
                     <div className="flex align-middle text-[16px] ">
                       <p className="leading-[24px]">ID: </p>
-                      <p className="infoValue"> {event.idempotency_id}</p>
+                      <p className="infoValue">  <CopyText showIcon textToCopy={event.idempotency_id}/></p>
                     </div>
 
                     <p className="text-[16px]">Properties: </p>

frontend/src/components/Plans/PlanCard/PlanCard.tsx

@@ -8,6 +8,7 @@ import { useMutation, useQueryClient } from "react-query";
 import { Plan } from "../../../api/api";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
+import CopyText from "../../base/CopytoClipboard";
 interface PlanCardProps {
   plan: PlanType;
 }
@@ -87,7 +88,7 @@ const PlanCard: FC<PlanCardProps> = ({ plan }) => {
 
         <div className="planDetails">
           <div className="pr-1 planDetailsLabel">Plan ID:</div>
-          <div className="planDetailsValue planIdOverflow"> {plan.plan_id}</div>
+          <div className="planDetailsValue planIdOverflow font-menlo"> {plan.plan_id}</div>
         </div>
 
         <div className="planDetails">

frontend/src/components/Plans/PlanDetails/PlanDetails.tsx

@@ -15,6 +15,7 @@ import {
 import LoadingSpinner from "../../LoadingSpinner";
 import LinkExternalIds from "../LinkExternalIds";
 import { toast } from "react-toastify";
+import CopyText from "../../base/CopytoClipboard";
 
 type PlanDetailParams = {
   planId: string;
@@ -143,8 +144,11 @@ const PlanDetails: FC = () => {
           ></PageLayout>
           <div className="mx-10">
             <div className="planDetails">
-              <div className="pr-1 planDetailsLabel">Plan Id:</div>
-              <div className="planDetailsValue"> {plan.plan_id}</div>
+              <div className="pr-1 planDetailsLabel">Plan ID:</div>
+              <div className="planDetailsValue">
+                {" "}
+                <CopyText showIcon textToCopy={plan.plan_id} />
+              </div>
             </div>
             <div className="planDetails">
               <div className="pr-1 planDetailsLabel">Plan Duration:</div>

frontend/src/components/Settings/settings/tabs/ActivityTab.tsx

@@ -6,6 +6,7 @@ import { Typography } from "antd";
 import { Organization } from "../../../../api/api";
 import LoadingSpinner from "../../../LoadingSpinner";
 import CustomPagination from "../../../CustomPagination/CustomPagination";
+import {ActionUserType} from "../../../../types/account-type";
 
 export default function ActivityStream() {
   const [cursor, setCursor] = useState<string>("");
@@ -89,13 +90,13 @@ export default function ActivityStream() {
       <div className="w-1/2 justify-center">
         <Paper border={true}>
           <ul role="list" className="divide-y divide-gray-200">
-            {activityItems?.results.map((activityItem) => (
+            {activityItems?.map((activityItem) => (
               <li key={activityItem.id} className="py-4">
                 <div className="flex space-x-3">
                   <div className="flex-1 space-y-3">
                     <div className="flex items-center justify-between">
                       <h3 className="font-bold">
-                        User<b> {activityItem.actor.string_repr}</b>
+                        User<b> {activityItem.actor?.string_repr}</b>
                       </h3>
                       <h3 className=" text-gray-500">
                         {dayjs(activityItem.timestamp).format(
@@ -105,12 +106,12 @@ export default function ActivityStream() {
                     </div>
                     <h3 className="m">
                       {activityItem.verb}{" "}
-                      <b>{activityItem.action_object.string_repr}</b> (
-                      {activityItem.action_object.object_type})
+                      <b>{activityItem.action_object?.string_repr}</b> (
+                      {activityItem.action_object?.object_type})
                       {activityItem?.target ? (
                         <h3 className="mt-1">
-                          on <b>{activityItem.target.string_repr}</b> (
-                          {activityItem?.target.object_type})
+                          on <b>{activityItem.target?.string_repr}</b> (
+                          {activityItem?.target?.object_type})
                         </h3>
                       ) : (
                         ""

frontend/src/components/Settings/settings/tabs/DeveloperTab.tsx

@@ -24,6 +24,7 @@ import {
   WebhookEndpointCreate,
   WebhookEndpointUpdate,
 } from "../../../../types/webhook-type";
+import CopyText from "../../../base/CopytoClipboard";
 import {
   APIKeyType,
   APIKeyCreate,
@@ -125,7 +126,7 @@ export const DeveloperTab = () => {
         setWebhookSelected(undefined);
       },
       onError: (error) => {
-        toast.error(error.response.data.detail);
+        toast.error(error.response.title);
       },
     }
   );
@@ -144,7 +145,7 @@ export const DeveloperTab = () => {
         setVisible(true);
       },
       onError: (error) => {
-        toast.error(error.response.data.detail);
+        toast.error(error.response.title);
       },
     }
   );
@@ -276,7 +277,7 @@ export const DeveloperTab = () => {
               dataIndex: "prefix",
               key: "prefix",
               render: (prefix: string) => {
-                return <div>{prefix}•••</div>;
+                return <div className="font-menlo">{prefix}•••</div>
               },
             },
             {
@@ -342,11 +343,17 @@ export const DeveloperTab = () => {
               title: "Webhook URL",
               dataIndex: "webhook_url",
               key: "webhook_url",
+             render: (webhook_url: string, record) => (
+                <CopyText textToCopy={webhook_url} />
+              ),
             },
             {
               title: "Webhook Secret",
               dataIndex: "webhook_secret",
               key: "webhook_secret",
+              render: (webhook_secret: string, record) => (
+                <CopyText textToCopy={webhook_secret} />
+              ),
             },
             {
               title: "Triggers",

frontend/src/components/base/CopytoClipboard.css

@@ -0,0 +1,24 @@
+.copyText {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.copiedTag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.text-to-copy {
+    margin:0 10px 0 5px;
+}
+
+.checkedIcon {
+    color: white;
+    border-radius: 5px;
+    background: green;
+    margin-right: 6px;
+}

frontend/src/components/base/CopytoClipboard.tsx

@@ -0,0 +1,48 @@
+// @ts-ignore
+import React, {useState} from "react";
+import {CheckCircleOutlined, CopyOutlined} from "@ant-design/icons";
+import "./CopytoClipboard.css";
+import { Tooltip} from "antd";
+
+interface CopyTextProps {
+    textToCopy: string;
+    className?:string;
+    showIcon?:boolean;
+}
+
+const CopyText: React.FC<CopyTextProps> = ({textToCopy, className,showIcon}) => {
+    const [copySuccess, setCopySuccess] = useState(false);
+
+    const copyToClipBoard = async (copyMe) => {
+        try {
+            await navigator.clipboard.writeText(copyMe);
+            setCopySuccess(true);
+            setTimeout(() => {
+                setCopySuccess(false);
+            }, 3000);
+        } catch (err) {
+            setCopySuccess(false);
+        }
+    };
+
+    return (
+        <div className={`${className} flex`}>
+            <div className="copyText" onClick={() => copyToClipBoard(textToCopy)}>
+                <Tooltip
+                    placement="right"
+                    title={copySuccess ?
+                        <div className="copiedTag">
+                        <CheckCircleOutlined className="checkedIcon"/> Copied
+                       </div> :
+                        <div>Click to Copy <CopyOutlined/></div>}
+                >
+                    <span className="text-to-copy font-menlo">{textToCopy}</span>
+                    {!!showIcon &&  <CopyOutlined/>}
+                </Tooltip>
+            </div>
+        </div>
+
+    );
+};
+
+export default CopyText;

frontend/src/custom.less

@@ -19,7 +19,6 @@
 @border-color-base: #1d1d1f;
 @font-size-base: 15px;
 @font-size-sm: 14px;
-@font-family: Satoshi, sans-serif;
 @heading-1-size: 32px;
 @heading-2-size: 26px;
 @heading-3-size: 16px;