From b2aba271feb7426d9d4132850fb1829c83c85cd9 Mon Sep 17 00:00:00 2001
From: PintoGideon <gideonpinto123@gmail.com>
Date: Fri, 16 Feb 2024 12:38:12 -0500
Subject: [PATCH 1/2] Move towards css modules
---
src/components/AddNode/add-node.css | 2 -
...LibraryCopy.css => LibraryCopy.module.css} | 44 +++++--------------
src/components/LibraryCopy/index.tsx | 35 ++++++---------
src/components/VisualDatasets/index.tsx | 1 -
4 files changed, 24 insertions(+), 58 deletions(-)
rename src/components/LibraryCopy/{LibraryCopy.css => LibraryCopy.module.css} (56%)
diff --git a/src/components/AddNode/add-node.css b/src/components/AddNode/add-node.css
index 0162ce781..55db68aa0 100644
--- a/src/components/AddNode/add-node.css
+++ b/src/components/AddNode/add-node.css
@@ -142,8 +142,6 @@
flex-direction: row-reverse;
}
-
-
.autogenerated__text {
font-family:"monospace";
}
diff --git a/src/components/LibraryCopy/LibraryCopy.css b/src/components/LibraryCopy/LibraryCopy.module.css
similarity index 56%
rename from src/components/LibraryCopy/LibraryCopy.css
rename to src/components/LibraryCopy/LibraryCopy.module.css
index cd23ad178..e2f945e13 100644
--- a/src/components/LibraryCopy/LibraryCopy.css
+++ b/src/components/LibraryCopy/LibraryCopy.module.css
@@ -1,5 +1,5 @@
/* Custom Modal Styling */
-.custom-modal {
+.customModal {
border-radius: 2px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
@@ -7,18 +7,18 @@
}
/* Style for the Upload Buttons section */
-.upload-buttons {
+.uploadButtons {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
-.upload-buttons button {
+.uploadButtons button {
font-size: 16px;
}
/* Style for the Local Files Section */
-.local-files-section {
+.localFilesSection {
height: 200px;
margin-top: 1rem;
overflow: auto;
@@ -28,15 +28,15 @@
}
/* Style for the Directory Name Section */
-.directory-form {
+.directoryForm {
margin-top: 1rem;
}
-.directory-form label {
+.directoryForm label {
font-weight: bold;
}
-.directory-form input {
+.directoryForm input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
@@ -44,18 +44,18 @@
}
/* Style for the Upload Button Section */
-.upload-button-section {
+.uploadButtonSection {
margin-top: 1.5rem;
text-align: center;
}
-.upload-button-section button {
+.uploadButtonSection button {
font-size: 1.15rem;
padding: 12px 20px;
}
/* Style for the Code Display Section */
-.code-display-section {
+.codeDisplaySection {
margin-top: 1rem;
height: 200px;
overflow: auto;
@@ -64,30 +64,6 @@
border-radius: 5px;
}
-/* Style for the Progress Bar Section */
-.progress-bar-section {
- margin-top: 1rem;
-}
-
-/* Style for the Countdown Alert Section */
-.countdown-alert-section {
- margin-top: 1rem;
- font-size: 16px;
- color: #4caf50;
-}
-/* Button Styling */
-button {
- cursor: pointer;
- background-color: #3498db;
- color: #fff;
- border-radius: 5px;
- padding: 10px 20px;
- transition: background-color 0.3s;
-}
-
-button:hover {
- background-color: #2980b9;
-}
diff --git a/src/components/LibraryCopy/index.tsx b/src/components/LibraryCopy/index.tsx
index b98d73ef5..97f34e161 100644
--- a/src/components/LibraryCopy/index.tsx
+++ b/src/components/LibraryCopy/index.tsx
@@ -45,7 +45,7 @@ import {
import { useDispatch } from "react-redux";
import { setSidebarActive } from "../../store/ui/actions";
import { fetchResource } from "../../api/common";
-import "./LibraryCopy.css";
+import styles from "./LibraryCopy.module.css";
export const fetchFilesUnderThisPath = async (path?: string) => {
if (!path) return;
@@ -78,10 +78,9 @@ export const fetchFoldersUnderThisPath = async (path?: string) => {
path,
});
- const parsedUpload =
- uploads.data && uploads.data[0].subfolders
- ? JSON.parse(uploads.data[0].subfolders)
- : [];
+ const parsedUpload = uploads?.uploads.data[0].subfolders
+ ? JSON.parse(uploads.data[0].subfolders)
+ : [];
return parsedUpload;
};
@@ -442,14 +441,14 @@ const UploadComponent: React.FC<UploadComponentProps> = ({
useEffect(() => {
const d = getTimestamp();
setDirectoryName(`${d}`);
- }, [uploadFileModal]);
+ }, []);
// Handle server upload
const handleUpload = async () => {
const client = ChrisAPIClient.getClient();
await client.setUrls();
const onUploadProgress = (file: any, progressEvent: AxiosProgressEvent) => {
- if (progressEvent && progressEvent.total) {
+ if (progressEvent?.total) {
const percentCompleted = `${Math.round(
(progressEvent.loaded * 100) / progressEvent.total,
)}%`;
@@ -514,10 +513,10 @@ const UploadComponent: React.FC<UploadComponentProps> = ({
onClose={() => handleReset()}
isOpen={uploadFileModal}
aria-labelledby="file-upload"
- className="custom-modal" // Add a custom class for styling
+ className={styles.customModal} // Add a custom class for styling
>
{/* Upload Buttons Section */}
- <div className="upload-buttons">
+ <div className={styles.uploadButtons}>
<input
ref={folderInput}
style={{ display: "none" }}
@@ -534,22 +533,16 @@ const UploadComponent: React.FC<UploadComponentProps> = ({
onChange={handleFileChange}
multiple
/>
- <Button
- onClick={() => folderInput.current && folderInput.current.click()}
- variant="primary"
- >
+ <Button onClick={() => folderInput.current?.click()} variant="primary">
Upload Folder
</Button>
- <Button
- onClick={() => fileInput.current && fileInput.current.click()}
- variant="primary"
- >
+ <Button onClick={() => fileInput.current?.click()} variant="primary">
Upload Files
</Button>
</div>
{/* Local Files Section */}
- <div className="local-files-section">
+ <div className={styles.localFilesSection}>
{progress > 0 ? (
<Progress
aria-labelledby="file-upload"
@@ -591,7 +584,7 @@ const UploadComponent: React.FC<UploadComponentProps> = ({
{/* Directory Name Section */}
<Form
onSubmit={(event) => event.preventDefault()}
- className="directory-form"
+ className={styles.directoryForm}
>
<FormGroup fieldId="directory name" isRequired label="Directory Name">
<TextInput
@@ -606,7 +599,7 @@ const UploadComponent: React.FC<UploadComponentProps> = ({
</Form>
{/* Upload Button Section */}
- <div className="upload-button-section">
+ <div className={styles.uploadButtonSection}>
<Button
isDisabled={
localFiles.length === 0 ||
@@ -623,7 +616,7 @@ const UploadComponent: React.FC<UploadComponentProps> = ({
</div>
{/* Code Display Section */}
- <div className="code-display-section">
+ <div className={styles.codeDisplaySection}>
<CodeBlock style={{ height: "200px", overflow: "scroll" }}>
<CodeBlockCode>
{Object.keys(currentFile).length === 0 ? (
diff --git a/src/components/VisualDatasets/index.tsx b/src/components/VisualDatasets/index.tsx
index 34daaca7b..901173998 100644
--- a/src/components/VisualDatasets/index.tsx
+++ b/src/components/VisualDatasets/index.tsx
@@ -20,7 +20,6 @@ import {
} from "@patternfly/react-core";
import { BrainIcon, DesktopIcon } from "@patternfly/react-icons";
import { Typography } from "antd";
-
import WrapperConnect from "../Wrapper";
import { InfoIcon } from "../Common";
import ChrisAPIClient from "../../api/chrisapiclient";
From aa8ad5be81ef0cf93b0302fd6b9db832656d8878 Mon Sep 17 00:00:00 2001
From: PintoGideon <gideonpinto123@gmail.com>
Date: Fri, 16 Feb 2024 12:39:59 -0500
Subject: [PATCH 2/2] cleanup
---
src/components/LibraryCopy/index.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/LibraryCopy/index.tsx b/src/components/LibraryCopy/index.tsx
index 97f34e161..58782edef 100644
--- a/src/components/LibraryCopy/index.tsx
+++ b/src/components/LibraryCopy/index.tsx
@@ -78,7 +78,7 @@ export const fetchFoldersUnderThisPath = async (path?: string) => {
path,
});
- const parsedUpload = uploads?.uploads.data[0].subfolders
+ const parsedUpload = uploads?.data[0].subfolders
? JSON.parse(uploads.data[0].subfolders)
: [];