d5ac05caf8
* bumped sentry version modified performance monitor to use a queue internally to make synchronous logging easy added logging for api pane close / open and various different methods * added use effect to stop tracking on mount of entity properties * removed open api tracking * fixed stop tracking to pop from the end instead of the beginning added tracking for editor mount and sidebar mount * added tracking for entity explorer * moved from app route to sentry app route because passing JSX to app route causes re-renders * Fixing theme and route change issues. Co-authored-by: Nikhil Nandagopal <nikhil@appsmith.com> Co-authored-by: Satbir Singh <satbir121@gmail.com>
108 lines
2.9 KiB
TypeScript
108 lines
2.9 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import {
|
|
useRouteMatch,
|
|
useLocation,
|
|
useParams,
|
|
Link,
|
|
Route,
|
|
} from "react-router-dom";
|
|
import { getCurrentOrg } from "selectors/organizationSelectors";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { TabComponent, TabProp } from "components/ads/Tabs";
|
|
import Text, { TextType } from "components/ads/Text";
|
|
import history from "utils/history";
|
|
import styled from "styled-components";
|
|
|
|
import MemberSettings from "./Members";
|
|
import IconComponent from "components/designSystems/appsmith/IconComponent";
|
|
import { fetchOrg } from "actions/orgActions";
|
|
import { GeneralSettings } from "./General";
|
|
import * as Sentry from "@sentry/react";
|
|
const SentryRoute = Sentry.withSentryRouting(Route);
|
|
|
|
const LinkToApplications = styled(Link)`
|
|
margin-top: 30px;
|
|
margin-bottom: 35px;
|
|
display: inline-block;
|
|
width: auto;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
svg {
|
|
cursor: pointer;
|
|
}
|
|
`;
|
|
const SettingsWrapper = styled.div`
|
|
width: ${props => props.theme.pageContentWidth}px;
|
|
margin: 0 auto;
|
|
`;
|
|
export default function Settings() {
|
|
const { orgId } = useParams();
|
|
const currentOrg = useSelector(getCurrentOrg);
|
|
const { path } = useRouteMatch();
|
|
const location = useLocation();
|
|
const dispatch = useDispatch();
|
|
useEffect(() => {
|
|
dispatch(fetchOrg(orgId as string));
|
|
}, []);
|
|
|
|
const SettingsRenderer = (
|
|
<div>
|
|
<SentryRoute
|
|
path={`${path}/general`}
|
|
component={GeneralSettings}
|
|
location={location}
|
|
/>
|
|
<SentryRoute
|
|
path={`${path}/members`}
|
|
component={MemberSettings}
|
|
location={location}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
const tabArr: TabProp[] = [
|
|
{
|
|
key: "general",
|
|
title: "General",
|
|
panelComponent: SettingsRenderer,
|
|
icon: "general",
|
|
},
|
|
{
|
|
key: "members",
|
|
title: "Members",
|
|
panelComponent: SettingsRenderer,
|
|
icon: "user",
|
|
},
|
|
];
|
|
const isMembersPage = location.pathname.indexOf("members") !== -1;
|
|
|
|
return (
|
|
<SettingsWrapper>
|
|
<LinkToApplications to={"/applications"}>
|
|
<IconComponent iconName="chevron-left" color="#9F9F9F"></IconComponent>
|
|
<Text type={TextType.H1}>{currentOrg.name}</Text>
|
|
</LinkToApplications>
|
|
<TabComponent
|
|
tabs={tabArr}
|
|
selectedIndex={isMembersPage ? 1 : 0}
|
|
onSelect={(index: number) => {
|
|
const settingsStartIndex = location.pathname.indexOf("settings");
|
|
const settingsEndIndex = settingsStartIndex + "settings".length;
|
|
const hasSlash = location.pathname[settingsEndIndex] === "/";
|
|
let newUrl = "";
|
|
|
|
if (hasSlash) {
|
|
newUrl = `${location.pathname.substr(0, settingsEndIndex)}/${
|
|
tabArr[index].key
|
|
}`;
|
|
} else {
|
|
newUrl = `${location.pathname}/${tabArr[index].key}`;
|
|
}
|
|
history.push(newUrl);
|
|
}}
|
|
></TabComponent>
|
|
</SettingsWrapper>
|
|
);
|
|
}
|