diff --git a/package.json b/package.json index cfaaf61c..1d7e7bb5 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.5", "description": "UI elements for building a frontend for conda-store", "scripts": { - "build": "tsc --build", + "build": "REACT_APP_VERSION=$npm_package_version tsc --build", "build:watch": "tsc --build --watch", "clean": "rimraf coverage lib storybook-static types .env *.tsbuildinfo", "clean:slate": "yarn run clean && rimraf node_modules", @@ -11,7 +11,7 @@ "eslint:check": "eslint . --ext .ts,.tsx", "prepare": "yarnpkg run build && husky install", "prepublishOnly": "yarnpkg run clean && yarnpkg run webpack:prod", - "start": "webpack server --history-api-fallback", + "start": "REACT_APP_VERSION=$npm_package_version webpack server --history-api-fallback", "start:chromium": "webpack serve --open 'chromium'", "start:prod": "NODE_ENV=production webpack serve", "storybook": "start-storybook -p 6006", @@ -19,9 +19,9 @@ "test": "jest --coverage", "report": "open ./coverage/lcov-report/index.html", "watch": "npm-run-all -p *:watch", - "webpack": "webpack --color", - "webpack:prod": "NODE_ENV=production webpack --color", - "webpack:watch": "webpack --color --watch" + "webpack": "REACT_APP_VERSION=$npm_package_version webpack --color", + "webpack:prod": "REACT_APP_VERSION=$npm_package_version NODE_ENV=production webpack --color", + "webpack:watch": "REACT_APP_VERSION=$npm_package_version webpack --color --watch" }, "keywords": [ "conda-store" diff --git a/src/components/icons/ArrowIcon.tsx b/src/components/icons/ArrowIcon.tsx index 35705e71..dc5f8e11 100644 --- a/src/components/icons/ArrowIcon.tsx +++ b/src/components/icons/ArrowIcon.tsx @@ -14,7 +14,7 @@ export const ArrowIcon = (props: React.SVGProps) => { > ); diff --git a/src/components/icons/BookIcon.tsx b/src/components/icons/BookIcon.tsx new file mode 100644 index 00000000..9779d67d --- /dev/null +++ b/src/components/icons/BookIcon.tsx @@ -0,0 +1,52 @@ +import * as React from "react"; +import { useTheme } from "@mui/material/styles"; + +export const BookIcon = (props: React.SVGProps) => { + const theme = useTheme(); + return ( + + + + + + + + + + ); +}; diff --git a/src/components/icons/CondaLogo.tsx b/src/components/icons/CondaLogo.tsx index 02e76df7..9606fc38 100644 --- a/src/components/icons/CondaLogo.tsx +++ b/src/components/icons/CondaLogo.tsx @@ -11,8 +11,8 @@ export const CondaLogo = (props: React.SVGProps) => { return ( ) => { ); diff --git a/src/components/icons/GroupIconAlt.tsx b/src/components/icons/GroupIconAlt.tsx index ad3ed17b..2aa343c4 100644 --- a/src/components/icons/GroupIconAlt.tsx +++ b/src/components/icons/GroupIconAlt.tsx @@ -5,39 +5,41 @@ export const GroupIconAlt = (props: React.SVGProps) => { const theme = useTheme(); return ( + + + + - - - - - - - - ); }; diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 275fe317..d0eca1f3 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -6,3 +6,4 @@ export * from "./DeleteIconAlt"; export * from "./UploadIcon"; export * from "./ChannelIcon"; export * from "./CodeIcon"; +export * from "./BookIcon"; diff --git a/src/features/environments/components/Environment.tsx b/src/features/environments/components/Environment.tsx index 60b1b6e0..1f35642b 100644 --- a/src/features/environments/components/Environment.tsx +++ b/src/features/environments/components/Environment.tsx @@ -1,8 +1,8 @@ import React from "react"; import CircleIcon from "@mui/icons-material/Circle"; import ListItemIcon from "@mui/material/ListItemIcon"; +import Button from "@mui/material/Button"; import { Environment as EnvironmentModel } from "../../../common/models"; -import { StyledIconButton } from "../../../styles"; import { useTheme } from "@mui/material/styles"; interface IEnvironmentProps { @@ -27,28 +27,46 @@ export const Environment = ({ return ( <> - {environment.name} - + ); }; diff --git a/src/features/environments/components/EnvironmentDropdown.tsx b/src/features/environments/components/EnvironmentDropdown.tsx index 981e8e88..5fa5d8a8 100644 --- a/src/features/environments/components/EnvironmentDropdown.tsx +++ b/src/features/environments/components/EnvironmentDropdown.tsx @@ -7,6 +7,7 @@ import Box from "@mui/material/Box"; import AccordionDetails from "@mui/material/AccordionDetails"; import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; +import useTheme from "@mui/material/styles/useTheme"; import { Environment } from "./Environment"; import { INamespaceEnvironments } from "../../../common/interfaces"; import { @@ -35,6 +36,7 @@ export const EnvironmentDropdown = ({ const { selectedEnvironment } = useAppSelector(state => state.tabs); const [isExpanded, setIsExpanded] = useState(false); const dispatch = useAppDispatch(); + const { palette } = useTheme(); const onCreateNewEnvironmentTab = ( event: React.SyntheticEvent, @@ -85,7 +87,7 @@ export const EnvironmentDropdown = ({ sx={{ fontWeight: 600, fontSize: "14px", - color: " #333" + color: palette.common.black }} > {namespace} diff --git a/src/features/environments/components/Environments.tsx b/src/features/environments/components/Environments.tsx index c6de60f5..a5c1f11f 100644 --- a/src/features/environments/components/Environments.tsx +++ b/src/features/environments/components/Environments.tsx @@ -1,5 +1,8 @@ import React, { memo, useEffect, useReducer } from "react"; import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import Link from "@mui/material/Link"; +import useTheme from "@mui/material/styles/useTheme"; import { EnvironmentsList } from "./EnvironmentsList"; import { debounce } from "lodash"; import { EnvironmentsSearch } from "./EnvironmentsSearch"; @@ -14,13 +17,13 @@ import { initialState as NInitialState, namespacesReducer } from "../../../features/namespaces/reducer"; -import { CondaLogo } from "../../../components"; import { isNamespaceListed, checkMyPrimaryNamespace, namespacesPermissionsMapper } from "../../../utils/helpers/namespaces"; import { Namespace } from "../../../common/models"; +import { BookIcon } from "../../../components"; export interface IBaseEnvironments { refreshEnvironments: boolean; @@ -32,6 +35,8 @@ const BaseEnvironments = ({ onUpdateRefreshEnvironments }: IBaseEnvironments) => { const size = 100; + const { palette } = useTheme(); + const version: string = process.env.REACT_APP_VERSION as string; const [state, dispatch] = useReducer(environmentsReducer, initialState); const [stateN, dispatchN] = useReducer(namespacesReducer, NInitialState); @@ -153,18 +158,21 @@ const BaseEnvironments = ({ - + handleChange(e.target.value)} /> {state.data && ( @@ -178,15 +186,64 @@ const BaseEnvironments = ({ )} - + + + + + Read the docs! + + + + + Version: {version} + ); diff --git a/src/features/environments/components/EnvironmentsList.tsx b/src/features/environments/components/EnvironmentsList.tsx index aebb291b..022901d0 100644 --- a/src/features/environments/components/EnvironmentsList.tsx +++ b/src/features/environments/components/EnvironmentsList.tsx @@ -2,16 +2,17 @@ import Box from "@mui/material/Box"; import CircularProgress from "@mui/material/CircularProgress"; import Typography from "@mui/material/Typography"; import React, { useEffect, useMemo, useRef } from "react"; +import useTheme from "@mui/material/styles/useTheme"; import InfiniteScroll from "react-infinite-scroll-component"; import { INamespaceEnvironments } from "../../../common/interfaces"; import { Environment, Namespace } from "../../../common/models"; -import { GroupIconAlt } from "../../../components"; import { StyledScrollContainer } from "../../../styles"; import { getMyPrimaryNamespace, getSharedNamespaces, namespaceMapper } from "../../../utils/helpers/namespaces"; +import { GroupIconAlt } from "../../../components"; import { EnvironmentDropdown } from "./EnvironmentDropdown"; interface IEnvironmentsListProps { @@ -37,6 +38,7 @@ export const EnvironmentsList = ({ search }: IEnvironmentsListProps) => { const scrollRef = useRef(null); + const { palette } = useTheme(); const { primaryNamespace, sharedNamespaces } = useMemo(() => { // Group existing environments by namespace... @@ -56,11 +58,7 @@ export const EnvironmentsList = ({ }, [search]); return ( - + {primaryNamespace && ( - + )} @@ -88,21 +91,21 @@ export const EnvironmentsList = ({ sx={{ display: "flex", alignItems: "center", - margin: "0 0 5px 12px" + margin: "0 0 5px 12px", + paddingTop: "20px" }} > + - Shared environments + Shared Environments - {sharedNamespaces && sharedNamespaces.map((namespace: INamespaceEnvironments) => ( diff --git a/src/features/environments/components/EnvironmentsSearch.tsx b/src/features/environments/components/EnvironmentsSearch.tsx index 60662234..447d650e 100644 --- a/src/features/environments/components/EnvironmentsSearch.tsx +++ b/src/features/environments/components/EnvironmentsSearch.tsx @@ -6,7 +6,7 @@ import useTheme from "@mui/material/styles/useTheme"; import React from "react"; import { PrefContext } from "../../../preferences"; -import { SearchIconAlt } from "../../../components"; +import { SearchIconAlt, CondaLogo } from "../../../components"; import { AuthButton } from "../../auth"; interface IEnvironmentsSearchProps { @@ -34,6 +34,17 @@ export const EnvironmentsSearch = ({ onChange }: IEnvironmentsSearchProps) => { position: "relative" }} > + + + + {authButton} { color: palette.common.black, fontWeight: 600, fontSize: "14px", - marginTop: "40px" + marginTop: "55px" }} > Package Manager - {authButton} ({ + color: theme.palette.common.black, + borderRadius: "0px", + padding: "0px", + minWidth: "auto", + ":hover": { + boxShadow: "none", + textDecoration: "underline", + textUnderlineOffset: "0.3em" + } +})); diff --git a/src/styles/StyledScrollContainer.tsx b/src/styles/StyledScrollContainer.tsx index f834ccc3..0573b722 100644 --- a/src/styles/StyledScrollContainer.tsx +++ b/src/styles/StyledScrollContainer.tsx @@ -14,7 +14,7 @@ export const StyledScrollContainer = styled(Box, { backgroundColor: "transparent" }, "&::-webkit-scrollbar-thumb": { - backgroundColor: "#DADCE0", + backgroundColor: palette.secondary.light, borderRadius: "5px", border: "none" } diff --git a/src/styles/index.tsx b/src/styles/index.tsx index 9f3f2bfa..e16a568f 100644 --- a/src/styles/index.tsx +++ b/src/styles/index.tsx @@ -12,3 +12,4 @@ export * from "./StyledTabs"; export * from "./StyledBox"; export * from "./StyledMetadataItem"; export * from "./StyledSwitchButton"; +export * from "./StyledListItem"; diff --git a/webpack.config.js b/webpack.config.js index 76d3c3e7..26d04039 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,6 +8,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const Dotenv = require("dotenv-webpack"); +const webpack = require("webpack"); // const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin"); // To improve build times for large projects enable fork-ts-checker-webpack-plugin @@ -56,7 +57,8 @@ const basicConfig = { title: "conda-store" }), new MiniCssExtractPlugin(), - new Dotenv() + new Dotenv(), + new webpack.EnvironmentPlugin(['REACT_APP_VERSION']) ], mode: isProd ? "production" : "development",