fix: updates

Author: Cahllagerfeld

.github/workflows/release.yml

@@ -26,6 +26,7 @@ jobs:
           yarn install
           yarn build
         env:
+          REACT_APP_HUB_API_URL: 'https://hubapi.zenml.io'
           REACT_APP_BASE_API_URL: "/api/v1"
           REACT_APP_MOCKAPI_RESPONSE: false
           REACT_APP_VERSION: ${{ steps.get_version.outputs.VERSION }}

global.d.ts

@@ -48,10 +48,15 @@ interface TUser {
 }
 
 interface THubUser {
-  id: TId;
-  website: string;
-  bio: string;
+  id: string;
+  email: string;
+  is_active: boolean;
+  is_superuser: boolean;
+  is_verified: boolean;
+  username: string;
   avatar_url?: string;
+  bio: string;
+  website: string;
 }
 
 interface TOrganization {

src/routes/appRoutesConfig.tsx

@@ -510,7 +510,7 @@ const routes = [
     Component: CreatePlugin,
     visibility: {
       // auth handled separately through HubConnectPrompt; need to be able to auth-restrict actions like starring on the list plugins page so needs to be more granular than just page-level
-      authentication: RouteVisibilityAuthentication.always,
+      authentication: RouteVisibilityAuthentication.authenticatedOnly,
     },
     exact: true,
   },

src/services/locales/zu.json

@@ -34,9 +34,13 @@
                 "placeholder": "John Doe"
               },
               "username": {
-                "label": "Username",
+                "label": "Server Username",
                 "placeholder": "johndoe"
               },
+              "hubUsername": {
+                "label": "Hub Username",
+                "placeholder": "Connect Hub first"
+              },
               "email": {
                 "label": "Email address",
                 "placeholder": "[email protected]"

src/ui/layouts/plugins/CreatePlugin/index.tsx

@@ -23,7 +23,7 @@ import { workspaceSelectors } from '../../../../redux/selectors';
 import { getTranslateByScope } from '../../../../services';
 import { DEFAULT_WORKSPACE_NAME, iconColors } from '../../../../constants';
 import { HUB_API_URL } from '../../../../api/constants';
-import { useHubToken } from '../../../hooks/auth';
+import { useHubToken, useHubUser } from '../../../hooks/auth';
 import { PluginsLayout } from '../shared/Layout';
 import { getTagOptions } from '../api';
 import { debounce } from 'lodash';
@@ -44,7 +44,7 @@ const CreatePlugin: React.FC = () => {
   const history = useHistory();
   const { failureToast } = useToaster();
   const [creatingPlugin, setCreatingPlugin] = useState(false);
-
+  const hubUser = useHubUser();
   const [packageName, setPackageName] = useState('');
   const [versionNumber, setVersionNumber] = useState('');
   const [packageNameStatus, setPackageNameStatus] = useState({
@@ -149,9 +149,21 @@ const CreatePlugin: React.FC = () => {
 
             {/* package name and repository URL */}
             <Box marginVertical="xl">
-              <Box marginBottom="lg">
+              <Box
+                marginBottom="lg"
+                style={{
+                  display: 'flex',
+                  alignItems: 'end',
+                  gap: '1rem',
+                }}
+              >
+                {hubUser && (
+                  <Paragraph style={{ paddingBottom: '1rem' }}>
+                    {hubUser.username}/
+                  </Paragraph>
+                )}
                 <ValidatedTextField
-                  label="Package Name"
+                  label="Package Name *"
                   value={packageName}
                   onChange={(p: string) => {
                     if (!/^[a-zA-Z]\w*$/.test(p)) {
@@ -170,31 +182,31 @@ const CreatePlugin: React.FC = () => {
                 />
               </Box>
 
-              {/* version number */}
+              {/* repository URL */}
               <Box marginBottom="lg">
                 <ValidatedTextField
-                  label="Version Number (optional)"
-                  value={versionNumber}
-                  onChange={setVersionNumber}
+                  label="Repository URL *"
+                  value={repositoryUrl}
+                  onChange={setRepositoryUrl}
                   status={{ status: 'editing' }}
-                  placeholder="Version number"
                 />
               </Box>
 
-              {/* repository URL */}
+              {/* version number */}
               <Box marginBottom="lg">
                 <ValidatedTextField
-                  label="Repository URL"
-                  value={repositoryUrl}
-                  onChange={setRepositoryUrl}
+                  label="Version Number (optional)"
+                  value={versionNumber}
+                  onChange={setVersionNumber}
                   status={{ status: 'editing' }}
+                  placeholder="Version number"
                 />
               </Box>
 
               {/* repository subdirectory */}
               <Box marginBottom="lg">
                 <InputWithLabel
-                  label="Subdirectory of repository"
+                  label="Subdirectory of repository (optional)"
                   InputComponent={
                     <TextInput
                       value={repositorySubdirectory}
@@ -207,7 +219,7 @@ const CreatePlugin: React.FC = () => {
               {/* repository branch */}
               <Box marginBottom="lg">
                 <InputWithLabel
-                  label="Branch of repository"
+                  label="Branch of repository (optional)"
                   InputComponent={
                     <TextInput
                       value={repositoryBranch}
@@ -230,7 +242,7 @@ const CreatePlugin: React.FC = () => {
               {/* commit hash */}
               <Box marginBottom="lg">
                 <InputWithLabel
-                  label="Commit hash"
+                  label="Commit hash (optional)"
                   InputComponent={
                     <TextInput
                       value={commitHash}
@@ -242,7 +254,7 @@ const CreatePlugin: React.FC = () => {
 
               {/* Logo URL */}
               <ValidatedTextField
-                label="Logo URL"
+                label="Logo URL (optional)"
                 value={logoUrl}
                 onChange={setLogoUrl}
                 status={{ status: 'editing' }}
@@ -254,7 +266,7 @@ const CreatePlugin: React.FC = () => {
               onChangeText={setTagText}
               tags={tags}
               onChangeTags={setTags}
-              label="Add tags"
+              label="Add tags (optional)"
               placeholder="Ex. Artificial Intelligence"
               getTagOptions={debouncedGetTagOptions}
             />
@@ -282,15 +294,16 @@ const CreatePlugin: React.FC = () => {
                         href="https://hub.zenml.io/tou"
                       >
                         Terms of use
-                      </a>
+                      </a>{' '}
+                      *
                     </p>
                   }
                   value={checkGuidelines}
                   setValue={setCheckGuidelines}
                 />
               </Box>
               <CheckboxInput
-                label="I agree to publicly publish my plugin on the ZenML Hub under the Apache license."
+                label="I agree to publicly publish my plugin on the ZenML Hub under the Apache license. *"
                 value={checkPublish}
                 setValue={setCheckPublish}
               />

src/ui/layouts/plugins/ListPlugins/index.tsx

@@ -141,6 +141,9 @@ const ListPlugins: React.FC = () => {
                     width: '290px',
                     boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.05)',
                     borderRadius: '4px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
                     margin: '0 16px 16px 0',
                   }}
                   onClick={() =>
@@ -152,50 +155,57 @@ const ListPlugins: React.FC = () => {
                     )
                   }
                 >
-                  {p.author === 'ZenML' && (
-                    <icons.verified color={iconColors.primary} size="sm" />
-                  )}
-                  {/* logo */}
-                  <img
-                    src={p.logo_url || ZenMLLogo}
-                    alt={`${p.name} logo`}
-                    style={{
-                      height: '80px',
-                      maxWidth: '60%',
-                      objectFit: 'contain',
-                      display: 'block',
-                      margin: 'auto',
-                      marginTop: 24,
-                      marginBottom: 16,
-                    }}
-                  />
-
-                  <H4
-                    color="primary"
-                    style={{
-                      fontSize: '16px',
-                      marginTop: 12,
-                      marginBottom: 4,
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                    }}
-                  >
-                    <span title={`${p.author}/${p.name}`}>
-                      {p.author}/{p.name}
-                    </span>
-                  </H4>
+                  <div>
+                    {p.author === 'ZenML' && (
+                      <icons.verified color={iconColors.primary} size="sm" />
+                    )}
+                    {/* logo */}
+                    <img
+                      src={p.logo_url || ZenMLLogo}
+                      alt={`${p.name} logo`}
+                      style={{
+                        height: '80px',
+                        maxWidth: '60%',
+                        objectFit: 'contain',
+                        display: 'block',
+                        margin: 'auto',
+                        marginTop: 24,
+                        marginBottom: 16,
+                      }}
+                    />
+                  </div>
+                  <div>
+                    <H4
+                      color="primary"
+                      style={{
+                        fontSize: '16px',
+                        marginTop: 12,
+                        marginBottom: 4,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                      }}
+                    >
+                      <span title={`${p.author}/${p.name}`}>
+                        {p.author}/{p.name}
+                      </span>
+                    </H4>
 
-                  <Paragraph
-                    style={{
-                      color: '#A8A8A8',
-                      fontSize: '12px',
-                      lineHeight: '14px',
-                      marginBottom: 20,
-                    }}
-                  >
-                    {p.description}
-                  </Paragraph>
+                    <Paragraph
+                      style={{
+                        color: '#A8A8A8',
+                        fontSize: '12px',
+                        lineHeight: '14px',
+                        marginBottom: 20,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                      }}
+                    >
+                      {' '}
+                      <span title={p.description}>{p.description}</span>
+                    </Paragraph>
+                  </div>
 
                   {/* <FlexBox justifyContent="space-between">
                 <Box>
@@ -257,9 +267,8 @@ const ListPlugins: React.FC = () => {
                         }
                       }}
                       paddingRight="md"
-                    >
-                      <StarIcon size="sm" color={iconColors.primary} />
-                    </Box>
+                    ></Box>
+                    <StarIcon size="sm" color={iconColors.primary} />
                   </FlexBox>
                 </LinkBox>
               );

src/ui/layouts/plugins/PluginDetail/index.tsx

@@ -355,7 +355,11 @@ const PluginDetail: React.FC = () => {
                     ) : (
                       <Box>
                         {versions.map((v) => (
-                          <FlexBox key={v.version} marginVertical="md">
+                          <FlexBox
+                            key={v.version}
+                            marginVertical="md"
+                            style={{ alignItems: 'center' }}
+                          >
                             {/* version */}
                             <Box style={{ width: '125px' }}>
                               <Paragraph
@@ -371,7 +375,7 @@ const PluginDetail: React.FC = () => {
 
                             {/* details */}
                             <FlexBox fullWidth>
-                              <Paragraph size="tiny" color="grey">
+                              <Paragraph size="body" color="grey">
                                 {v.release_notes ??
                                   'No release notes for this version'}
                               </Paragraph>

src/ui/layouts/plugins/UpdatePlugin/index.tsx

@@ -135,6 +135,17 @@ const UpdatePlugin: React.FC = () => {
             paddingRight="lg2"
             style={{ maxWidth: '650px', flexGrow: 1 }}
           >
+            {/* repository URL */}
+            <Box marginBottom="lg">
+              <ValidatedTextField
+                label="Repository URL *"
+                value={repositoryUrl}
+                onChange={setRepositoryUrl}
+                status={{ status: 'editing' }}
+                placeholder="Repository URL"
+              />
+            </Box>
+
             {/* version number */}
             <Box marginBottom="lg">
               <ValidatedTextField
@@ -151,17 +162,6 @@ const UpdatePlugin: React.FC = () => {
               />
             </Box>
 
-            {/* repository URL */}
-            <Box marginBottom="lg">
-              <ValidatedTextField
-                label="Repository URL"
-                value={repositoryUrl}
-                onChange={setRepositoryUrl}
-                status={{ status: 'editing' }}
-                placeholder="Repository URL"
-              />
-            </Box>
-
             {/* repository branch */}
             <Box marginBottom="lg">
               <InputWithLabel