|
@@ -1,28 +1,33 @@
|
|
|
import React, { Component, useContext, useEffect, useState } from "react";
|
|
import React, { Component, useContext, useEffect, useState } from "react";
|
|
|
|
|
+import _ from "lodash";
|
|
|
|
|
+import {
|
|
|
|
|
+ withRouter,
|
|
|
|
|
+ WithRouterProps,
|
|
|
|
|
+ type RouteComponentProps,
|
|
|
|
|
+} from "react-router";
|
|
|
import styled from "styled-components";
|
|
import styled from "styled-components";
|
|
|
|
|
|
|
|
|
|
+import Heading from "components/form-components/Heading";
|
|
|
|
|
+import Helper from "components/form-components/Helper";
|
|
|
|
|
+import Button from "components/porter/Button";
|
|
|
|
|
+import Error from "components/porter/Error";
|
|
|
|
|
+import Input from "components/porter/Input";
|
|
|
|
|
+import Link from "components/porter/Link";
|
|
|
|
|
+import Spacer from "components/porter/Spacer";
|
|
|
|
|
+import TabRegion from "components/TabRegion";
|
|
|
|
|
+
|
|
|
|
|
+import api from "shared/api";
|
|
|
|
|
+import { withAuth, type WithAuthProps } from "shared/auth/AuthorizationHoc";
|
|
|
|
|
+import { isAlphanumeric } from "shared/common";
|
|
|
import { Context } from "shared/Context";
|
|
import { Context } from "shared/Context";
|
|
|
|
|
+import { getQueryParam } from "shared/routing";
|
|
|
import settingsGrad from "assets/settings-grad.svg";
|
|
import settingsGrad from "assets/settings-grad.svg";
|
|
|
|
|
|
|
|
-import InvitePage from "./InviteList";
|
|
|
|
|
-import TabRegion from "components/TabRegion";
|
|
|
|
|
-import Heading from "components/form-components/Heading";
|
|
|
|
|
-import Helper from "components/form-components/Helper";
|
|
|
|
|
import DashboardHeader from "../cluster-dashboard/DashboardHeader";
|
|
import DashboardHeader from "../cluster-dashboard/DashboardHeader";
|
|
|
-import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
|
|
|
|
|
-import { RouteComponentProps, withRouter, WithRouterProps } from "react-router";
|
|
|
|
|
-import { getQueryParam } from "shared/routing";
|
|
|
|
|
import APITokensSection from "./APITokensSection";
|
|
import APITokensSection from "./APITokensSection";
|
|
|
-import _ from "lodash";
|
|
|
|
|
-import Link from "components/porter/Link";
|
|
|
|
|
-import Spacer from "components/porter/Spacer";
|
|
|
|
|
-import ProjectDeleteConsent from "./ProjectDeleteConsent";
|
|
|
|
|
|
|
+import InvitePage from "./InviteList";
|
|
|
import Metadata from "./Metadata";
|
|
import Metadata from "./Metadata";
|
|
|
-import Button from "components/porter/Button";
|
|
|
|
|
-import Input from "components/porter/Input";
|
|
|
|
|
-import { isAlphanumeric } from "shared/common";
|
|
|
|
|
-import api from "shared/api";
|
|
|
|
|
-import Error from "components/porter/Error";
|
|
|
|
|
|
|
+import ProjectDeleteConsent from "./ProjectDeleteConsent";
|
|
|
|
|
|
|
|
type PropsType = RouteComponentProps & WithAuthProps & {};
|
|
type PropsType = RouteComponentProps & WithAuthProps & {};
|
|
|
type ValidationError = {
|
|
type ValidationError = {
|
|
@@ -32,7 +37,7 @@ type ValidationError = {
|
|
|
type StateType = {
|
|
type StateType = {
|
|
|
projectName: string;
|
|
projectName: string;
|
|
|
currentTab: string;
|
|
currentTab: string;
|
|
|
- tabOptions: { value: string; label: string }[];
|
|
|
|
|
|
|
+ tabOptions: Array<{ value: string; label: string }>;
|
|
|
showCostConfirmModal: boolean;
|
|
showCostConfirmModal: boolean;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
@@ -48,8 +53,7 @@ function ProjectSettings(props: any) {
|
|
|
const [buttonStatus, setButtonStatus] = useState<React.ReactNode>("");
|
|
const [buttonStatus, setButtonStatus] = useState<React.ReactNode>("");
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
- const selectedTab =
|
|
|
|
|
- getQueryParam(props, "selected_tab") || "manage-access";
|
|
|
|
|
|
|
+ const selectedTab = getQueryParam(props, "selected_tab") || "manage-access";
|
|
|
|
|
|
|
|
if (currentTab !== selectedTab) {
|
|
if (currentTab !== selectedTab) {
|
|
|
setCurrentTab(selectedTab);
|
|
setCurrentTab(selectedTab);
|
|
@@ -60,12 +64,10 @@ function ProjectSettings(props: any) {
|
|
|
if (projectName !== currentProject.name) {
|
|
if (projectName !== currentProject.name) {
|
|
|
setProjectName(currentProject.name);
|
|
setProjectName(currentProject.name);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
}, []);
|
|
}, []);
|
|
|
|
|
|
|
|
-
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
- let { currentProject } = context;
|
|
|
|
|
|
|
+ const { currentProject } = context;
|
|
|
if (projectName !== currentProject.name) {
|
|
if (projectName !== currentProject.name) {
|
|
|
setProjectName(currentProject.name);
|
|
setProjectName(currentProject.name);
|
|
|
}
|
|
}
|
|
@@ -99,7 +101,6 @@ function ProjectSettings(props: any) {
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
if (!_.isEqual(tabOpts, tabOptions)) {
|
|
if (!_.isEqual(tabOpts, tabOptions)) {
|
|
|
setTabOptions(tabOpts);
|
|
setTabOptions(tabOpts);
|
|
|
}
|
|
}
|
|
@@ -108,7 +109,6 @@ function ProjectSettings(props: any) {
|
|
|
if (selectedTab && selectedTab !== currentTab) {
|
|
if (selectedTab && selectedTab !== currentTab) {
|
|
|
setCurrentTab(selectedTab);
|
|
setCurrentTab(selectedTab);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
}, [context, projectName, currentTab, props, tabOptions]);
|
|
}, [context, projectName, currentTab, props, tabOptions]);
|
|
|
|
|
|
|
|
const validateProjectName = (): ValidationError => {
|
|
const validateProjectName = (): ValidationError => {
|
|
@@ -145,19 +145,19 @@ function ProjectSettings(props: any) {
|
|
|
await api.renameProject(
|
|
await api.renameProject(
|
|
|
"<token>",
|
|
"<token>",
|
|
|
{
|
|
{
|
|
|
- name: name,
|
|
|
|
|
|
|
+ name,
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
project_id: context.currentProject.id,
|
|
project_id: context.currentProject.id,
|
|
|
- })
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ );
|
|
|
setButtonStatus("success");
|
|
setButtonStatus("success");
|
|
|
window.location.reload();
|
|
window.location.reload();
|
|
|
-
|
|
|
|
|
} catch (err) {
|
|
} catch (err) {
|
|
|
- console.log(err)
|
|
|
|
|
|
|
+ console.log(err);
|
|
|
setButtonStatus(<Error message="Unable to rename project" />);
|
|
setButtonStatus(<Error message="Unable to rename project" />);
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
const renderTabContents = () => {
|
|
const renderTabContents = () => {
|
|
|
if (!props.isAuthorized("settings", "", ["get", "delete"])) {
|
|
if (!props.isAuthorized("settings", "", ["get", "delete"])) {
|
|
@@ -166,9 +166,8 @@ function ProjectSettings(props: any) {
|
|
|
|
|
|
|
|
if (currentTab === "manage-access") {
|
|
if (currentTab === "manage-access") {
|
|
|
return <InvitePage />;
|
|
return <InvitePage />;
|
|
|
- }
|
|
|
|
|
- else if (currentTab == "metadata") {
|
|
|
|
|
- return <Metadata />
|
|
|
|
|
|
|
+ } else if (currentTab == "metadata") {
|
|
|
|
|
+ return <Metadata />;
|
|
|
} else if (currentTab === "api-tokens") {
|
|
} else if (currentTab === "api-tokens") {
|
|
|
return <APITokensSection />;
|
|
return <APITokensSection />;
|
|
|
} else if (currentTab === "billing") {
|
|
} else if (currentTab === "billing") {
|
|
@@ -188,18 +187,23 @@ function ProjectSettings(props: any) {
|
|
|
} else {
|
|
} else {
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
-
|
|
|
|
|
<Heading isAtTop={true}>Rename Project</Heading>
|
|
<Heading isAtTop={true}>Rename Project</Heading>
|
|
|
|
|
|
|
|
- <Helper color={validateProjectName().hasError ? "#f5cb42" : "#aaaabb"}>
|
|
|
|
|
|
|
+ <Helper
|
|
|
|
|
+ color={validateProjectName().hasError ? "#f5cb42" : "#aaaabb"}
|
|
|
|
|
+ >
|
|
|
(lowercase letters, numbers, and "-" only)
|
|
(lowercase letters, numbers, and "-" only)
|
|
|
</Helper>
|
|
</Helper>
|
|
|
- <Input placeholder={"ex: perspective-vortex"} value={name} setValue={setName} width={"500px"}>
|
|
|
|
|
- </Input>
|
|
|
|
|
|
|
+ <Input
|
|
|
|
|
+ placeholder={"ex: perspective-vortex"}
|
|
|
|
|
+ value={name}
|
|
|
|
|
+ setValue={setName}
|
|
|
|
|
+ width={"500px"}
|
|
|
|
|
+ ></Input>
|
|
|
<Spacer y={1} />
|
|
<Spacer y={1} />
|
|
|
<Button
|
|
<Button
|
|
|
onClick={() => {
|
|
onClick={() => {
|
|
|
- handleNameChange()
|
|
|
|
|
|
|
+ handleNameChange();
|
|
|
}}
|
|
}}
|
|
|
status={buttonStatus}
|
|
status={buttonStatus}
|
|
|
loadingText={"Updating..."}
|
|
loadingText={"Updating..."}
|
|
@@ -228,7 +232,7 @@ function ProjectSettings(props: any) {
|
|
|
</DeleteButton>
|
|
</DeleteButton>
|
|
|
<ProjectDeleteConsent
|
|
<ProjectDeleteConsent
|
|
|
setShowCostConfirmModal={setShowCostConfirmModal}
|
|
setShowCostConfirmModal={setShowCostConfirmModal}
|
|
|
- show={showCostConfirmModal} // <-- Pass these props
|
|
|
|
|
|
|
+ show={showCostConfirmModal} // <-- Pass these props
|
|
|
/>
|
|
/>
|
|
|
</>
|
|
</>
|
|
|
);
|
|
);
|
|
@@ -254,7 +258,6 @@ function ProjectSettings(props: any) {
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
ProjectSettings.contextType = Context;
|
|
ProjectSettings.contextType = Context;
|
|
|
|
|
|
|
|
export default withRouter(withAuth(ProjectSettings));
|
|
export default withRouter(withAuth(ProjectSettings));
|