Continue trimming frontend integration page and renaming variables

This commit is contained in:
Tuan Dang
2022-12-12 10:36:13 -05:00
parent 397c15d61e
commit c6c2cfaaa5
6 changed files with 94 additions and 94 deletions
@@ -5,77 +5,76 @@ import {
faCheck,
faX,
} from "@fortawesome/free-solid-svg-icons";
import deleteIntegrationAuth from "../../pages/api/integrations/DeleteIntegrationAuth";
interface Props {
integration: IntegrationOption;
setSelectedIntegrationOption: () => void;
integrationOptionPress: () => void;
deleteIntegrationAuth: () => void;
authorizations: any;
}
interface IntegrationOption {
interface CloudIntegrationOption {
name: string;
type: string;
clientId: string;
docsLink: string;
}
interface Props {
cloudIntegrationOption: CloudIntegrationOption;
setSelectedIntegrationOption: () => void;
integrationOptionPress: () => void;
integrationAuths: any;
}
const CloudIntegration = ({
integration,
cloudIntegrationOption,
setSelectedIntegrationOption,
integrationOptionPress,
deleteIntegrationAuth,
authorizations
integrationAuths
}: Props) => {
return authorizations ? (
return integrationAuths ? (
<div
className={`relative ${
["Heroku"].includes(integration.name)
["Heroku"].includes(cloudIntegrationOption.name)
? "hover:bg-white/10 duration-200 cursor-pointer"
: "opacity-50"
} flex flex-row bg-white/5 h-32 rounded-md p-4 items-center`}
onClick={() => {
if (!["Heroku"].includes(integration.name)) return;
setSelectedIntegrationOption(integration);
if (!["Heroku"].includes(cloudIntegrationOption.name)) return;
setSelectedIntegrationOption(cloudIntegrationOption);
integrationOptionPress({
integrationOption: integration
integrationOption: cloudIntegrationOption
});
}}
key={integration.name}
key={cloudIntegrationOption.name}
>
<Image
src={`/images/integrations/${integration.name}.png`}
src={`/images/integrations/${cloudIntegrationOption.name}.png`}
height={70}
width={70}
alt="integration logo"
/>
{integration.name.split(" ").length > 2 ? (
{cloudIntegrationOption.name.split(" ").length > 2 ? (
<div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
<div>{integration.name.split(" ")[0]}</div>
<div>{cloudIntegrationOption.name.split(" ")[0]}</div>
<div className="text-base">
{integration.name.split(" ")[1]}{" "}
{integration.name.split(" ")[2]}
{cloudIntegrationOption.name.split(" ")[1]}{" "}
{cloudIntegrationOption.name.split(" ")[2]}
</div>
</div>
) : (
<div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-xl ml-4 max-w-xs">
{integration.name}
{cloudIntegrationOption.name}
</div>
)}
{["Heroku"].includes(integration.name) &&
authorizations
{["Heroku"].includes(cloudIntegrationOption.name) &&
integrationAuths
.map((authorization) => authorization.integration)
.includes(integration.name.toLowerCase()) && (
.includes(cloudIntegrationOption.name.toLowerCase()) && (
<div className="absolute group z-50 top-0 right-0 flex flex-row">
<div
onClick={() => {
deleteIntegrationAuth({
integrationAuthId: authorizations
integrationAuthId: integrationAuths
.filter(
(authorization) =>
authorization.integration ==
integration.name.toLowerCase()
cloudIntegrationOption.name.toLowerCase()
)
.map((authorization) => authorization._id)[0],
});
@@ -98,7 +97,7 @@ const CloudIntegration = ({
</div>
</div>
)}
{!["Heroku"].includes(integration.name) && (
{!["Heroku"].includes(cloudIntegrationOption.name) && (
<div className="absolute group z-50 top-0 right-0 flex flex-row">
<div className="w-max bg-yellow py-0.5 px-2 rounded-bl-md rounded-tr-md text-xs flex flex-row items-center text-black opacity-90">
Coming Soon