From cb70baedf962887a192d76e9e61a7c803003d090 Mon Sep 17 00:00:00 2001 From: gokhangunduz Date: Thu, 4 Jan 2024 10:52:32 +0300 Subject: [PATCH] refactor(env-header): :tada: update env-header --- package.json | 1 + public/css/style.css | 64 ++++------------ src/components/Connections/Connections.tsx | 2 +- .../EnvironmentLabels/EnvironmentLabels.tsx | 16 ++-- .../EnvironmentNameLabel.tsx | 12 ++- src/controllers/DataScienceTableData.tsx | 76 ++++--------------- src/functions/GeneralFunctions.ts | 13 ++++ src/index.tsx | 6 +- 8 files changed, 66 insertions(+), 124 deletions(-) diff --git a/package.json b/package.json index 090f0dcc..d83127cf 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "react-helmet": "^6.1.0", "react-icons": "^4.7.1", "react-joystick-component": "^6.2.0", + "react-loading-skeleton": "^3.3.1", "react-redux": "^8.0.5", "react-router-dom": "^6.7.0", "react-scripts": "5.0.1", diff --git a/public/css/style.css b/public/css/style.css index fbab2659..9b5f5ee1 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -985,6 +985,10 @@ video { height: 7rem !important; } +.\!h-60 { + height: 15rem !important; +} + .\!h-8 { height: 2rem !important; } @@ -1149,14 +1153,6 @@ video { height: 100vh; } -.\!h-40 { - height: 10rem !important; -} - -.\!h-60 { - height: 15rem !important; -} - .max-h-\[40rem\] { max-height: 40rem; } @@ -1173,6 +1169,10 @@ video { width: 6rem !important; } +.\!w-28 { + width: 7rem !important; +} + .\!w-32 { width: 8rem !important; } @@ -1370,14 +1370,6 @@ video { width: max-content; } -.\!w-20 { - width: 5rem !important; -} - -.\!w-28 { - width: 7rem !important; -} - .min-w-\[12rem\] { min-width: 12rem; } @@ -1397,6 +1389,14 @@ video { min-width: max-content; } +.min-w-40 { + min-width: 10rem; +} + +.min-w-32 { + min-width: 8rem; +} + .max-w-fit { max-width: -webkit-fit-content; max-width: -moz-fit-content; @@ -1511,34 +1511,6 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.scale-50 { - --tw-scale-x: .5; - --tw-scale-y: .5; - -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.scale-\[0\.60\] { - --tw-scale-x: 0.60; - --tw-scale-y: 0.60; - -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.scale-90 { - --tw-scale-x: .9; - --tw-scale-y: .9; - -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.scale-\[0\.8\] { - --tw-scale-x: 0.8; - --tw-scale-y: 0.8; - -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .transform { -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -2428,10 +2400,6 @@ video { padding-top: 2rem; } -.pr-4 { - padding-right: 1rem; -} - .text-center { text-align: center; } diff --git a/src/components/Connections/Connections.tsx b/src/components/Connections/Connections.tsx index 22614a42..7d031511 100644 --- a/src/components/Connections/Connections.tsx +++ b/src/components/Connections/Connections.tsx @@ -1,10 +1,10 @@ import ConnectionLabel from "../ConnectionLabel/ConnectionLabel"; import StateCell from "../TableInformationCells/StateCell"; import { envApplication } from "../../helpers/envProvider"; +import useCreateRobot from "../../hooks/useCreateRobot"; import { useKeycloak } from "@react-keycloak/web"; import useRobot from "../../hooks/useRobot"; import { ReactElement } from "react"; -import useCreateRobot from "../../hooks/useCreateRobot"; export default function Connections(): ReactElement { const { responseRobot, connectionsReducer } = useRobot(); diff --git a/src/components/EnvironmentLabels/EnvironmentLabels.tsx b/src/components/EnvironmentLabels/EnvironmentLabels.tsx index 21f713db..5513aa1e 100644 --- a/src/components/EnvironmentLabels/EnvironmentLabels.tsx +++ b/src/components/EnvironmentLabels/EnvironmentLabels.tsx @@ -1,11 +1,12 @@ import EnvironmentObjectLabel from "../EnvironmentObjectLabel/EnvironmentObjectLabel"; import EnvironmentNameLabel from "../EnvironmentNameLabel/EnvironmentNameLabel"; import { envApplication } from "../../helpers/envProvider"; -import { useParams } from "react-router-dom"; +import useMain from "../../hooks/useMain"; import { ReactElement } from "react"; +import { orgNameViewer } from "../../functions/GeneralFunctions"; export default function EnvironmentLabels(): ReactElement { - const url = useParams(); + const { selectedState } = useMain(); return (
@@ -13,19 +14,22 @@ export default function EnvironmentLabels(): ReactElement {
diff --git a/src/components/EnvironmentNameLabel/EnvironmentNameLabel.tsx b/src/components/EnvironmentNameLabel/EnvironmentNameLabel.tsx index c90b51cc..d44cf02b 100644 --- a/src/components/EnvironmentNameLabel/EnvironmentNameLabel.tsx +++ b/src/components/EnvironmentNameLabel/EnvironmentNameLabel.tsx @@ -1,13 +1,17 @@ import ColorLabel from "../ColorLabel/ColorLabel"; -import { useParams } from "react-router-dom"; import { ReactElement } from "react"; +import Skeleton from "react-loading-skeleton"; +import "react-loading-skeleton/dist/skeleton.css"; +import useCreateRobot from "../../hooks/useCreateRobot"; export default function EnvironmentNameLabel(): ReactElement { - const url = useParams(); + const { robotData } = useCreateRobot(); return ( - - {url?.robotName} + + + {robotData?.step1?.robotName || } + ); diff --git a/src/controllers/DataScienceTableData.tsx b/src/controllers/DataScienceTableData.tsx index 0ce3d634..c0de7d93 100644 --- a/src/controllers/DataScienceTableData.tsx +++ b/src/controllers/DataScienceTableData.tsx @@ -1,13 +1,13 @@ +import StartStopCell from "../components/TableInformationCells/StartStopCell"; +import DataScienceLogs from "../components/DataScienceLogs/DataScienceLogs"; import StateCell from "../components/TableInformationCells/StateCell"; -import { Fragment, useEffect, useMemo, useState } from "react"; -import useFunctions from "../hooks/useFunctions"; -import { useParams } from "react-router-dom"; -import InfoCell from "../components/TableInformationCells/InfoCell"; import { IDataScienceApp } from "../interfaces/environmentInterfaces"; import BasicCell from "../components/TableInformationCells/BasicCell"; -import DataScienceLogs from "../components/DataScienceLogs/DataScienceLogs"; +import InfoCell from "../components/TableInformationCells/InfoCell"; import URLCell from "../components/TableInformationCells/URLCell"; -import StartStopCell from "../components/TableInformationCells/StartStopCell"; +import { Fragment, useEffect, useMemo, useState } from "react"; +import useFunctions from "../hooks/useFunctions"; +import { useParams } from "react-router-dom"; export function DataScienceTableData() { const [responseApps, setResponseApps] = useState< @@ -127,52 +127,6 @@ export function DataScienceTableData() { body: (rowData: any) => { console.log(rowData); return ( - // { - // switch (rowData?.toggleState?.status) { - // case "Ready": - // return true; - // default: - // return false; - // } - // })()} - // loading={(() => { - // switch (rowData?.toggleState?.status) { - // case "Not Deployed": - // return false; - // case "Ready": - // return false; - // default: - // return true; - // } - // })()} - // disabled={(() => { - // switch (rowData?.status) { - // case "Not Deployed": - // return false; - // case "Ready": - // return false; - // default: - // return true; - // } - // })()} - // onOpenHandle={() => { - // createDataScienceApp({ - // applicationName: rowData?.toggleState?.name, - // }); - // setTimeout(() => { - // handleReload(); - // }, 1000); - // }} - // onCloseHandle={() => { - // deleteDataScienceApp({ - // applicationName: rowData?.toggleState?.name, - // }); - // setTimeout(() => { - // handleReload(); - // }, 1000); - // }} - // /> { switch (rowData?.status) { @@ -208,16 +162,14 @@ export function DataScienceTableData() { return true; } })()} - modalText={ - (() => { - switch (rowData?.status) { - case "Ready": - return "Are you sure you want to stop this application?"; - default: - return "Are you sure you want to start this application?"; - } - })() || "" - } + modalText={(() => { + switch (rowData?.status) { + case "Ready": + return "Are you sure you want to stop this application?"; + default: + return "Are you sure you want to start this application?"; + } + })()} /> ); }, diff --git a/src/functions/GeneralFunctions.ts b/src/functions/GeneralFunctions.ts index c29d7777..003ed25d 100644 --- a/src/functions/GeneralFunctions.ts +++ b/src/functions/GeneralFunctions.ts @@ -51,6 +51,19 @@ export function handleSplitOrganizationName(organizationName: string) { return organizationName?.split("_")[1]; } +export function orgNameViewer( + orgname: string, + capitalization: boolean = false, +) { + if (capitalization) { + return stringCapitalization({ + str: orgname?.split("_")[1], + }); + } + + return orgname?.split("_")[1]; +} + export function handleLogout() { [ "tokens", diff --git a/src/index.tsx b/src/index.tsx index a072efc3..c62ab8f6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { BrowserRouter } from "react-router-dom"; import ReactDOM from "react-dom/client"; import { Provider } from "react-redux"; @@ -14,9 +13,10 @@ import "@fontsource/inter/800.css"; import "@fontsource/inter/900.css"; import App from "./App"; import "animate.css"; +import "react-loading-skeleton/dist/skeleton.css"; const root = ReactDOM.createRoot( - document.getElementById("root") as HTMLElement + document.getElementById("root") as HTMLElement, ); root.render( @@ -24,5 +24,5 @@ root.render( - + , );