Skip to content

Commit

Permalink
Tried to fix all differences between master and my branch, added more…
Browse files Browse the repository at this point in the history
… comments on more of my personal sections of code
  • Loading branch information
Christian Michael Kang authored and Christian Michael Kang committed Sep 26, 2024
1 parent 7184b0b commit a9ee70a
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 40 deletions.
4 changes: 1 addition & 3 deletions guide/results-viewer-react/src/YamlWriter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,7 @@ export const YamlWriter = () => {
<GlobalStyle />
<h1>Create a PewPew Test</h1>
<YamlDiv>
<YamlWriterUpload
sendEndpoints={updateEndpoints}
/>
<YamlWriterUpload sendEndpoints={updateEndpoints}/>
<YamlWriterForm clearParentEndpoints={clearEndpoints} parentEndpoints={state.endpoints}/>
</YamlDiv>
</>
Expand Down
78 changes: 78 additions & 0 deletions guide/results-viewer-react/src/components/Modal/story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,76 @@ const ModalCreateYamlDemo = () => {
);
};

// const ModalSwaggerUrlDemo = () => {
// const modalRef = useRef<ModalObject | null>(null);
// useEffectModal(modalRef, LogLevel.INFO);

// const [swaggerUrl, setSwaggerUrl] = useState('');

// const submitEvent = () => {
// log ("Swagger URL submitted: " + swaggerUrl, LogLevel.INFO);
// return Promise.resolve();
// };

// return (
// <div>
// <GlobalStyle />
// <button onClick={() => modalRef.current?.openModal()}>Upload Swagger URL</button>
// <Modal
// ref={modalRef}
// title={"Upload Swagger URL"}
// submitText={"Submit"}
// onSubmit={submitEvent}
// closeText={"Cancel"}
// isReady={swaggerUrl.length > 0}
// >
// <input
// type="text"
// value={swaggerUrl}
// onChange={(e) => setSwaggerUrl(e.target.value)}
// placeholder="Enter Swagger URL"
// style={{ width: "100%", padding: "8px", marginTop: "10px" }}
// />
// </Modal>
// </div>
// );
// };

// const ModalServerUrlDemo = () => {
// const modalRef = useRef<ModalObject | null>(null);
// useEffectModal(modalRef, LogLevel.INFO);

// const [serverUrl, setServerUrl] = useState('');

// const submitEvent = () => {
// log ("Server URL submitted: " + serverUrl, LogLevel.INFO);
// return Promise.resolve();
// };

// return (
// <div>
// <GlobalStyle />
// <button onClick={() => modalRef.current?.openModal()}>Insert Server URL</button>
// <Modal
// ref={modalRef}
// title={"Insert Server URL"}
// submitText={"Submit"}
// onSubmit={submitEvent}
// closeText={"Cancel"}
// isReady={serverUrl.length > 0}
// >
// <input
// type="text"
// value={serverUrl}
// onChange={(e) => setServerUrl(e.target.value)}
// placeholder="Enter Server URL"
// style={{ width: "100%", padding: "8px", marginTop: "10px" }}
// />
// </Modal>
// </div>
// );
// }

export default {
title: "Modal"
} as Meta<typeof Modal>;
Expand All @@ -206,3 +276,11 @@ export const _LoggerModal: StoryFn = () => (
export const CreateYamlModal: StoryFn = () => (
<ModalCreateYamlDemo/>
);

// export const SwaggerUrlModal: StoryFn = () => (
// <ModalSwaggerUrlDemo/>
// );

// export const ServerUrlModal: StoryFn = () => (
// <ModalServerUrlDemo/>
// );
Original file line number Diff line number Diff line change
Expand Up @@ -175,33 +175,6 @@ interface IndexType {
id: string
}

// Modal wrapper props to make reusing modal component easier
interface ModalWrapperProps {
modalRef: React.RefObject<ModalObject>;
title: string;
submitText: string;
closeText: string;
isReady: boolean;
onSubmit: () => void;
onClose: () => void;
children: React.ReactNode;
}

// A resusable modal wrapper that accepts props and provides a consistent structure for modals
const ModalWrapper = ({ modalRef, title, submitText, closeText, isReady, onSubmit, onClose, children }: ModalWrapperProps) => (
<Modal
ref={modalRef}
title={title}
submitText={submitText}
onSubmit={() => Promise.resolve(onSubmit())}
closeText={closeText}
onClose={onClose}
isReady={isReady}
>
{children}
</Modal>
);

export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
const defaultState: YamlWriterUploadState = {
file: undefined, // To track the Har file
Expand Down Expand Up @@ -419,11 +392,9 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
let hasValidVersion: boolean = false;
let hasValidHost: boolean = false;
if ("openapi" in swaggerData) {
// const swaggerData = unknownData as SwaggerDoc3;
hasValidServers = Array.isArray(swaggerData.servers) && swaggerData.servers.length > 0;
hasValidVersion = typeof swaggerData.openapi === "string" && versionRegex.test(swaggerData.openapi);
} else if ("swagger" in swaggerData) {
// const swaggerData = unknownData as SwaggerDoc2;
hasValidHost = typeof swaggerData.host === "string";
hasValidVersion = typeof swaggerData.swagger === "string" && versionRegex.test(swaggerData.swagger);
} else {
Expand Down Expand Up @@ -647,7 +618,9 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
const fullPath = baseUrl.endsWith("/") || url.startsWith("/") ? `${baseUrl}${url}` : `${baseUrl}/${url}`;
const hostUrl = new URL(baseUrl).hostname;

// Create URL object
// Create URL-like object without URL encoding the `{}` on the endpoints,
// because using the `new URL()` would encode `{}` into `%7B` and `%7D`.
// This ensures the curly braces remain intact for the endpoints.
const parsedUrl = {
href: fullPath,
toString: () => fullPath
Expand Down Expand Up @@ -745,7 +718,9 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
}
}

// Create URL object
// Create URL-like object without URL encoding the `{}` on the endpoints,
// because using the `new URL()` would encode `{}` into `%7B` and `%7D`.
// This ensures the curly braces remain intact for the endpoints.
const parsedUrl = {
href: fullPath,
toString: () => fullPath
Expand Down Expand Up @@ -902,8 +877,8 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
</h3>
</Div>
{/* This is the upload file modal */}
<ModalWrapper
modalRef={fileModalRef}
<Modal
ref={fileModalRef}
title="Upload Files"
submitText="Load"
closeText="Cancel"
Expand Down Expand Up @@ -943,10 +918,10 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
</div>
)}
</div>
</ModalWrapper>
</Modal>
{/* Modal for Swagger URL input */}
<ModalWrapper
modalRef={swaggerUrlModalRef}
<Modal
ref={swaggerUrlModalRef}
title="Enter Swagger URL"
submitText="Submit"
closeText="Cancel"
Expand All @@ -960,7 +935,7 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
<div style={{ width: "90%", height: "auto", display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
<input type="text" style={{ width: "80%", padding: "10px", marginTop: "10px" }} placeholder="Enter Swagger URL" value={state.swaggerUrl} onChange={(e) => setState({ ...state, swaggerUrl: e.target.value })} />
</div>
</ModalWrapper>
</Modal>
{/* This is the modal that opens when a server is missing in a swagger upload */}
<Modal
ref= {serverUrlModalRef}
Expand Down

0 comments on commit a9ee70a

Please sign in to comment.