)?.slug
+ );
+ handlePopUpClose('deleteEnv');
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+ <>
+
+
+
Project Environments
+
+ Choose which environments will show up in your dashboard like
+ development, staging, production
+
+
+ Note: the text in slugs shows how these environmant should be
+ accessed in CLI.
+
+
+
+
+
+
+
+
+
+
+ | Name |
+ Slug |
+ |
+
+
+
+ {data?.length > 0 ? (
+ data.map(({ name, slug }) => {
+ return (
+
+ |
+ {name}
+ |
+
+ {slug}
+ |
+
+
+
+
+
+ |
+
+ );
+ })
+ ) : (
+
+ |
+ No environmants found
+ |
+
+ )}
+
+
+
handlePopUpClose('deleteEnv')}
+ onSubmit={onEnvDeleteCB}
+ />
+ handlePopUpClose('createUpdateEnv')}
+ onCreateSubmit={onEnvCreateCB}
+ onEditSubmit={onEnvUpdateCB}
+ />
+
+ >
+ );
+};
+
+export default EnvironmentTable;
diff --git a/frontend/components/basic/table/ServiceTokenTable.tsx b/frontend/components/basic/table/ServiceTokenTable.tsx
index 412a0dbfb..4d30b3013 100644
--- a/frontend/components/basic/table/ServiceTokenTable.tsx
+++ b/frontend/components/basic/table/ServiceTokenTable.tsx
@@ -3,7 +3,6 @@ import { faX } from '@fortawesome/free-solid-svg-icons';
import { useNotificationContext } from '~/components/context/Notifications/NotificationProvider';
import deleteServiceToken from "../../../pages/api/serviceToken/deleteServiceToken";
-import { reverseEnvMapping } from '../../../public/data/frequentConstants';
import guidGenerator from '../../utilities/randomId';
import Button from '../buttons/Button';
@@ -60,7 +59,7 @@ const ServiceTokenTable = ({ data, workspaceName, setServiceTokens }: ServiceTok
{workspaceName}
- {reverseEnvMapping[row.environment]}
+ {row.environment}
|
{new Date(row.expiresAt).toUTCString()}
diff --git a/frontend/components/integrations/CloudIntegration.tsx b/frontend/components/integrations/CloudIntegration.tsx
index 75a8019a5..dd1b13f47 100644
--- a/frontend/components/integrations/CloudIntegration.tsx
+++ b/frontend/components/integrations/CloudIntegration.tsx
@@ -74,7 +74,7 @@ const CloudIntegration = ({
integrationAuths
.map((authorization) => authorization.integration)
.includes(cloudIntegrationOption.name.toLowerCase()) && (
-
+
{
event.stopPropagation();
diff --git a/frontend/components/integrations/Integration.tsx b/frontend/components/integrations/Integration.tsx
index 11edf7cb7..bbc8861dc 100644
--- a/frontend/components/integrations/Integration.tsx
+++ b/frontend/components/integrations/Integration.tsx
@@ -15,9 +15,7 @@ import getIntegrationApps from "../../pages/api/integrations/GetIntegrationApps"
import updateIntegration from "../../pages/api/integrations/updateIntegration"
import {
contextNetlifyMapping,
- envMapping,
reverseContextNetlifyMapping,
- reverseEnvMapping,
} from "../../public/data/frequentConstants";
interface Integration {
@@ -36,13 +34,23 @@ interface IntegrationApp {
siteId: string;
}
-const Integration = ({
- integration
-}: {
+type Props = {
integration: Integration;
-}) => {
- const [integrationEnvironment, setIntegrationEnvironment] = useState(
- reverseEnvMapping[integration.environment]
+ environments: Array<{ name: string; slug: string }>;
+};
+
+const Integration = ({
+ integration,
+ environments = []
+}:Props ) => {
+ // set initial environment. This find will only execute when component is mounting
+ const [integrationEnvironment, setIntegrationEnvironment] = useState<
+ Props['environments'][0]
+ >(
+ environments.find(({ slug }) => slug === integration.environment) || {
+ name: '',
+ slug: '',
+ }
);
const [fileState, setFileState] = useState([]);
const router = useRouter();
@@ -93,7 +101,7 @@ const Integration = ({
case "vercel":
return (
-
);
@@ -136,42 +145,47 @@ const Integration = ({
if (!integrationApp || apps.length === 0) return
return (
-
-
+
+
- ENVIRONMENT
- {
- setIntegrationEnvironment(environment);
- }}
+
+ ENVIRONMENT
+
+ name)
+ : null
+ }
+ selected={integrationEnvironment.name}
+ onChange={(envName) =>
+ setIntegrationEnvironment(
+ environments.find(({ name }) => envName === name) || {
+ name: 'unknown',
+ slug: 'unknown',
+ }
+ )
+ }
isFull={true}
/>
-
+
+ className='mx-4 text-gray-400 mt-8'
+ />
-
-
+
+
INTEGRATION
-
+
{integration.integration.charAt(0).toUpperCase() +
integration.integration.slice(1)}
-
-
- APP
-
+
+ APP
app.name) : null}
selected={integrationApp}
@@ -182,52 +196,55 @@ const Integration = ({
{renderIntegrationSpecificParams(integration)}
-
- {integration.isActive ? (
-
- ) : (
- |