feat: add secret alias field to code graph

stakwork · Feb 9, 2025 · c6c7219 · c6c7219
1 parent f4a4e34
commit c6c7219
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 12 deletions.
diff --git a/src/people/widgetViews/WorkspaceMission.tsx b/src/people/widgetViews/WorkspaceMission.tsx
@@ -289,6 +289,32 @@ const DragIcon = styled.img`
   margin: 0;
 `;
 
+const CodeGraphDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-left: 24px;
+`;
+
+const CodeGraphRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+`;
+
+const CodeGraphLabel = styled.span`
+  font-size: 0.9em;
+  min-width: 80px;
+  color: #888;
+`;
+
+const CodeGraphValue = styled.span`
+  color: #333;
+  font-size: 0.9em;
+  word-break: break-all;
+`;
+
 const WorkspaceMission = () => {
   const { main, ui } = useStores();
   const { uuid } = useParams<{ uuid: string }>();
@@ -323,6 +349,7 @@ const WorkspaceMission = () => {
   const [selectedCodeGraph, setSelectedCodeGraph] = useState<{
     name: string;
     url: string;
+    secret_alias: string;
   }>();
   const history = useHistory();
   const { chat } = useStores();
@@ -369,7 +396,8 @@ const WorkspaceMission = () => {
       if (graph) {
         setSelectedCodeGraph({
           name: graph.name,
-          url: graph.url
+          url: graph.url,
+          secret_alias: graph.secret_alias
         });
       }
       setCurrentCodeGraphUuid(graph.uuid);
@@ -383,7 +411,8 @@ const WorkspaceMission = () => {
   const closeCodeGraphModal = () => {
     setSelectedCodeGraph({
       name: '',
-      url: ''
+      url: '',
+      secret_alias: ''
     });
     setCurrentCodeGraphUuid('');
     setCodeGraphModal(false);
@@ -1177,12 +1206,23 @@ const WorkspaceMission = () => {
                               </EditPopover>
                             )}
                           </OptionsWrap>
-                          <RepoName>{graph.name} :</RepoName>
-                          <EuiToolTip position="top" content={graph.url}>
-                            <a href={graph.url} target="_blank" rel="noreferrer">
-                              {graph.url}
-                            </a>
-                          </EuiToolTip>
+                          <RepoName>{graph.name}</RepoName>
+                          <CodeGraphDetails>
+                            <CodeGraphRow>
+                              <CodeGraphLabel>URL:</CodeGraphLabel>
+                              <EuiToolTip position="top" content={graph.url}>
+                                <a href={graph.url} target="_blank" rel="noreferrer">
+                                  {graph.url}
+                                </a>
+                              </EuiToolTip>
+                            </CodeGraphRow>
+                            {graph.secret_alias && (
+                              <CodeGraphRow>
+                                <CodeGraphLabel>Secret Alias:</CodeGraphLabel>
+                                <CodeGraphValue>{graph.secret_alias}</CodeGraphValue>
+                              </CodeGraphRow>
+                            )}
+                          </CodeGraphDetails>
                         </StyledListElement>
                       ))}
                   </StyledList>
@@ -1668,7 +1708,7 @@ const WorkspaceMission = () => {
             zIndex: 20,
             maxHeight: '100%',
             borderRadius: '10px',
-            minWidth: isMobile ? '100%' : '25%',
+            minWidth: isMobile ? '100%' : '30%',
             minHeight: isMobile ? '100%' : '20%'
           }}
           overlayClick={closeCodeGraphModal}
@@ -1689,6 +1729,7 @@ const WorkspaceMission = () => {
             handleDelete={handleDeleteCodeGraph}
             name={selectedCodeGraph?.name}
             url={selectedCodeGraph?.url}
+            secret_alias={selectedCodeGraph?.secret_alias}
           />
         </Modal>
         <Modal

diff --git a/src/people/widgetViews/workspace/AddCodeGraphModal.tsx b/src/people/widgetViews/workspace/AddCodeGraphModal.tsx
@@ -68,6 +68,7 @@ interface AddCodeGraphProps {
   currentUuid?: string;
   name?: string;
   url?: string;
+  secret_alias?: string;
 }
 
 const AddCodeGraph: React.FC<AddCodeGraphProps> = ({
@@ -78,16 +79,25 @@ const AddCodeGraph: React.FC<AddCodeGraphProps> = ({
   currentUuid,
   handleDelete,
   name = '',
-  url = ''
+  url = '',
+  secret_alias = ''
 }: AddCodeGraphProps) => {
   const [graphName, setGraphName] = useState(name);
   const [graphNameError, setGraphNameError] = useState(false);
   const [graphUrl, setGraphUrl] = useState(url);
   const [graphUrlError, setGraphUrlError] = useState(false);
+  const [secretAlias, setSecretAlias] = useState(secret_alias);
+  const [secretAliasError, setSecretAliasError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const { main } = useStores();
   const [toasts, setToasts] = useState<Toast[]>([]);
 
+  const handleSecretAliasChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setSecretAlias(newValue);
+    setSecretAliasError(!newValue.match(/^{{.*}}$/));
+  };
+
   const handleGraphNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     if (newValue.length <= MAX_NAME_LENGTH) {
@@ -137,7 +147,8 @@ const AddCodeGraph: React.FC<AddCodeGraphProps> = ({
         workspace_uuid,
         uuid: currentUuid || '',
         name: normalizeInput(graphName),
-        url: graphUrl
+        url: graphUrl,
+        secret_alias: secretAlias
       };
 
       await main.createOrUpdateCodeGraph(codeGraph);
@@ -184,14 +195,27 @@ const AddCodeGraph: React.FC<AddCodeGraphProps> = ({
             style={{ borderColor: graphUrlError ? errcolor : '' }}
           />
         </WorkspaceInputContainer>
+        <WorkspaceInputContainer feature={true} style={{ color: secretAliasError ? errcolor : '' }}>
+          <WorkspaceLabel style={{ color: secretAliasError ? errcolor : '' }}>
+            Secret Alias *
+          </WorkspaceLabel>
+          <TextInput
+            placeholder="{{2b_SWARm38}}"
+            value={secretAlias}
+            feature={true}
+            data-testid="secret-alias-input"
+            onChange={handleSecretAliasChange}
+            style={{ borderColor: secretAliasError ? errcolor : '' }}
+          />
+        </WorkspaceInputContainer>
       </WorkspaceDetailsContainer>
       <FooterContainer>
         <ButtonWrap>
           <ActionButton data-testid="codegraph-cancel-btn" onClick={closeHandler} color="cancel">
             Cancel
           </ActionButton>
           <ActionButton
-            disabled={graphNameError || !graphName || !graphUrl}
+            disabled={graphNameError || secretAliasError || !graphName || !graphUrl || !secretAlias}
             data-testid="add-codegraph-btn"
             color="primary"
             onClick={handleSave}

diff --git a/src/store/interface.ts b/src/store/interface.ts
@@ -513,6 +513,7 @@ export interface CodeGraph {
   workspace_uuid: string;
   name: string;
   url: string;
+  secret_alias: string;
   created?: string;
   updated?: string;
 }