286864eb3d
* WIP * Refactoring HTTP Method & Content Type to be objects instead of arrays TODO: 1. Set the default content-type for Get request to "None". Currently, it's raw 2. For None content-type, don't send the body field in the API request * Almost working implementation for the None type Currently, the body still gets sent in non-GET requests even if the None tab is selected. * Adding object.freeze to prevent any modifications to HTTP_METHOD_ENUM * WIP: Using enum & const for ts autocomplete * working implementation for NONE type, apiContentType prop added to API actions * WIP * Refactoring HTTP Method & Content Type to be objects instead of arrays TODO: 1. Set the default content-type for Get request to "None". Currently, it's raw 2. For None content-type, don't send the body field in the API request * Almost working implementation for the None type Currently, the body still gets sent in non-GET requests even if the None tab is selected. * Adding object.freeze to prevent any modifications to HTTP_METHOD_ENUM * WIP: Using enum & const for ts autocomplete * working implementation for NONE type, apiContentType prop added to API actions * adds apiContentType to actionConfiguration.formData object * Handling apiContentType property in Rest API formData * change apiContentType when user types content-type value and switches http method * makes api editor as similar as possible to postman, project postman. * Correcting the import in ApiEditorConstants * Resolved all merge conflicts * replay DSL functtionality * removes unneccessary files from worker * Fixes type declarations, naming e.t.c. * fix server side merge conflicts * fix client side merge conflicts * fix failing cypress tests Co-authored-by: Irongade <adeoluayangade@yahoo.com> Co-authored-by: Ayangade Adeoluwa <37867493+Irongade@users.noreply.github.com>
72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { CommonComponentProps } from "./common";
|
|
import Text, { Case, TextType } from "./Text";
|
|
|
|
export type TabProp<T> = {
|
|
key: string;
|
|
title: T;
|
|
panelComponent: JSX.Element;
|
|
};
|
|
|
|
const TabList = styled.div`
|
|
margin-left: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 24px;
|
|
background-color: ${(props) => props.theme.colors.multiSwitch.bg};
|
|
width: fit-content;
|
|
margin-bottom: 12px;
|
|
padding-left: 1px;
|
|
`;
|
|
|
|
const TabContent = styled.div`
|
|
height: calc(100% - 24px);
|
|
`;
|
|
|
|
const Tab = styled.div<{ selected: boolean }>`
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
height: 22px;
|
|
padding: 0 12px;
|
|
${(props) =>
|
|
props.selected
|
|
? `
|
|
background-color: ${props.theme.colors.multiSwitch.selectedBg};
|
|
`
|
|
: null};
|
|
border-right: 1px solid ${(props) => props.theme.colors.multiSwitch.border};
|
|
`;
|
|
|
|
type MultiSwitchProps<T> = CommonComponentProps & {
|
|
tabs: Array<TabProp<T>>;
|
|
selected: { title: T; value: string };
|
|
onSelect: (title: string) => void;
|
|
};
|
|
|
|
export default function MultiSwitch<T>(props: MultiSwitchProps<T>) {
|
|
const selectedTab = props.tabs.find(
|
|
(tab) => tab.key === props.selected.value,
|
|
);
|
|
return (
|
|
<div data-cy={props.cypressSelector}>
|
|
<TabList>
|
|
{props.tabs.map((tab) => (
|
|
<Tab
|
|
data-cy={`tab--${tab.title}`}
|
|
key={tab.key}
|
|
onClick={() => props.onSelect(tab.key)}
|
|
selected={props.selected.value === tab.key}
|
|
>
|
|
<Text case={Case.UPPERCASE} type={TextType.P3}>
|
|
{tab.title}
|
|
</Text>
|
|
</Tab>
|
|
))}
|
|
</TabList>
|
|
{selectedTab && <TabContent>{selectedTab.panelComponent}</TabContent>}
|
|
</div>
|
|
);
|
|
}
|